Geek Answers Handbook

Elements penetrate each other

I am developing a simple css theme and I use left-right-right layout, I use floatto position the right and left elements and marginto center. But if I look at the website, all parts of the website fall into each other.

Here is what I 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;
}

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

Update: I am pretty sure that this is a outlineclass of blocks, but even if it is. How can I keep them from overriding each other?

+4
source share
2 answers

This is simply because the width of the elements does not add up.

/ , :

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

- , / , box-sizing.

jsFiddle

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

- , outline of 1px .

border, .

box-sizing calc(), / .

jsFiddle

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

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

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

, .block div, , 100% ( ) 6px width (3px ). , 6px 100% - .

, box-sizing: border-box .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;
}

, - 100% , , , .

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

+1

More articles:


All Articles