How To Float Right of Two Elements (Both an H2 and a P)

HTML & CSS
1

I have this sample code

<!DOCTYPE html>
<html>
<head>
<style>

.g {float: right}
</style>
</head>

<body>
<h2 class="g">XYZ</h2>
<p class="g">This issssssssss some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<img src="some.gif" width="15" height="200" />
</body>
</html>

This creates a default rectang;e image on the left, the h2 on the right and the paragraph meant for the h2 unaffected and so on the left with the image (rectangle) passing right through the left side of the paragraph.

All I want to do is have the h2 and P follow around the right side of the image and when after the bottom of the image the text follows the left side of the body.

Also, I added margin:0;padding:0 to the css and it stopped the right floating (of the h2)…

Thanks,

Chris77

2

Then you should be floating the img, not the h2 and p.

3

Float the image left when it’s already on the left ? How will that bring the h2 and p on the right of the image?

4

H2 and P elements are block level elements, which typically take up full width by default.

5

It will need re-ordering so the img is before the text.

6

The code works for the h2; the image is on the left and the h2 is on the right.

I can’t get the P to also float right.

7

I don’t understand.
What is wrong with the example provided?
What result do you want?

8

I put in the word get that I left out in that sentence.

959Ă—519 60.2 KB

9

The p does not need to float, only the img needs to float.
Floating everything causes problems.
Use floats only when needed. Keep as much content as possible in the natural flow of the document.

3 Likes
10

It (your left floating) did do it . In another thread a couple of weeks ago I was trying to get a UL to stay left and the H2 and its text to the right and that’s the way it was done. Some how my memory was opposite that, but I had a lot of floating left and right there.

Thanks Sam,

Chris

1 Like
11

@SamA74 has the answer. I just want to add one more parameter to the picture:

The floated auto-width paragraph in this case fills avaiable space by nature of its content. But If the floats at the right leaves room to the left for the not floated image, it will use that space.

Try as an experiment:

<style>
.g {
    float: right;
    width: calc(100% - 20px);
}
</style>

That could be an option if you can’t edit the html or for some reason want the image come after in the code.

12 
<p style="float:left;"><h2 class="g">XYZ</h2></p>
<p>This issssssssss some text.</p>
13

@gireesht14, how would that work? You have the <h2> element nested in the <p> element that is floated to the left. So how would the heading end up to the right of the image? And is that even valid html?

3 Likes
14

No its not valid as only inline elements can be contained in a p element.

3 Likes
15

Unless otherwise defined, the width of a floated element is the max width of it’s contents. In your case, the P contains op much text that it is essentially width:100% of the parent element ( BODY).
You need to set the width of your floated elements explicitly to less tan 100% - the width of your image, e.g.:
.g {float: right; width: -webkit-calc(100% - 30px);}

That should solve your issue. However it would mean that your style would eb dependent on your content ( what if you didn’t know the width of your image???)
it might be better to structure your HTML with the IMG tag first.

<img src="some.gif" width="15" height="200"  />
<h2>XYZ</h2>
<p  >This issssssssss some text.</p>


img {float: left;  }
h2, p { overflow: hidden;}
2 Likes
16

That h2, p { overflow: hidden;} came in handy, actually it’s necessary for some, if not most, two adjacent images. That stops the text below from slithering up between two images (proabably also for ordered and unordered blocks, forms, anything that has a set shape and size). Never forget overflow:hiiden if you don’t want one losing marathon editing session after the next - there’s no other way to stop it other than a media query that kicks in before the slithering starts. They need to change it from its exceptioanlly vague terms {overflow:hidden} to more descriptive terms, like {slither:no}

If you have an image floated left and text to the right of it, if you margin left/right auto center the image, will it always push the the text right some?

17

I don’t understand what you are asking. You can’t have a floated element centred, it is floated either left or right.
If you add a side margin to a float, yes it will take more space and push/squeeze text to the side away.

18

You’re right. If I change the float to no float and then center.

19

Then the elements will follow the document order. So the text will go below the image.

20

Hi there Chris77,

your use of the “h2 element” is semantically incorrect. :scream:

The document should commence with the “h1 element”. :slight_smile:

Then the “h2 element” indicates the start of a subsection of the “h1 element”. :ok:

Likewise an “h3 element” indicates the start of a subsection of the “h2 element”
preceding it, and so forth down the line to the “h6 element”.:cool:

coothead

1 Like