SmokingMan Posted October 29, 2006 Share Posted October 29, 2006 In my layout I can't seem to get all of the columns to be equal in height. I must be missing something simple here, but it seems to be eluding me. Any suggestions?Here's the page code: <body><div class= "wrapper"> <div class="banner"> <img alt="Hot Dog Hut Logo" src="images/hdh-logo.jpg" height="138" width="758" /> </div> <div class= "tspacer"> </div> <div class="lcontainer"> <div class= "lcnb1"> <p>This column will contain links for specials, events, ordering, and whatever else you can think of.</p> <p>The column will adjust in height according to what it's filled with.</p> </div> </div> <div class= "ccontainer"> <div class="ccnb1"> <p>The menu could go here. List all of the items and their prices. The column height will adjust according to what is put in here.</p> </div> </div> <div class="rcontainer"> <div class="rcnb1"> <p>We could do more links, advertising, and other stuff in this column. It will expand vertically to accomodate whatever you put here.</p> </div> </div> <div class="bspacer"> </div></div><div class="footer"> <div class="fnb1"> <p>Maybe ads or other things. I'll leave it up to you. The column will adjust in height according to what it's filled with. And none of these elements have to have a background color or outlines. I put in the colors just to highlight them.</p> </div></div></body> Here's the CSS for the layout: /* Main block element styles */body { background: transparent; background-color: #ffffff; }.wrapper { width: 790px; height: auto; margin: auto; background: transparent; background-color: #ffffff; border: none; } .banner { width: 100%; height: auto; position: relative; border: none; text-align: center; background: transparent; background-color: #ffffff; } .lcontainer { float: left; width: 20%; height: 100%; position: relative; text-align: justify; background: transparent; background-color: #99ffcc; }.ccontainer { float: left; margin-left: .5%; width: 59%; height: 100%; position: relative; text-align: justify; background: transparent; background-color: #cc99cc; }.rcontainer { float: left; margin-left: .5%; width: 20%; height: 100%; position: relative; text-align: justify; background: transparent; background-color: #99ffcc; } .footer { width: 790px; margin: auto; height: auto; background: transparent; background-color: #99ffff; }.tspacer { width: 790px; height: 3px; background: transparent; background-color: #ffffff; }.bspacer { width: 790px; height: 3px; clear: both; background: transparent; background-color: #ffffff; }/* These are the block elements that nest inside the main elements */.lcnb1 { width: 90%; margin: auto; height: auto; text-align: left; background: transparent; background-color: #99ffcc; }.ccnb1 { width: 90%; margin: auto; height: auto; text-align: left; background: transparent; background-color: #cc99cc; }.rcnb1 { width: 90%; margin: auto; height: auto; text-align: left; background: transparent; background-color: #99ffcc; }.fnb1 { width: 95%; margin: auto; height: auto; padding: 5px; text-align: left; background: transparent; background-color: #99ffff; } Link to comment Share on other sites More sharing options...
BiteMe Posted October 30, 2006 Share Posted October 30, 2006 http://www.pmob.co.uk/temp/3colfixedtest_4.htmwill try and have a lookie l8r Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now