CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 1629

Padding in floated elements

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:

enter image description here

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

Upvotes: 0

Views: 144

Answers (2)

user1399844
user1399844

Reputation: 

width:100% = width of the floated elements + padding

So you need to set width for the floated elements lower than 100% to let some space for the padding.

Upvotes: 1

Taha Paksu
Taha Paksu

Reputation: 15616

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

Upvotes: 2

Related Questions