I am creating a website and have a need for a three columned layout. The middle column will be fixed, at around 750px, and the left and right columns will be fluid and should evenly take up the remainder of the web area. like so... --- Left Column % --- === Middle Column (750px) === --- Right Column % --- I am not quite sure how to do this, and after some preliminary testing have tried several things with no avail. I am in need of this type of layout because the left and right columns will act as borders, showing additional decorative elements to users with a screen resolution greater than 800x600. Any ideas as to how to do this?
Thanks, but after a quick overview of the layouts I don't see one that would suit my needs. I will keep looking it over, maybe I can combine a few used techniques to get my desired effect. Basically I want the middle column centered, with the left and right columns taking up the remainder of the space equally on either side.
Instead of using left and right column for decoration, you can just use a centered middle column and a decorative background that will only visible to users with a screen resolution greater than 800x600.
Won't work. The site has different borders on the left and right side. It was requested by the client that i'm working for... if I use a background image then the decorative elements won't align with the center column appropriately. I need to have the left column with one background image (which expands as the resolution gets bigger revealing), then the middle column, then the right column that expands as the resolution gets bigger. This way the decorative side elements align correctly with the middle column while showing only whats necessary on each screen resolution.
Well if you are designing the whole page in div so you have to define the float:left, width on the stylesheet for each section like left column, center column, right column !! The main container if you want to centerlized just put #container { margin: 0px auto; } so it makes the main container comes to center rest as I said !! Best Regards,
Then use an image with different left and right side, and repeat + center it: body{background:url(bg.png) top center repeat-y;}
I completely didn't think of aligning the background image center! That's PERFECT! and prevents me from having to mess with all the widths and what not. Let me give it a go, i'll let you all know how it works out! Thanks!
Found it! Below example is using colors therefore background-image tag needs to be used instead of background-color http://www.webdeveloper.com/forum/showthread.php?t=208828 <!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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { min-width: 1200px; margin:0; padding:0; background-position: top center; } #left-side-outer { width:50%; float:left; margin-right:-400px; height: 800px; } #left-side{ margin-right:400px; background-color: #FF9900; height: 800px; } #center-column { width:800px; float:left; color: #FFFFFF; background-color: #000000; position:relative; z-index:10; height: 800px; } #right-side-outer { width:50%; float:right; margin-left:-401px; height: 800px; } #right-side { margin-left:400px; height: 800px; background-color: #FF9900; } #header{ clear:both; height: 175px; text-align: center; background-color: #CC0000; } </style> </head> <body> <div id="header"></div> <div id="left-side-outer"> <div id="left-side"> </div> </div> <div id="center-column">Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : </div> <div id="right-side-outer"> <div id="right-side"> </div> </div> </body> </html> Code (markup):