PDA

View Full Version : 3 column help


Jittor
10-23-2006, 05:47 PM
So I have a 3 column CSS layout that I have been playing with trying to learn CSS better. In my 3rd column, on the right, I add a bunch of text and gave it some padding and so on. Well, now the text expands past the footer and in IE there is just a big block of white under the footer where the wrapper is expanding....I think. How do I get my footer to expand to the length of the longest column, whether it be the left, center, or right column? Thanks!

domedia
10-24-2006, 12:20 AM
Not unless you show us some code :)

gmcrone
10-25-2006, 04:55 AM
Wrap your 3 columns inside another div, do a "clear:all", then your next div is your footer div.

Mike...

Jittor
10-25-2006, 09:55 PM
I put a

.clearit{
clear:both;
}

before my footer div and that worked.

domedia
10-26-2006, 12:46 PM
ok, so you needed to clear your floats, hard to tell without seeing your code :)

In order to clear floats, without any extra space, and have it cross browser friendly; this snippet is great:
.clearit {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}

Jittor
10-26-2006, 01:56 PM
Sorry Dom I will post my code this time I promise :) ,

Thanks for the code. I tried it and in FireFox the right colum still extends past the footer, but in IE it doesn't, and in both the my footer only goes the height of the main body (the center column) and I woud like it to be the height of the longest column. And, to add to my list of mess ups In FireFox, my header that has a width of 755px seems to be smaller than my wrapper that also has a width of 755px? I am still new at this so I could be totally screwing it up. Anyway...here's the code. I will attach it as well.

CSS


*{
margin:0px;
padding:0px;
}
body{
background:#000;
font:100% Tahoma #fff;
color:#33FFFF;
}
#wrapper{
background-image:url(../images/RCwrapper.gif);
width:755px;
margin:10px auto;
}
#header{
height:164px;
width:755px;
border-bottom:1px solid #ffffff;
}
#nav{
font:80% Arial, Helvetica, sans-serif;
float:left;
width:100px;
text-align:left;
display:block;
margin-top:5px;
margin-left:3px;
}
#nav a{
background-image:url(../images/Lnav_button.gif);
width:90px;
color:#000000;
font-variant:small-caps;
text-decoration:none;
text-align:left;
padding:2px 6px;
}
#nav a:hover, #nav a:focus{
background-image:url(../images/Lnav_button_over.gif);
text-decoration:underline;
}
#news{
color:#000000;
margin-left:0px;
float:right;
width:140px;
}
#news p{
font:80% Arial, Helvetica, sans-serif;
padding:5px 15px;
}
#content{
color:#000;
border:0px solid #FF6600;
}
#content p{
font:80% Tahoma;
padding:0px 15px 5px 15px;
margin-left:100px;
margin-right:140px;
}
.leftfloat{
float:left;
border:2px solid #fff;
margin:4px;
}
.rightfloat{
float:right;
border:2px dotted #fff;
margin:0px;
}
.clearit {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
#footer{
font:"Times New Roman", Times, serif;
text-align:center;
word-spacing:2px;
font-size:12px;
color:#fff;
background:#FF6600;
height:15px;
padding:2px 0px 2px 5px;
border-top: 2px solid #000;
border-bottom:1px solid #000;
}
#footer a{
font:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
text-decoration:none;
padding:5px 0px 5px 0px;
}
#footer a:hover, #footer a:focus{
text-decoration:underline;
color:#666666;
}

Jittor
10-26-2006, 01:59 PM
Here's the attachments - sorry they didn't attach for some reason.

domedia
10-26-2006, 02:10 PM
Hey Jittor,
it all makes sense now :)

Some of the columns are still trying to float next to the footer. To make sure that the footer stays clear of any of these floats, attach the clear property on the bottom nav container itself, look at last line I added to the footer CSS:
#footer{
font:"Times New Roman", Times, serif;
text-align:center;
word-spacing:2px;
font-size:12px;
color:#fff;
background:#FF6600;
height:15px;
padding:2px 0px 2px 5px;
border-top: 2px solid #000;
border-bottom:1px solid #000;
clear: all;
}

domedia
10-26-2006, 02:16 PM
Actually, that didn't work in IE.
Do this instead, works cross browser.
Right before your footer starts just add the div clearer:
<div class="clearit"></div>
<div id="footer">etc..

domedia
10-26-2006, 02:17 PM
Or looking above in this thread, gmcrones solution would have worked just fine as well.

Jittor
10-26-2006, 04:38 PM
Nicely done - What is weird is I had the .clearit class but never but it into my main body - it's like I almost know what to do but couldn't quite figure it out. Thanks for stick'n with me on this one Dom!

domedia
10-26-2006, 05:18 PM
Hey anytime Jittor :)

.classname can be anything, it's just a name that you make up. The CSS inside that class (wihch is the stuff that does stuff) will be applied to whatever tag you apply it to. ie: <tagname class="classname">something</classname> Not sure how much of this you knew or not. Working with DW is sometimes hard, because DW writes so much of the code for you, that you really don't need to know what it is :)