?

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
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