Cannot get floats and clears to display content properly - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Cannot get floats and clears to display content properly

myrrh

3:47 am on Jan 20, 2013 (gmt 0)

10+ Year Member

I want to have three right-floated images (arranged vertically) and the corresponding text for each to the left of its image.

The images are taller than their associated text and I want the top of each image even with the top of its text.

-- The top image and its text are aligned as desired.

-- The middle image and its text are also correct.

-- The text associated with the bottom image is positioned up against the text for the middle image, as if it's ignoring the clear property on the middle image.

I have read over and over about floats and clears and I still have trouble understanding it.

? Can you tell by the code below what I'm missing?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>

<img style="float:right; clear:none;" src="example.com/top-image.jpg" />

<p><b>Top image text</b></p>
<p>More top image text</p>

<img style="float:right; clear:none;" src="example.com/middle-image.jpg" />

<p style="clear:left;"><b>Middle image text</b></p>
<p>More middle image text</p>

<img style="float:right; clear:none;" src="example.com/bottom-image.jpg" />

<p style="clear:left;"><b>Bottom image text</b></p>
<p>More bottom image text</p>

</body>

lucy24

4:40 am on Jan 20, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

as if it's ignoring the clear property on the middle image

Uhh.... What clear property? Each of the three images is set to {clear: none}. The three paragraphs are set to {clear: left} which is the same as {clear: none} since there are no floats on the left. In fact I'm surprised the images are displaying vertically; it must be an artifact of either their own size or the amount of text. There's nothing in the quoted code to enforce it.

To keep the images vertical you have to set each one to {clear: right}. The first doesn't matter unless you have floats further up the same page, but it will do no harm.

To keep each image-and-text set together you have to make them into a package, and apply the "clear" property to that. Something like:

<div style = "clear: right">
<img style="float:right;" src="example.com/middle-image.jpg" />

<p><b>Middle image text</b></p>
<p>More middle image text</p>
</div>

<div style = "clear: right">
<img style="float:right;" src="example.com/bottom-image.jpg" />

<p><b>Bottom image text</b></p>
<p>More bottom image text</p>
</div>

To illustrate it all nicely:

<style type = "text/css">
div {border: 1px dotted red;}
p {border: 1px dotted blue;}
img {border: 1px dotted green;}
</style>

Displays as intended in Camino, FF, Safari, Chrome, Opera, and SEE's HTML preview (webkit). Displays as expected (JOKE) in MSIE 5.23 which apparently didn't "do" floats.

And now go back and shift all of those styles into a CSS, since you're saying each thing more than once ;)

myrrh

5:08 pm on Jan 20, 2013 (gmt 0)

10+ Year Member

Using the <div>s worked quite well - thank you lucy24!

as if it's ignoring the clear property on the middle image

Uhh.... What clear property? Each of the three images is set to {clear: none}

That's what I mean by having trouble understanding the concept of floats and clears. I know it is simple, but I can't seem to fully get it.

? Do you know of a tutorial that explains it differently than w3shcools.com? I think that is a good site for learning, but I was hoping a different way of explaining it would sink in.

And now go back and shift all of those styles into a CSS, since you're saying each thing more than once ;)

Would the following work? And is there a more condensed way to do it?

(I don't expect you to do it for me, just say something like "use pseudo-elements" or whatever.)

External sheet:

.image_clear_right
{
clear: right;
}

.image_float_right
{
float: right;
margin: 15px 0 10px 0;
}

HTML:

<div class="image_clear_right">

<img class="image_float_right" src="example.com/middle-image.jpg" />

not2easy

6:00 pm on Jan 20, 2013 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

One of the best places that I have bookmarked - please put the two parts together to have the URL*

d.umn.edu/itss/support
/Training/Online/webdesign/css.html

_{*Posting of links without permission is frowned on here and I don't see a mod to contact for permission. The link goes to the University of Minnesota in Duluth and I've found it to be very useful for CSS reference.}

Hoople

8:16 pm on Jan 20, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Searching on

understanding the concept of floats and clears

brings up several sites with articles worthy of a good read. I myself would start with 'CSS Floats 101' at alistapart DOT com.

Other browsers, particularly IE6 need 'special' source order treatment to display an identical layout. Changing the browsers window size will sometimes result in things moving in ways that 'break' the relationship between content and images. As lucy illustrated divs are a method to force behaviour.

BTW - on some discussion boards mentioning that w3 place may get a variety of negative reactions. Ditto for job interviews.

lucy24

12:07 am on Jan 21, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

That's what I mean by having trouble understanding the concept of floats and clears.

It kinda looks as if you have simply got the "clear" idea backward. This is much better than not understanding it at all, because now all you have to do now is turn around and face in the opposite direction :)

The word "clear" means "don't start this element until any previous floats on {the specified side} have finished". Floats only work at all because the default is {clear: none;}.

The standard pairs
{float: left; clear: left;}
and
{float: right; clear: right;}
each mean "No matter how much room there is, don't slip in next to the previous float. Wait for it to finish and then start after it's done."

And
{clear: both;}
means "Don't do anything until all previous floats have finished their stuff." If you have a text with a lot of floats, you might apply {clear: both;} to your main headers like <h2> <h3> and so on in order to force a clean break between sections. (I deliberately skipped <h1> because if you've got a float before your main header it's got to be intentional.)

I generally include some padding in floats. Left padding for right floats, right padding for left floats. Keeps them from crashing into the adjoining text. Margins behave differently in floats than in ordinary text-- basically they behave like padding-- so if you call it padding in the first place, you know where you are.

Bottom margins and/or padding are almost a no-win. You do want a little space between the float and the following text (assuming it runs longer than the height of the float) but you don't want extra space if the float is already taller than its accompanying text.