...

View Full Version : reducing gap



sixrfan
12-25-2009, 09:19 PM
any idea why the big 3" gap appears between my thumb divs and the HR right above the affiliate divs section????

http://www.shirtsaboutnothing.com/new_index1.html

thanks!




<li>Holds up to four guitars </li>
</ul>
</div>

<p class="clrflt">&nbsp;</p>

<hr>
<div class="affiliate">
<img src="pics/cases_thumb.gif">


please advise. thanks!

tomws
12-25-2009, 09:56 PM
I don't see a gap that large, but the gap that's there is caused by the min-height on your .index_thumb ul css. Firebug (http://getfirebug.com/) makes these issues trivially easy to debug.

coothead
12-25-2009, 09:57 PM
Hi there sixrfan,

you could try changing this...


#content {
margin: 0 0 0 200px;
padding: 5px;
width: 680px;
min-height: 550px;
height: auto;
}

...to this...


#content {
float:left;
padding: 5px;
width: 680px;
min-height: 550px;
height: auto;
}

coothead

sixrfan
12-25-2009, 10:13 PM
thanks, that float: left worked!

coothead
12-25-2009, 10:22 PM
No problem, you're very welcome. ;)

Excavator
12-26-2009, 01:36 AM
Hello sixrfan,
Your use of margin instead of float on that content column is not a wrong approach, it's just done wrong in this case.
It should be more like this -

#content {
margin: 0 0 0 210px; /*because #leftnav is 210px wide*/
padding: 5px;
/*width: 680px; if you don't specify a width it will use all that's left to it, without float drop*/
min-height: 550px;
height: auto;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum