...

View Full Version : position issue with images inside div tags



apm
06-04-2010, 02:14 AM
Hi all. I got some floating issues here were the images im trying to line up doesnt behave the way i want them to. They are supposed to float with the 6 boxes to the left and the big box to the right. but something is wrong and im kind of having a hard time to figure out why. I tried to reorder the divs but nothing seems to help.

I hope one of you gentlemen would be so kind to help me out.

http://apm-design.dk/info.html

Excavator
06-04-2010, 02:46 AM
Hello apm,
Floats always work better when you give them a width.

First, I gave your floats a class so they could all be styled with one entry in the CSS..
Like this -

<div id="infoContent">
<div id="quickinfo">
<a href="quickinfo.html"><img src="images/info/quickinfo.png" alt="billeder" style="border-style: none;"></a>
</div>
<div id="history" class="small-box">
<a href="history.html"><img src="images/info/history.png" alt="history" style="border-style: none;"></a>
</div>
<div id="pic" class="small-box">
<a href="pictures.html"><img src="images/info/pic.png" alt="billeder" style="border-style: none;"></a>

</div>
<div id="foredrag" class="small-box">
<a href="foredrag.html"><img src="images/info/foredrag.png" alt="billeder" style="border-style: none;"></a>
</div>
<div id="ans" class="small-box">
<a href="ans.html"><img src="images/info/ans.png" alt="billeder" style="border-style: none;"></a>

</div>
<div id="omvis" class="small-box">
<a href="omvisning.html"><img src="images/info/omvis.png" alt="billeder" style="border-style: none;"></a>
</div>
<div id="medlem" class="small-box">
<a href="medlem.html"><img src="images/info/medlem.png" alt="billeder" style="border-style: none;"></a>
</div>


</div>
Then I gave them all a width.
Your float drop is caused by the difference in heights. #history is 184px high, then #pic is 183px high. The next float, #foredrag, moves up that 1px and rests against #history.
To fix that, I gave them all the same height.

Like this -
/*_____________________________________info________________________________________*/
#infoContent{
/*float: left; no need to float full width element*/
width:950px;
padding-left:25px;
padding-top:15px;
overflow: auto; /*to clear floats*/
}

#quickinfo{
float:right;
}

.small-box {
height: 184px;
width: 258px;
float: left;
}

/* #history{
float:left;
}
#pic{
float:left;
}
#foredrag{
float:left;

}
#ans{
float:left;
}
#omvis{
float:left;
}
#medlem{
float:left;
}
*/



/*_______________________________Galleri______________________________________________*/


See a page about clearing floats with overflow (http://www.quirksmode.org/css/clearing.html).

apm
06-04-2010, 02:56 PM
Wow big thanks man!. That wasnt only a fix it was insightful. I greatly appreaciate it. Well explained! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum