Geek Answers Handbook

Div has an inexplicably huge right edge?

I have a sidebar div, which for some reason has an absolutely massive right edge, and I cannot understand why this is happening. This spins the floats for the rest of the material on my page and you need your help to understand why this is happening.

I checked the rest of my CSS for any conflicting CSS that could assign a huge margin but can't find anything.

I understand that some of them are out of context, but just carry with me.

div

<div id="leftsidebar"> <h2> Yesterday Games </h2> <img src="images/dividerSmall.gif" /> <div class="gamelist"> **gamelist is populated by MySQL database** </div> </div>

CSS for any related divs

 #leftsidebar { position: relative; padding-left: 10px; width: 225px; margin-right: 0px; } .gamelist { height: auto; width: 225px; padding-left: 20px; margin-top: -27px; }
+4
source share
2 answers

You have not used float in your css. Try using this, i.e. float:left ; in #leftsidebar and .gamelist . May I help:)

+6
source

Having a good look at your CSS, #leftsidebar has an actual width of 235px (225 width + 10 indentation), and .gamelist has an actual width of 245px (225 width + 20 indentation). This is because padding is always taken into account in the total width of the element.

So, if you take these two numbers and offset them, you will get a 20px .gamelist . What for? Since .gamelist positioned 10 pixels to the right due to filling on #leftsidebar . Thus, the correct width for .gamelist should be 205px (225 width - 20 additions).

See http://jsfiddle.net/e8N5N/3/ for an updated example.

+2
source

More articles:


All Articles