Question

I have a top bar, separated to three sections. Left section, center section and right section.
Every section is floated, so their position is in line.

What i would like to do is to set a padding to the left and right element.

10 left padding to left element.

10 right padding to right element.

But whenever i apply some padding for example the div element #tbl {padding-left:10px;} whole structure breaks.

What i want to achieve:

Code:

HTML:

<div id="topbar">
<div id="tbl">abc</div>
<div id="tbc">abcd</div>
<div id="tbr">abc</div>
</div>

CSS:

#topbar {

    width:100%;
    height:36px;
    padding-top:12px;
    background-color:#e7e6e6;
    border-top:1px solid #d0cdcd;
    border-bottom:1px solid #d0cdcd;


}

#tbl {float:left; width: 35%; text-align:left;}
#tbc {display:inline-block; width: 30%; text-align:center;}
#tbr {float:right; width: 35%; text-align:right;}

JSFIDDLE: http://jsfiddle.net/bkwdX/

Thanks

Answer 1

try decreasing the width of them because the padding’s add up to outer width, not inner width. you define an elements width as 300px and add 10px right padding to it, the width will take 310px vertical space (in some browsers).