CODEWITHSUNDEEP
htmlcsscss-tables
Keshav Nair
Keshav Nair

Reputation: 423

div tags not aligned properly

I get a weird problem with the div tags actually these div tags are aligned and grouped in a single container but the problem something really stupid here is my code

<html>
<head>
<style>
    body {
        padding: 0 2%;
    }
    #footer {
     width: 100 %;
        clear: both;
        border: 1px solid #CCC;
    }
    #footer .col_one {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
    #footer .col_two {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
    #footer .col_three {
        float: left;
        width: 24%;
        border: 1px solid #CCC;
    }
    #footer .col_four {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
</style>
</head>
<body>
    <div id="footer">
        <div class="col_one">
            &nbsp; something here
        </div>
        <div class="col_two">
            &nbsp; something here
        </div>
        <div class="col_three">
            &nbsp; something here
        </div>
        <div class="col_four">
            &nbsp; something here
        </div>
        <div style="clear: both">
        </div>
    </div>
</body>
</html>

Now in the #footer .col_three when I make the width to 24% they display all the boxes in right order but then I make it 25% the last one goes just below the first box why is that so? The total footer container is 100% and there are four div boxes made 25% each in width where am I wrong hope you understand and sorry for bad english.

Upvotes: 0

Views: 223

Answers (2)

GolezTrol
GolezTrol

Reputation: 116100

That's because the width you set, is the width of the content, excluding padding, margin and borders. So the total width is 100% + 8px (for 1px borders on each side of 4 divs). Therefor it won't fit.

You can solve this by putting extra divs in the div. The outer div you make 25% wide without borders. The inner div, you can give a border, but no explicit width, so it will fill its parent:

http://jsfiddle.net/GolezTrol/fm7LV/1/

I took the liberty of modifying the selectors a little by putting separate classes on those divs: col one instead of col_one. That way, you can use the .col selector for all columns and the .col.one selector in case you need to style a specific column. :)

Upvotes: 3

Timmy O&#39;Mahony
Timmy O&#39;Mahony

Reputation: 53971

Take out the border and they should work.The browser calculates the amount of pixels each div should be in width from the percentages. When you add extra pixels (with a border) the total width of the divs is then more then the window width and they need to shift down

#footer{
    width: 100 %;
    clear: both;
}
#footer .col_one,.col_two,.col_three,.col_four{
    width:25%;
    float:left;
}

Upvotes: 0

Related Questions