Hi all, I would like to create a 3 column layout with the left menu, right menu & the content to have the same height always independently which is the longest like this example below. Also I have attached the HTML & CSS for your reference. How can I do this in CSS please? Thanks in advance ziffa27 Example: pixy.cz/blogg/clanky/css-3col-layout <!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>Untitled Document</title> <style type="text/css"> <!-- html, body { margin: 0; padding: 0; } body { background: silver; color: #000000; font-family: 'Arial, Helvetica, sans-serif'; font-size:11px; font-weight:normal; line-height:16px; text-align:left; } #container { background: yellow; margin: auto; padding: 0; width: 1000px; } #header { background: orange; margin: 0; padding: 0; height: 200px; } #left_menu { background: red; margin: 0; padding: 0; width: 200px; float: left; } #right_menu { background: blue; margin: 0; padding: 0; width: 300px; float: right; } #content { background: green; margin: 0; padding: 0; margin-left: 200px; width: 500px; } #footer { background: aqua; margin: 0; padding: 0; clear: both; height: 30px; } --> </style> </head> </head> <body> <div id="container"> <div id="header">Header</div> <div id="left_menu">Left menu</div> <div id="right_menu">Right menu</div> <div id="content">Content<br />Lorem ipsum dolor sit amet, est vitae ut. Risus amet illo mollitia magna erat voluptatem, adipiscing arcu eget cras eu nulla, quam eu nec orci, magna quisque nullam adipiscing integer suspendisse, vulputate hac id vivamus at sed mi. Pede magnis fringilla etiam, tempus vel vitae elementum sed nunc omnis. Praesent condimentum aliquam in eros et, pharetra nam imperdiet corrupti posuere, per suspendisse diam turpis parturient turpis, suscipit semper augue nulla, curabitur ac nisl. Iaculis tempor quam id morbi, sodales nullam nulla, ullamcorper tortor illum hendrerit, wisi fringilla ornare fames in, at ornare luctus eu officia platea.</div> <div id="footer">Footer</div> </div> </body> </html> Code (markup):
Here is a simple example of a 2 column page that does what you want. To turn that into a 3 col just change one lines in the CSS and add one line as shown below. Then add the bells and whistles that you want. You may copy any or all of those pages and use them.
This is a cross-post along with three other forums. Two of those forums have already gotten responses. cheers, gary
Hi Colbyt i try to use your css, just one thing but i cannot make the Left Nav bigger than the Main Content and i would like to have them all
The container width determines the overall width. The 3 columns can not exceed the container width. In the example container=790 so the 3 columns can not add up to more than that. You can make them any size you want as long as you follow that rule. This was just a quick demo that you can build on from there.