white space issue on right hand side can't get rid of it.

ditchweed · 11-07-2012, 04:20 PM

hi guys
having a very frustrating problem currently building a new front page for an existing website, and having a strange problem there seems to be an extr bit of white space appearing on the right hand side inside my divs. have attached a picture of what it looks like in dreamweaver and the code is below.
any help appreciated.
thanks

Click image for larger version

Name: Screen Shot 2012-11-07 at 15.09.06.jpg
Views: 87
Size: 54.5 KB
ID: 11690

Code:

<body>
<div style="width:100%; margin:auto auto;">
	<div style=" display:block; overflow-x:hidden;">
	<img src="images/chillis.jpg" width="23%" style="padding:5px 5px; display: inline; margin-left:auto;border:0;" />
	<img src="images/eggs.jpg" width="23%" style="padding:5px 5px;display: inline;border:0;" />
	<img src="images/grapes.jpg" width="23%" style="padding:5px 5px;display: inline;border:0;" />
	<img src="images/ham.jpg" width="23%" style="padding:5px 5px;display: inline;border:0;" />
	</div>
	<div style=" display:block; overflow-x:hidden; ">
	<img src="images/rasp.jpg" width="23%" style="padding:5px 5px;display: inline; margin-left:auto; border:0;" />
	<img src="images/logo2.jpg" width="46%" style="padding: 5px 10px;display: inline; border:0; " />
	<img src="images/IMG_2740.jpg" width="23%" style="padding: 5px 5px; align:right; margin:0 0 0 3px; display: inline;border:0;" />
	</div>
	<div style="display:block; overflow-x:hidden;">
	<img src="images/chillis.jpg" width="23%" style="padding:5px 5px; display: inline; margin-left:auto;border:0;" />
	<img src="images/eggs.jpg" width="23%" style="padding:5px 5px;display: inline;border:0;" />
	<img src="images/grapes.jpg" width="23%" style="padding:5px 5px;display: inline;border:0;" />
	<img src="images/ham.jpg" width="23%" style="padding:5px 5px;display: inline; border:0;" />
	</div>
</div>

Excavator · 11-07-2012, 05:35 PM

Hello ditchweed,
Mixing % widths with px padding is never going to work very well.
As an example, your first div has 4 images in it each 23% wide with 5px of padding around it...that adds up to 92% PLUS 40px in padding.

92% plus 40px = ???

jimmybuss · 11-08-2012, 06:50 AM

We have the same problem actually, I'm really having a hard time figuring out!