FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS layout help

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


snowboardalliance
How do I use CSS to make a three column header 100px tall with column 1 being 100px wide, column 2 450px wide, and column 3 the rest of the space? I want them each spaced out 10px. So far, all I could get was to either set column 3 to a specific size, or have column three below the other 2 at 100%. Maybe I don't need to use floats the way I did, does anyone know how to do it?

My only workaround was to make the last column 150px wide. Please check my css code, (Test.css), I probably did something incorrectly.
www.snowboardalliance.frihost.net/test/Test.html
thame
I'm not sure, but it looks like you've got it already.

If you only need the header to be 3 columns, consider limiting the paragraph height for the header (ie. #header p {blah blah}).
snowboardalliance
what I have is a workaround. I want to know if it is possible to make the third column take up the rest of the space (so it is bigger on higher resolutions)
mike4652
Did you use the div tag in your css?
http://slickfifties.frihost.net/test0001.htm
I am not sure if this is what you are after or not Wink
friscofrankie
here is an example of what worked for me. This dispalys nicely in Firefox. I'm not on windows at the moment so,,, who knows what IE'll display. Try it,
Code:

.head-l
{
   position: absolute;
   width: 100px;
   height: 100px;
   top: 0;
   left: 0;
   background-color: red;
}
.head-c
{
   position: absolute;
   width: 450px;
   height: 100px;
   top: 0;
   left: 100;
   background-color: green;
}
.head-r
{
   position: absolute;

   height: 100px;
   top: 0;
   left: 550;
   right: 0;
   background-color: blue;
}

here's the html that I used to test it
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> something</title>
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
<div class="head-l">
   This is the left
</div>
<div class="head-c">
   this is the center
</div>
<div class="head-r">
   This is the right
</div>
</body>
</html>

No gaurantees IE will handle this the same but it should.

FF
snowboardalliance
friscofrankie wrote:
...


Works in FF, but IE just makes the last one smaller. Good enough for me. I'll just not set the last one's width and not use floats.
friscofrankie
Don't know if this has been posted before. If it has, maybe some of the newer folks can benifit from it.
This is Microsoft's list of "supported CSS attributes" .

In this list, support for the "right" atturbute is claimed. It doesn;t work as specified (by Microsoft)

Below is a modified style sheet that will work if you don;t mind having your right column aligned right.

Code:

html, body
{
   margin:0;
   padding: 0;
   height; 100%;
}
.head-l
{
   position: absolute;
   display: block;
   width: 100px;
   height: 100px;
   top: 0px;
   left: 0px;
   background-color: red;
   z-index: 2;
}
.head-c
{
   position: absolute;
   display: block;
   width: 450px;
   height: 100px;
   margin-right: 5px;
   text-align: center; /*not important*/
   top: 0px;
   left: 100px;
   background-color: green;
   z-index: 2
}
.head-r
{
   position: absolute;
   width: 100%;
   /*the width must be 100% if you are to use the padding attrib below,
   otherwise, set it to something you know will fill any viewport*/
   display: block;
   height: 100px;
   top: 0px;
   right: 0px;
   
   text-align: right;
   /*the last col, being under the others, will not display your
   text/image without the alignment set to "right" in FF*/
   
   padding-left: 555px;
   /* set the padding like this and IE gives good word wrap or an image
   display in the RH col without stting alignment to "right";
   FF doesn't. the containter box for the RH col will grow beyond the
   bottom of the others on radical resize (see the body-text section on
   how I dealt with this)*/

   /*white-space: nowrap;*/
/*I'd use this only if i had an image or text I didn;t mind sliding under the center col. */
   background-color: blue;
   z-index: 1;
}
.body-text
{
   position: absolute;
   top: 100px;
   z-index: 2;
   color: #000000;
   background-color: #ffffff;
}
.footer
{
   position:absolute;
   bottom: 0px;
   height: 25px;
   width:100%;
   background-color: yellow;
   z-index: 3;
}

/*Add this to the html i included earlier below the last div, should work anywhere.*/

<div class="body-text">
So then there is the issue of what happens when the 3rd colum is
collapsed beyond it's ability to contain the text
</div>
*/

Not elegant, but, it works. I imagine with new releases of MSIE/FF you may have to tweak it again. As users resize whatever is in the right column will slide under the other two columns

This works in Firefox as well, but we have a problem with the right hand text sliding under the other two columns. setting alignment fixes that until you reach width limits. Most of the problems I faced is in the comments.
This has given me an opportunity to work on some the issues i'm facing; in reality it's just a a kludge that works now. who knows what the new releases will bring?.
It took me a couple fo hours of tweaking to figure out and There are some more articles on the net about this subject I want to read. Play around with it a bit, and please, let me know if you make any further headway on it.
AS you may have noticed, I'm a little new to CSS as well but afer a couple of weeks I find it infinitely helpful, albiet, challenging.
hope this helps.

FF
(edit)
removed some typos and inaccurate entries in the code.

(edit II, the sequel)
If you change the width values to percentages eg, 17% ,66% & 17% you'll have good funtion cross-platform No worriess about the right side the RH tex/images. it's not 100,450, etc but it works nicely. Reset the z-index to be common values for all of three.
snowboardalliance
friscofrankie wrote:
...


Maybe I'll try that and use the parts I need, but for now I'm too busy. I'll post back though after I work on it again, thanks.
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.