Search code examples
javascriptcsshtmlxhtml-1.0-strict

Template conversion from XHTML 1 to HTML5 , CSS Error

This is a simple 3-column template, with Side-bars on Left and on Right sides and content in the middle. I'm not able to understand the spacing between the columns, there's too much of space between the content(post) column and right side-bar.

[side-bar] [content/ post / matter]_____space/gap___[side-bar]

I'm not able to reduce/remove the '_space/gap ' to make the template look like

[side-bar] [content/ post / matter] [side-bar]

Before posting this here, I've tried chrome-developer tool to know and refactor it, I've not been able to understand it.

JSFiddle Example

Solution

  • Change this section of your code:

    #right {
float: right;
width: 180px;
padding: 10px 30px 10px 0;
}

    to this:

    #right {
float: left;
width: 180px;
margin-left: 10px;
padding: 10px 30px 10px 0;
}

    Floating right will hold that container to the rightmost position it can attain within its own container.