limit CSS element width to edge of floating element

Question

I have a <figure><img> structure that is set to float: right with a max-width: 50%. So the figure with the images floats on the right side, like I want it. Subsequent paragraphs wrap their text on the left half of the page and don't bleed into the floating figure.

But if I add an <aside> with a background color and nice border, the <aside> element is rendered on top of the floating figure. Upon further investigation, I see that the <p> tag also extends into the floating figure---it's just that its text wraps before it. So presumably if I put a border on the paragraph, it would render over the floating figure, too. I guess I had forgotten this about CSS.

So I could float the <aside>, but then the size would shrink-wrap around the text (which is much smaller than half the page). Or I could give the <aside> a display: inline-block, but the same thing would happen.

How can I make a block element expand its width as wide as possible but not so that it would render over a floating element? Think about it this way: a paragraph will wrap its text at the edge of a floating figure. How could I make an <aside> have a width equal to the width at which a paragraph would wrap in the presence of a floating figure?

Here is an example that makes this clear. Resize the page horizontally until the text wraps.

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <title>aside float overlap</title>
  </head>
  <body>
    <figure style="float: right"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Horses" />
    <figcaption>Horses from (<a href="https://commons.wikimedia.org/wiki/File:Nokota_Horses_cropped.jpg"><cite>Wikimedia Commons</cite></a>)</figcaption></figure>
    <p>The figure shows some horses. You'll notice that this paragraph wraps right at the edge of the image, and then goes to the next line.</p>
    <aside style="border: 0.1em solid">This is an aside. I want the border to stop at the floated figure, just like the text will wrap at the floated figure.</aside>
  </body>
</html>

There is another question that is similar to mine---but the responses there do not provide a solution to my problem.

So let me ask it like this: understanding that the box takes up the entire width, even if its contained text may wrap when encountering a floating block, is there any way to define a border and/or background that would only appear around the wrapping text, and not bleed into the floating block?

I guess you should show some kind of code snippet and ask this question. It would really be helpful and easy to understand. — Praveen Kumar Purushothaman, Jan 24 '16 at 17:53
I've added example HTML source code for you to see exactly what is happening. — Garret Wilson, Jan 24 '16 at 19:24
Did that solve your problem? If the problem resolved, please consider accepting and upvoting my answer. — Peyman Mohamadpour, Feb 26 '16 at 05:07

score 0 · Answer 1 · answered Feb 02 '16 at 22:25

I believe you are after a solution like this in which, the floating element (figure) does not interfere with the aside part, letting it to have a complete border in the remaining space. To do this, you may put all this stuff in a parent element, having overflow: hidden. Also, the aside section should have overflow: hidden to dont mess with the floating element.

.parent{
  overflow: hidden;
}
figure{
  float: right;
  max-width: 50%;
  margin: 5px;
}
.side{
  overflow: hidden;
}
.side aside{
  border: 0.1em solid;
}

<div class="parent">
  <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg">
    <figcaption>Horses from (<a href="https://commons.wikimedia.org/wiki/File:Nokota_Horses_cropped.jpg"> <cite>Wikimedia Commons</cite></a>)
    </figcaption>
  </figure>
  <div class="side">
    <p>The figure shows some horses. You'll notice that this paragraph wraps right at the edge of the image, and then goes to the next line.</p>
    <aside>This is an aside. I want the border to stop at the floated figure, just like the text will wrap at the floated figure.</aside>
  </div>
</div>

limit CSS element width to edge of floating element

1 Answers1