CODEWITHSUNDEEP
csshtmlmarginpadding
Liam J
Liam J

Reputation: 163

Wierd padding or margin on right floating element

I've just basically started making my website responsive, but for some reason the Language div (#lang) set to float right, is floating right, but with a small margin to the right of it. There is no padding set it the parent div #container though, which I'm failing to understand.

The website is http://www.cuonic.com and the CSS file is http://www.cuonic.com/css/style.css

I'm also using a reset.css from Meyerweb. Any help is appreciated :)

Upvotes: 0

Views: 131

Answers (2)

methodofaction
methodofaction

Reputation: 72385

You just need to remove width: 100% from #content. Your padding plus width: 100%; is causing the div to expand beyond the container.

Upvotes: 1

Lucas Green
Lucas Green

Reputation: 3959

This is actually happening because of the padding and width on #content.

The width is 100% and the padding is 20px.

Percentage widths are calculated relative to the parent, so saying 100% means take the whole enchilada.

Padding is additive with width when laying out the document (I know, confusing), the result is that the layed-out width is 100% + 40px (padding on both sides).

There are a few ways you can fix this:

Use a percentage width (say 90%) on #content, with a percentage padding (5%), and it will go away.

Or you can change the box-sizing property on #content to be border-box

Upvotes: 0

Related Questions