Home/ Questions/Q 9182909
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T18:40:33+00:00

Background I’ve been searching for a while for a layout which has 960px width

  • 0

Background

I’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 clear:both so that the container will adjust to the larger of the two columns.

Next, whilst still inside the container but after the clear:both, I have two empty divs which are absolutely positioned, heights of 100% and width of 250px for sidebar with left:0, 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.

Question

This 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:

  1. I’m not sure how this will render in other browsers, particularly IE
  2. 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

How to make a floated div 100% height of its parent?

http://brentgrossman.com/348/not-so-fuax-columns/

(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.

<!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>

Thanks for reading, looking forward to comments!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As for how it looks in IE, you could use a tool like Abobe’s BrowserLab to test that.

    As for the SEO: Design has very little impact on SEO, except if your design causes your page to load slowly, as page loading speed does have an impact. The days when sophisticated search engines like Google used a text’s placement in the source code to indicate importance are far gone. Search engines these days analyse the actual textual content of your page and compare that to the textual contents of other pages. Placing something in a h1 tag does indicate to the search engine that that text is a title, and thus slightly more important than other text on the page, but if that text actually doesn’t seem to correlate the analysis of the rest of the text I think they catch that and discard the h1 text.

    If your site has almost no competition, then what you do on your pages have a huge impact on your ranking – but if there’s even a medium amount of competition, then the contents of the pages that link to yours (and the amount of pages linking to yours) make up such a large portion of your page’s ranking score that your page’s structure have absolutely no measurable effect. Your page’s ranking will be determined by its contents’ relevancy to the search term and weighted against the relative relevancy of the contents of other pages that match. It’s purely about content and authority.

    So I wouldn’t really worry too much about how your page structure will affect search engine rankings. Just make sure the page loads quickly and that the content is as relevant as possible to the search terms you want to rank for.

    • 0