BackgroundI've been searching for a while for a layout which has 960px width and two columns:
- Main content: aligned right, width of 550px, inset from right margin of container;
- Sidebar: aligned left, width of 250px, flush with container on top, left and bottom edges;
The bit which I have been struggling with is setting the backgrounds such that the sidebar background takes up 250px width, 100% height of parent and is flush with left edge of parent leaving the main content to take up the remaining width and 100% height of parent.I have looked at a few techniques, but they seemed to be relatively inflexible, e.g. though it is elegant, Faux Columns doesn't quite seem proper
http://www.alistapart.com/articles/fauxcolumns/.Thinking about it a bit, I decided to try splitting up the rendering of the content from the rendering of the backgrounds. Specifically, I have main content floated right and sidebar floated left, then a \[code\]clear:both\[/code\] so that the container will adjust to the larger of the two columns.Next, whilst still inside the container but after the \[code\]clear:both\[/code\], I have two empty divs which are absolutely positioned, heights of 100% and width of 250px for sidebar with \[code\]left:0\[/code\], then width of 100% for main content. I have also adjusted z-index so that sidebar is in front.There is other necessary CSS (e.g. the container wrapper must be relatively positioned) but please see that in the source below.QuestionThis works exactly as I had hoped on my Mac with Safari, with both backgrounds expanding according to the tallest column, and the markup in the source is valid. However, my two main concerns, are:[*]I'm not sure how this will render in other browsers, particularly IE[*]I have tried to design with SEO in mind but I'm no too clued up on SEO as I'm still learning, how SEO friendly is this?Other Sources
http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent(May have some others, sorry can't remember!)Source Code
Note I have used bright colours and adjusted divs to illustrate better what's going on.\[code\]<!DOCTYPE html><html lang="en-US" ><head><title>Test Page</title><meta charset="UTF-8"/><style>#main {}#main-outer-wrapper { width: 960px; margin: 0 auto;}#main-inner-wrapper { background: red; /* This is the fallback background colour */ position: relative; /* Must be relative for the background divs to have 100% height and to ensure z-index functions */ z-index: -20; /* Ensure fallback background is below all other divs */}#main-content { /* This is where all the actual content will be */ width: 550px; float: right; /* IMPORTANT float */ background: orange; /* Background would actually be transparent, here it is for illustration */ margin: 10px 80px 10px 10px; /* Keep content away from edges as part of design only*/}#left-primary-sidebar { /* This is for the actual sidebar content */ float: left; /* IMPORANT float */ background: green; /* Again, background colour is purely for illustration */ width: 230px; margin: 10px; /* I have adjusted the margin for illustration only, in situ width is 250px and margin is 0 */}#main-content-background { /* This div has no content */ background: blue; /* The intended right column background */ /* Position MUST be absolute so that the div can * have its height based on parent container, using * top and bottom. Width can be specific but I have * set it to 100% for maintainability */ position: absolute; width: 100%; right: 0; top:0; bottom: 0; z-index:-10; /* As width is 100%, it is important that this is placed below the sidebar */}#left-primary-sidebar-background { /* As above regarding position */ background: purple; position: absolute; width: 250px; left: 0; top:0; bottom: 0; z-index:-9; /* Div must be above right column */}.clear { clear: both;}</style></head><body> <section id="main"> <div id="main-outer-wrapper" class="wrapper outer-wrapper"> <div id="main-inner-wrapper" class="wrapper inner-wrapper"> <section id="main-content"> <div id="main-content-wrapper" class="wrapper"> Content </div><!-- #main-content-wrapper --> </section><!-- #main-content --> <section id="left-primary-sidebar"> <div id="left-primary-sidebar-wrapper" class="sidebar"> Sidebar </div><!-- #left-primary-sidebar-wrapper --> </section><!-- #left-primary-sidebar --> <div id="main-content-background"></div> <div id="left-primary-sidebar-background"></div> <div class="clear"></div> </div><!-- #main-inner-wrapper --> </div><!-- #main-outer-wrapper --> </section><!-- #main --></body></html>\[/code\]Thanks for reading, looking forward to comments!
