Simple CSS help needed

cashcow · Dec 23, 2009

<DIV class=postwrapper style="clear:both;border-style:solid;">
<div class=post-title>

<div style="font-weight:bold; font-size:17px;"><a href="http://">Chocolate Basket</a></div>
</div>

<DIV class=post-content><div><img style='float:left;' src="bas08.jpg" border="0"/>This premium chocolate assortment is meant for true connoisseurs. The confections in this basket were crafted by the world-famous Ghirardelli, San Francisco's first chocolatier.</div></DIV>
</DIV>

How come the border box is shorter than the image? What do I have to do to make the border box cover the image? (btw, I cannot change anything in class "post-content")
Can anyone help please?

blatt · Dec 23, 2009

Check your PM, let me know if that works.

cguru:

cashcow · Dec 23, 2009

Thanks Blatt, but unfortunately, it didn't work...

rubberband · Dec 23, 2009

Because that's probably the height #post-content tells it to be. Why wouldn't you be able to change those properties?

MuonTrail · Dec 23, 2009

Try adding a div with style="clear:both" like below. That should do it.

Code:

<DIV class=post-content><div>

<img style='float:left;' src="bas08.jpg" border="0"/>This premium chocolate assortment is meant for true connoisseurs. The confections in this basket were crafted by the world-famous Ghirardelli, San Francisco's first chocolatier.

[B]<div style="clear: both;"></div>[/B]

</div></DIV>

kanshu · Dec 23, 2009

MuonTrail said:

Try adding a div with style="clear:both" like below. That should do it.

Code:

<DIV class=post-content><div>

<img style='float:left;' src="bas08.jpg" border="0"/>This premium chocolate assortment is meant for true connoisseurs. The confections in this basket were crafted by the world-famous Ghirardelli, San Francisco's first chocolatier.

[B]<div style="clear: both;"></div>[/B]

</div></DIV>

Yup. This is a clearing problem. An inner floated <div> container must have a trailing "clear" in order for the parent or outer <div> to fully enclose it. Follow MuonTrail's suggestion.

cashcow · Dec 23, 2009

MuonTrail, kanshu you 2 rock!

btw, does this trick work for both firefox and ie? my ie 6 seems to mess up a little bit...

kanshu · Dec 23, 2009

cashcow said:
MuonTrail, kanshu you 2 rock!

btw, does this trick work for both firefox and ie? my ie 6 seems to mess up a little bit...

Yup. It works for both Firefox and IE.

If you are still experiencing problems with IE, it may be caused by something else.

Forsaken · Dec 23, 2009

Your problem lies with using float:left on your img.
Floats ignore the structure of everything around them...
Position your image another way (e.g. within another div aligned left etc)

deign23 · Dec 23, 2009

perhaps you wanna try using height and width of the border?

Simple CSS help needed

cashcow

Junior Member

blatt

Newbie

cashcow

Junior Member

rubberband

Registered Member

MuonTrail

Registered Member

kanshu

Regular Member

cashcow

Junior Member

kanshu

Regular Member

Forsaken

Newbie

deign23

Regular Member

Main Menu

Marketplace

Making Money

BlackHat World