CODEWITHSUNDEEP
csscss-floatmargin
Orel Bitton.
Orel Bitton.

Reputation: 65

Elements get inside each other

I'm developing a simple css theme and i'm using left-center-right layout, I am using float for positioning the right and left elements, and margin for the center. But if I take a look at the website, all the website parts are getting inside each other.

Here is what I've got right now:

HTML

<div class="container">
    <div class="right">
        <div class="block">
            <div class="title">My Block Of Data Here Is Title</div>
            This is my block of data! Here i can show website stats and announcements.
        </div>
    </div>
    <div class="left">
        <div class="block">
            <div class="title">My Block Of Data Here Is Title</div>
            This is my block of data! Here i can show website stats and announcements.
        </div>
    </div>
    <div class="center">                
        <div class="block">
            <div class="title">Welcome to SITE_TITLE_HERE!</div>
            This is where we post so many stuff!<br><br><br><br><br><br><br><br><br><br>Thanks, SITE_TITLE_HERE stuff.
        </div>
    </div>
</div>

CSS

body{
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 18px;
}

.container{
    margin: 0 auto;
    width: 65%;
}   

.left{
    float: left;
    width: 20%;
}   

.right{
    float: right;
    width: 20%;
}

.center{
    margin: 0 auto;
    width: 60%;
}

.block{
    width: 100%;
    padding: 3px;
    background: #fafafa;
    outline: 1px solid #f2f2f2;
    outline-offset: 2px;
    text-align: center;
}

.block .title{
    font-size: 24px;
    border-bottom: 1px solid #000;
    background: #76E0EE;
}

Fiddle: http://jsfiddle.net/XK6dN/2/

Update: I'm almost sure it's the outline of the block class, but even if it's that. how can I keep them from overriding each other ?

Upvotes: 4

Views: 89

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241238

It is simply because the widths of the elements don't add up.

The padding/borders are calculated in the width of the element, therefore:

20% + 20% + 60% + 6px (padding) + 2px (borders) != 100%.

You can change the box-model of an element to include the padding/border in its width calculation by using the property box-sizing.

jsFiddle example

.block{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

There is still a problem though, as each element has an outline of 1px on each side.

I suggest changing this to a border, thus solving the problem.

Alternatively, instead of using box-sizing, you could use calc() to subtract the padding/borders from the elements widths.

jsFiddle example

.left{
    float: left;
    width: calc(20% - 8px);
}   

.right{
    float: right;
    width: calc(20% - 8px);
}

.center{
    margin: 0 auto;
    width: calc(60% - 8px);
}

Upvotes: 3

Terry
Terry

Reputation: 66228

This is because for the child .block elements of each floated div as well as the centered one, you are declaring a 100% width (therefore inheriting parents' widths) and an additional 6px in width (3px left and right padding). This causes the content to overflow, as you are adding 6px on top of the 100% width.

To fix this, declare box-sizing: border-box on .block:

.block {
    box-sizing: border-box; /* Makes magic happen */
    width: 100%;
    padding: 3px;
    background: #fafafa;
    outline: 1px solid #f2f2f2;
    outline-offset: 2px;
    text-align: center;
}

It is not magic per se, but by using a border-box box model, you are forcing the 100% width to include all possible decorations, including the outline, border and paddings, to be accounted for when calculating the final width.

http://jsfiddle.net/XK6dN/3/

Upvotes: 1

Related Questions