• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

About those floating right-aligned images...

Question

Malisk    142

OK, I was thinking about having several paragraphs going something like this:

<img align="right" src="image1.jpg">
<h2>Section 1</h2>
<p>Words under this section...</p>

<img align="right" src="image2.jpg">
<h2>Section 2</h2>
<p>Words under that section...</p>

It's working as intended with the images being floating and right-aligned next to the sections, BUT with the problem of image1's vertical size making it "bleed" into the section below and "pushing down" image2 so everything gets kind of messed up, because only its image is pushed down, not the actual text of Section 2.

What I'd like to do would be to somehow make the full Section 1 be treated as a unit so that if image1 has a vertical height taller than the total section + paragraph height of Section 1, the entire Section 2 will be moved down, not just its image.

You see what I mean? Otherwise I can post a picture example. :)

I have some vague memory of a CSS property (or maybe it was a HTML attribute?) called something like "break" to somehow do what I wish?

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
raskren    0

A picture would be helpful.

Cluttering up your HTML with "align=right" is bad practice. Since alignment is a presentational attribute, you should be controlling it with a stylesheet.

You probably want to give both images a class with "float:right".

Share this post


Link to post
Share on other sites
  • 0
Malisk    142

Yes, I'm already using mostly CSS for presentation, but it seems not that one. :)

Thanks for the pointer; I'll look into moving it to my stylesheet.

Right now the page using the right aligned images look like this:

example1eh7.png

And I want them to be better aligned, like this:

example2og8.png

Note how the latter example has the sections better lining up with the images. The images are intended to be associated with the sections, but I don't want to have them below each section text, because then they'll waste space a bit.

Share this post


Link to post
Share on other sites
  • 0
Rob    20

If you set "clear:both" in CSS of your heading elements, and then use "float:right" on your image elements, you should achieve the effect you want.

Floating is the equivalent of "align=right", and the clearing CSS means it'll only start after the floats are finished (i.e. after the image is done).

Share this post


Link to post
Share on other sites
  • 0
Malisk    142

Thanks! That was what I had some memory of, but didn't recall exactly how to use it. :)

I'll give my headings a CSS class so I won't have to clear:both them all, and likewise with my images as for the floating. The sections are systematically used like this on a few pages.

Share this post


Link to post
Share on other sites
  • 0
Antaris    83

My CSS is a bit rusty, but generally I tend to add an extra element after all of the floating elements to act as a gutter to ensure everything sizes correctly:

<style type="text/css">
	.gutter { clear: both; }
	.right { float: right; }
</style>
<div style="background-color: navy;">
	<div id="myFloatingContent" class="right" style="width: 100px; height: 100px; background-color: maroon; color: white;">Some Text Here</div>
	<div class="gutter" />
</div>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.