Why do things wrap when they do

[Abby]

After an arduous 3 hours of fiddling, I finally got things positioned correctly on my page. However, I feel mystified about why certain rules don't seem to work together, and I'd like some explanations.1) A heading <h2> is an inline element, correct?2) So when I put an <h2> element after a floated block level element, the inline element will stick next to it. The only way to force that inline element to the next line is to wrap it in <div> tags, or to make the min-width of the block element wider than the browser window. Is this correct?3) Why doesn't clear:both work, in this case?Thanks.Here's my page-in-progress, by the way. Right now, I can't figure out why the validator sees so many errors in the HTML, and why the included footer isn't rendering. I'll post a separate topic in the HTML forum about this.

[dsonesuk]

1) h1 to h6 are BLOCK elementssome typical block elements<div>, <h1> - <h6>, <p>, <ul>, <ol>, <dl>, <table>.some typical block inline element<span>, <a>, <strong>, em>, <img />, <br>.2) putting the block element after the floated elements, causes the block element to take the space vacated by the floated elements, as they are taken out of the flow of non-floated other elements.3) using clear: both; on the block element should force it below the floated elements, or you could wrap the floated elements in a containing div, and give the containing div, a overflow:hidden; declaration, which will produce the same effect.

[thescientist]

some typical block inline element<span>, <a>, <strong>, em>, <img />, <br>.

[dsonesuk]

thanks for pointing that out, early in morning, and hadn't had coffee yet!

[Abby]

2) putting the block element after the floated elements, causes the block element to take the space vacated by the floated elements, as they are taken out of the flow of non-floated other elements.3) using clear: both; on the block element should force it below the floated elements, or you could wrap the floated elements in a containing div, and give the containing div, a overflow:hidden; declaration, which will produce the same effect.

Thanks! None of this stuff seems self-evident to me, so this is very helpful.