Home/ Questions/Q 6693103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:56:40+00:00

I get a weird problem with the div tags actually these div tags are

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0