?

Log in

No account? Create an account
Previous Entry Share Next Entry
css column question
joy or pain
purpleglitter wrote in webdesign
*edited*: working now! thanks!!

i have made an all-css design: header, 3 columns, & a footer. i want all to meet up but for some reason the left column stops just before the footer & looks all wonky. what am i doing wrong? the actual page is here: http://www.purpleglitter.com/all-css.html


<html>
<head>
<title>My Test 2</title>
<style type="text/css">

<!--
#whole{
width:800;
margin:10px auto;
border:1px solid #000000;
color:#333333;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
}
#top{
padding:.5em;
background-color:#B2BC03;
border-bottom:1px solid #000000;
}
#top h1{
background-color:#92C36A;
border:1px solid #688356;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:33pt;
color:#759D56;
font-weight:plain;
text-align:center;
letter-spacing:3px;
padding:10px;
margin:10px;
}
#leftcolumn{
height:100%;
float:left;
width:160px;
margin:0px;
padding:1em;
background-color:#006685;
}
#rightcolumn{
height:100%;
float:right;
width:160px;
margin:0px;
padding:1em;
background-color:#FFFFFF;
}
#content{
height:100%;
background-color:#FFFFFF;
margin-left:184px;
margin-right:200px;
width:403;
border-left:1px solid #000000;
border-right:1px solid #000000;
padding:1em;
max-width:36em;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000000;
}
#content H1{
width:90%;
background-color:#F1FAFF;
border:1px solid #E5EBF9;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:30pt;
color:#C1C9CC;
text-align:center;
padding:5px;
}
 
#footer{
clear:both;
margin:0px;
padding:10px;
color:#333;
background-color:#B2BC03;
border-top:1px solid #000000;
}
#footer H1{
background-color:#92C36A;
border:1px solid #688356;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:18pt;
color:#759D56;
font-weight:plain;
text-align:center;
letter-spacing:3px;
margin:5px;
padding:10px;
}
-->

</style>
</head>
<body>
<div id="whole">
<div id="top"><h1>GRAPHIC AND
NAVIGATION</h1></div>
<div id="leftcolumn">Graphic</div>
<div id="rightcolumn">Graphic</div>
<div id="content">
<H1>HEADER GRAPHIC</H1>
Iquatio endiam amcommy nis nis num ametue vel dignim vel ero eu faccumsan ute
magnit lore dolorper augait wis non utpat do core magna feum accum iurem dip et,
sustinisi blandre tem dit alit ulputat. Ut wisi blam iurem quatie tat. Metue et,
sum inisisit lor sumsan essed eum ipisit lorero ent vullutpat ad modolorem ipis
atuer iuscilit am, sis nis nos esecte faciniam ipit ut ut dolor sequipit incidui
ex et, quiscin eugue dolortie dolore commy nulla feum augiam del iuscidunt
luptat nullums andit, sectem el ing eum dit num et adiam zzriure vel utating
eugait laorpero odionse dui eugait lute mod del ullumsandrem velit
wiss.<p>
Iquatio endiam amcommy nis nis num ametue vel dignim vel ero eu faccumsan ute
magnit lore dolorper augait wis non utpat do core magna feum accum iurem dip et,
sustinisi blandre tem dit alit ulputat. Ut wisi blam iurem quatie tat. Metue et,
sum inisisit lor sumsan essed eum ipisit lorero ent vullutpat ad modolorem ipis
atuer iuscilit am, sis nis nos esecte faciniam ipit ut ut dolor sequipit incidui
ex et, quiscin eugue dolortie dolore commy nulla feum augiam del iuscidunt
luptat nullums andit, sectem el ing eum dit num et adiam zzriure vel utating
eugait laorpero odionse dui eugait lute mod del ullumsandrem velit
wiss.<p>
Iquatio endiam amcommy nis nis num ametue vel dignim vel ero eu faccumsan ute
magnit lore dolorper augait wis non utpat do core magna feum accum iurem dip et,
sustinisi blandre tem dit alit ulputat. Ut wisi blam iurem quatie tat. Metue et,
sum inisisit lor sumsan essed eum ipisit lorero ent vullutpat ad modolorem ipis
atuer iuscilit am, sis nis nos esecte faciniam ipit ut ut dolor sequipit incidui
ex et, quiscin eugue dolortie dolore commy nulla feum augiam del iuscidunt
luptat nullums andit, sectem el ing eum dit num et adiam zzriure vel utating
eugait laorpero odionse dui eugait lute mod del ullumsandrem velit
wiss.<p>
</div>
<div id="footer"><H1>COPYRIGHT AND SMALL
GRAPHIC</H1></div>
</div>
</body>
</html>

  • 1
Disclaimer: I am not a CSS expert.

I use Firefox as my main browser, so the test page loaded looking differently for me there than in IE6. In Fx the sidebars go all the way to the bottom, but the text in the center column overlaps the copyright section. I, too, think that the height:100% is to blame. However, the CSS in your page is valid:
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.purpleglitter.com/all-css.html

I played around with the code a little and (besides remembering why I prefer tables for basic layout -- it let's me hold on to what sanity I have left...) I finally managed to get both IE and Fx to display the page nearly the same way:

Page: http://piyer.rockycrater.org/downloads/edit1.html
Firefox: http://piyer.rockycrater.org/downloads/image1.jpg
IE6: http://piyer.rockycrater.org/downloads/image2.jpg

I hope that is helpful to you.

You got it! Fabulous! Thanks!!

another work around is to use the minimum-height property for one section and it basically makes all three columns use the minimum-height and thus everything lines up smoothly...

Hey, good to see people making 21st century designs around here!

Not sure why that gap is there though... something you might want to try monkeying with is the CSS tables display model if all else fails. That's a little bit of funky territory, but sometimes it works as a last-ditch effort. Also, on my PC in IE6 the left div is only as big as the text -- the height rule isn't being applied.

Another possibility is using positioning instead of floats for the sidebars. Not sure if that will work either though.

  • 1