CSS floated image not going over title

Question

I want to align an <h2> to a <p> tag that is floated to the right.

While I can use text-align to make the <h2> go to the right, there is a gap between the beginning of the <p> and the <h2> tag.

I could also add margin-right to the <h2> tag, but I see that isn't very responsive...

This is what I mean:

And this is my code:

.right {
  float: right;
}

.right h2 {
  text-align: right;
}

.right img {
  float: left;
  width: 100px;
  height: 120px;
}

<div class="block right">
  <h2>Header 2.1</h2>

  <img src="images/wip.png" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Did anyone solve your problem? If so, could you please accept the best answer (click the checkmark under the points). That will help other users that come across your question quickly spot the accepted answer and it also gives 15 rep. points to the author (: — Danziger, Jan 31 '18 at 04:50

Danziger · Answer 1 · 2018-01-31T04:55:12.417

By default, an h2 is a block element, which means that it will take all the available horizontal space from its container. Therefore, using text-align: right will just move the text inside it, but it will be occupying the same space, as you can see here:

.right {
    float: right;
}

.right h2 {
    background: cyan;
    text-align: right;
}

.right img {
    background: red;
    float: left;
    width: 100px;
    height: 120px;
}

<div class="block right">
    <h2>Header 2.1</h2>

    <img src="images/wip.png" />
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Remove that text-align property and add display: inline-block to the h2 instead. Note display: inline will also work, but the (vertical) margins and paddings will not be applied.

This will allow the floated image to push the h2 element in order to position itself at the beginning of the container:

.right {
    float: right;
}

.right h2 {
    background: cyan;
    display: inline-block;
}

.right img {
    float: left;
    background: red;
    width: 100px;
    height: 120px;
}

<div class="block right">
    <h2>Header 2.1</h2>

    <img src="images/wip.png" />
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Another option is to move the img in your HTML to be the first element:

.right {
    float: right;
}

.right h2 {
    background: cyan;
}

.right img {
    float: left;
    background: red;
    width: 100px;
    height: 120px;
}

<div class="block right">
    <img src="images/wip.png" />

    <h2>Header 2.1</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

We're getting somewhere! That solution works the best out of anything I have tried thus far. However, one thing is a bit unwanted: The image starts at the top of the h2. That was the reason why I kept the h2 as a block, so the image would be beneath the h2. But maybe there is a different way to handle this. Any suggestions? — HeadGam3z, Jul 12 '17 at 21:32
@HeadGam3z You should set the `margin-top` of the `h2` element to `0`, either in all of them: `h2 { margin-top: 0; }` or just to the first one. Assuming the `h2` is always the first element inside your `.block` elements: `.block > h2:first-child { margin-top: 0; }` — Danziger, Jul 12 '17 at 21:37

score 0 · Answer 2 · edited Jan 31 '18 at 05:43

Put the image before the title, and align the title to the left. Not sure if that is really what you want, but check this jsfiddle:

https://jsfiddle.net/lkjimy/y159joe6/

HTML

.right {
  float: right;
}

.right h2 {
  text-align: left;
}

.right img {
  float: left;
}

<div class="block right">

  <img src="http://via.placeholder.com/300x300" />

  <h2>Header 2.1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

score 0 · Answer 3 · edited Jan 31 '18 at 05:58

In order for the text alignment to work, you must place a width to the content and the <h2> element.

HTML

div.right {
  width: 50%;
  /* example */
}

div.right {
  float: right;
}

div.right h2 {
  width: 100%;
  /* example */
  text-align: right;
}

div.right img {
  float: left;
}

<div class="block right">
  <!-- switch the image to the top of the content -->
  <img src="images/wip.png" />

  <h2>Header 2.1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS floated image not going over title

3 Answers3