How to fix a collapsing element?

HTML & CSS
1

Hi all,

I’m playing around with new HTML5 elements and styling. Not sure if that will make a difference in my question. Anyway, currently I have an image inside a <section> element (it’s aligned left so the text appears to it’s right), however the element is collapsing, and no matter what I try to fix it It’s causing a vertical scroll bar.

this is my code:

<section class="cont">
<figure>
<a href="" rel="prettyPhoto" title="Video"><img src="images/video/fp-vidthumb.jpg"  alt="Video"  align="left" /></a>
</figure>
<h3>Check It Out!</h3>
<h4>See Complete Facilities!</h4>
<p>Skating Treadmill with 8’ x 8’ Platform with Stickhandling Platform & Shooting Extension</p>
<p>Synthetic Ice Surface - Skating, Shooting, Stickhandling, Goalie Training</p>
<p>Artificial Turf for Agility Training</p>
<p>Full Set of Weights and cardio equipment</p>
<p class="testimonial">“Absolutely loved it!</p>
</section>

my css is as follows:

#main article section {
	margin-bottom: 10px;
	text-align: left;
	display: block;
}
#main article section .cont   img{
	margin-right: 10px;
	margin-bottom: 10px;

}
.cont    {
	margin-top: 10px;
}

I also notice that if I remove the align from the image itself then I once again get the additional scroll bar on the side as well.

Anyone have any thoughts. I’ve tried setting the overflow to different options with no luck.

2

Could you post the full code to your page…

the CSS you posted doesn’t match your structure. ( there are is #main, or any article tags, so technically speaking you are not applying any of the rules you have written)

3

Hi,

It sounds as though you need to clear your floats. align=“left” (naughty naughty) is equivalent to float left and that means the parents height will collapse around only unfloated content.

Add overflow:hidden to the section containing the image to make it encompass its floated children.


section {
    margin-bottom: 10px;
    text-align: left;
    display: block;
   [B] overflow:hidden[/B]
}

As you are experimenting with html5 isn’t it about time you dropped last century’s deprecated presentational attributes and remove the align=left and instead float the image from the css. :slight_smile:


.cont img{float:left}