shazman Posted December 7, 2010 Share Posted December 7, 2010 I'm having some problems with my CSS layout. I've attached an image to describe what I'm trying to get. My problem is that I can't get #container to stretch to the footer. This is what my code looks like: #header { margin-left:auto; margin-right:auto; padding:24px; clear:both; display:block; width:813px; height:133px; background-image:url(../images/yHeader.png); background-repeat:no-repeat; } #container { margin-left:auto; margin-right:auto; padding:0px 24px; display:block; width:813px; height:auto; background-image:url(../images/yMiddle.png); background-repeat:repeat-y; } .contentText { /* column1 */ color:#000; width:548px; float:left; padding-left:8px; padding-right:8px; } .sidebar { /* column2 */ color:#000; width:229px; border-left:#CCC solid 1px; padding-left:8px; padding-right:8px; float:right; } #footer { margin-left:auto; margin-right:auto; clear:both; display:block; width:861px; height:24px; background-image:url(../images/yBottom.png); background-repeat:no-repeat; } You can view the actual site if it helps. Quote Link to comment https://forums.phpfreaks.com/topic/220888-css-columns/ Share on other sites More sharing options...
haku Posted December 7, 2010 Share Posted December 7, 2010 http://www.cssstickyfooter.com/ Quote Link to comment https://forums.phpfreaks.com/topic/220888-css-columns/#findComment-1143858 Share on other sites More sharing options...
fortnox007 Posted December 7, 2010 Share Posted December 7, 2010 I had some spare time and since i like doing it here is something to get the idea, with extra (hopefully usefull) comments in the css. Note though... the borders and colors are just for making contrast The HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>css</title> <link type="text/css" rel="stylesheet" href="css/style3.css" /> </head> <body> <div id="wrapper" class="center"> <div id="header" class="center clear"><p>HEADER</p></div> <div id="container" class="center"> <div id="leftcolumn" class="float-left"><p>LEFT COLUMN</p></div> <div id="rightcolumn" class="float-left"><p>RIGHT COLUMN</p></div> </div> <div id="footer"><p>FOOTER</p></div> </div> </body> </html> The CSS /* ------------------ positions: ------------------- #wrapper <------ this one is added #header #container #leftcolumn #rightcolumn #footer */ body{ padding:0; margin:0; background: white; } p{ text-align: center; font-weight: bold; } /* ------------------- general stuff: --------------------- */ .center{ margin: 0 auto; } .float-left{ /* float can't be centered so work with margin's'*/ float:left; } .float-right{ float:right; } .clear{ clear:both; } /*-------------------- layout: ---------------*/ #wrapper{ /*this wraps around all divs */ width: 960px; /*nice screenwidth */ height:100%; border: 1px solid black; background:orange; /* purple like */ } #header{ width: 940px; height: 80px; /*if you increase this the height of #wrapper will wrap and match the end */ background:#57b4ff; /*light blue */ border: 1px solid red; margin-top: 3px; /*just some extra margin to make it more clear */ } #container{/*you might consider removing this */ width:940px; min-height:80px;/* percentage is nice when it contains elements with heightso i stretches till the height of the inner element */ height: 100%; background:#5F6565; /*brownish crap*/ border:1px solid blue; overflow:hidden; /* !!!!-> to wrap around the floated elements left&rightcolumn because they float <-!!!!*/ padding: 3px 0; /*just some padding top and bottom so divs are more clear */ } #leftcolumn{ width:700px; min-height:100px; background: white; border:1px solid red; margin-left: 8px; /* get some margin from left since it is floated left!! this is probbaly not the right amount of pix */ } #rightcolumn{ width:220px; min-height:100px; background: #cccccc; /*grey*/ border:1px solid white; } Love to hear if this was useful cheers! Johanna P.s. nice designs on your site, what program you use for such 3d stuff? Quote Link to comment https://forums.phpfreaks.com/topic/220888-css-columns/#findComment-1143977 Share on other sites More sharing options...
haku Posted December 7, 2010 Share Posted December 7, 2010 I probably should have actually looked at the site before posting my last post. You can fix the problem by adding: overflow: auto; To #container. Quote Link to comment https://forums.phpfreaks.com/topic/220888-css-columns/#findComment-1143985 Share on other sites More sharing options...
shazman Posted December 7, 2010 Author Share Posted December 7, 2010 Thanks. Overflow worked perfectly. Quote Link to comment https://forums.phpfreaks.com/topic/220888-css-columns/#findComment-1144140 Share on other sites More sharing options...
fortnox007 Posted December 7, 2010 Share Posted December 7, 2010 Thanks. Overflow worked perfectly. i hope you took the time to read the post above that too took quite some time to custom make that. Quote Link to comment https://forums.phpfreaks.com/topic/220888-css-columns/#findComment-1144178 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.