I'm relatively new to css layouts, but I'd like to create a 3-column layout that will expand or contract dynamically. I can create a 3-column layout that is resizable, but our site is dynamic, so sometimes there might not be anything in the left or right columns. (There is always content in the center.) I'd like the center column to expand out if there's nothing in the side columns. I can do this with tables by setting the center column to 100% width, and then the side columns both have content with a fixed with, so it pushes the center column in if there's content there. I'm not sure how to accomplish the same thing with css, though. Thanks,
What you want to do isn't that hard and will just require a class to be added. Will these pages be generated dynamically on the server or are these all flat files?
They're static, but the pages are created with a content management system, so sometimes the user will have things in the left & right columns & sometimes they won't. I'd like to have one layout that can accomodate both situations so the user can just leave a column blank & the center column will stretch to fill it. I don't want them to have to choose whether they want a 1,2, or 3-column layout. I'd like it to be automatic depending on what they enter.
Ok. I'll be gone most of the day today (shopping and checking on my elderly mother) but when I get back I'll whip something up for you. (In fact, I think I have most of the code ready to go as it is.) Is that ok with you? (All I'd like to know is where the site's menu will be ahead of time.)
For this you need to code, which manage column width.... Example algorithm: if RightColumnData is Nothing Then CenterColumnWidth=200 if RightColumnData and LeftColumnData is Nothing Then CenterColumnWidth=300 if RightColumnData and CenterColumnData and LeftColumnData have Data Then CenterColumnWidth=100 LeftColumnWidth=100 RightColumnWidth=100 If you are using Joomla, you may find lots of theme which manage column dynamic. Hope this will help you...
Thanks, Dan. That would be great. The page layout is something like the image below. Our header will always fill the page, but the content below is 90% so there is some margin around it. Also, if it matters.. the content in the left column would always be a box that's 165px wide. The right column would be boxes that are 250px wide.
Ok. What are the subnav tabs? Are they descendents of a specific top level menu item, like in a hybrid drop down menu? (such as this example for instance)?
Yes, they're actually a lot like the example. I have been able to get the header part working though, so if that doesn't affect the rest of the site, the only part I really need some help with is the 3 columns. Thanks again.
I've gotten a little closer. This seems to work in Firefox, but in Explorer it looks like this. I don't want the center column text to wrap below the other 2 columns. Here is the code I'm using: CSS: #container { width: 90%; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } #sidebarLeft { float: left; width: 165px; background: #EBEBEB; padding: 15px 0; } #sidebarRight { float: right; width:250px; background: #EBEBEB; padding: 15px 0; #sidebarLeft h3, #sidebarLeft p, #sidebarRight p, #sidebarRight h3 { margin-left: 10px; margin-right: 10px; } #mainContent { overflow:hidden; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } HTML: <body> <!-- MAIN CONTAINER --> <div id="container"> <div id="sidebarLeft"> left content goes here... <div> <div id="sidebarRight"> right content goes here... <div> <div id="mainContent"> main content goes here... </div> <br class="clearfloat" /> </div> </body>
Ok, here's a dirty example (by dirty I mean I used garish pastels instead of actual coordinated colors) that should give you a few ideas... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="imagetoolbar" content="no"> <meta name="description" content="A brief description of the current page goes here."> <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished"> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } body { background: #EEE; color: #000; font: normal 85%/150% tahoma, verdana, arial, helvetica, sans-serif; letter-spacing: 1px; } h1, h2, h3, h4, h5, h6 { background: transparent; color: #DC143C; font: bold small-caps 1em/1.5 georgia, garamond, "times new roman", times, serif; } h1 { font-size: 1.5em; line-height: 1.8; } img { border: 0; vertical-align: bottom; } #container { background: #000; color: #FFF; } #header { background: #6F3C9F; color: inherit; height: 80px; /* Firefox needs this, otherwise it'll collapse the header if the image doesn't render */ } #menu { background: #CCF; color: inherit; height: 3em; line-height: 3em; position: relative; } #menu li { background: #CFA; float: left; line-height: 1.5em; list-style: none; margin: 0 2px 0 0; padding: 0 0.5em; } #menu li:hover { background: #FCC; } #menu li a { background: transparent; color: #000; display: block; text-decoration: none; } #menu li ul { position: absolute; left: -999em; } #menu li.current ul { left: 0; } #menu li:hover ul { top: 1.5em; left: 0; } #contentwrapper { background: #CCC; clear: left; color: inherit; margin: 0 auto; overflow: hidden; width: 90%; } #content { float: left; width: 100%; } #content .wrapper { background: #FFF; color: #000; height: 1%; margin: 0 200px 0 165px; overflow: hidden; padding: 0 1em; } #content .wrapper p { margin: 0.5em 0; } #sidebar1 { background: #FFC; color: #000; float: left; margin: 0 0 0 -100%; width: 165px; } * html #sidebar1 { margin-left: -90%; } #sidebar2 { background: #FAC; color: #000; float: left; margin: 0 0 0 -200px; width: 200px; } #footer { background: #F9C; clear: left; color: inherit; height: 1%; margin: 0 auto; width: 90%; } #footer em { display: block; font-style: normal; padding: 0.25em 0 0.25em 1em; } </style> </head> <body> <div id="container"> <div id="header"> <img src="#" width="200" height="80" alt="(Web Site Title)" title=""> </div> <ul id="menu"> <li class="current"> <a href="#">Menu Link</a> <ul> <li><a href="#">Submenu Link 1</a></li> <li><a href="#">Submenu Link 1</a></li> <li><a href="#">Submenu Link 1</a></li> <li><a href="#">Submenu Link 1</a></li> <li><a href="#">Submenu Link 1</a></li> <li><a href="#">Submenu Link 1</a></li> </ul> </li> <li> <a href="#">Menu Link</a> <ul> <li><a href="#">Submenu Link 2</a></li> <li><a href="#">Submenu Link 2</a></li> <li><a href="#">Submenu Link 2</a></li> <li><a href="#">Submenu Link 2</a></li> <li><a href="#">Submenu Link 2</a></li> <li><a href="#">Submenu Link 2</a></li> </ul> </li> <li> <a href="#">Menu Link</a> <ul> <li><a href="#">Submenu Link 3</a></li> <li><a href="#">Submenu Link 3</a></li> <li><a href="#">Submenu Link 3</a></li> <li><a href="#">Submenu Link 3</a></li> <li><a href="#">Submenu Link 3</a></li> <li><a href="#">Submenu Link 3</a></li> </ul> </li> <li> <a href="#">Menu Link</a> <ul> <li><a href="#">Submenu Link 4</a></li> <li><a href="#">Submenu Link 4</a></li> <li><a href="#">Submenu Link 4</a></li> <li><a href="#">Submenu Link 4</a></li> <li><a href="#">Submenu Link 4</a></li> <li><a href="#">Submenu Link 4</a></li> </ul> </li> <li> <a href="#">Menu Link</a> <ul> <li><a href="#">Submenu Link 5</a></li> <li><a href="#">Submenu Link 5</a></li> <li><a href="#">Submenu Link 5</a></li> <li><a href="#">Submenu Link 5</a></li> <li><a href="#">Submenu Link 5</a></li> <li><a href="#">Submenu Link 5</a></li> </ul> </li> <li> <a href="#">Menu Link</a> <ul> <li><a href="#">Submenu Link 6</a></li> <li><a href="#">Submenu Link 6</a></li> <li><a href="#">Submenu Link 6</a></li> <li><a href="#">Submenu Link 6</a></li> <li><a href="#">Submenu Link 6</a></li> <li><a href="#">Submenu Link 6</a></li> </ul> </li> </ul> <div id="contentwrapper"> <div id="content"> <div class="wrapper"> <h1>Web Page Title</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> </div> <div id="sidebar1"> <div>Sidebar 1 Content</div> </div> <div id="sidebar2"> <div>Sidebar 2 Content</div> </div> </div> <div id="footer"> <em>Copyright &#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em> </div> </div> </body> </html> Code (markup):