First time visitor? The tutorials start here.

Is Your Layout Not Working Out Right?

Does your sidebar keep dropping below your content instead of sitting beside it? Is there a huge gap between the two? Where is all that extra space coming from below the header? Why are the sidebar and content overlapping?

Sometimes these problems arise from a missing or extra </div> in your xHTML. Other times, it is something in your CSS that’s causing it. Here, I’ll address the different causes, how to find and fix them, and offer other tricks to help you figure out what, exactly, is going on with your layout.

Validate your xHTML

The quickest and easiest way to see if there is an error in your xHTML is to run it through the w3c Markup Validator. This will tell you if something is improperly nested or if you have an extra or missing </div>. For details on how to use the markup validator, see Easily Find and Correct Errors in Your xHTML.

On a side note, it is always a good idea to validate your xHTML every time you make changes to it or add a new page, because this will help ensure that your pages are always standards-compliant.

Validate your CSS

Once you know your xHTML is in order, run your CSS through the w3c CSS Validator. For details on how to use this, see Easily Find and Correct Errors in Your CSS.

As with your xHTML, it’s always a good idea to run your CSS through the CSS validator every time you make a change to it, to make sure it’s error-free.

Once everything validates…

If all your code validates and you’re still having trouble a good trick for finding out what’s wrong is to give every section its own background color. Let’s say you have floated your content to one side and the sidebar to the other, and page looks like this:

Page Heading

Content, content, and more content.
Sidebar

The sidebar and content look like they should fit side by side, so why don’t they? Add a different background color to each of those two divs and see. Let’s say the content’s id is “content” and the sidebar’s id is “sidebar”. Add something like this to your CSS:

#content { background: #f66; }
#sidebar { background: #66f; }

And the result is…

Page Heading

Content, content, and more content.
Sidebar

Ah, there we go. Either there is too much width defined on those divs, or too much horizontal padding which makes them too wide.

What if the result is this?

Page Heading

Content, content, and more content.
Sidebar

In this case, a margin is a likely culprit. Here, I added a right margin to the sidebar that doesn’t need to be there.

In either case, you need to do the math…

   width of sidebar
+ width of content
+ horizontal padding for both
+ left and right margins for both
+ left and right borders for both

Add all of those up, and they need to be the same width or narrower than the element they reside in.

Once you get your layout worked out…

Page Heading

Content, content, and more content.
Sidebar

…then you can remove the temporary background colors and enjoy your layout. 🙂

Page Heading

Content, content, and more content.
Sidebar

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.