this question has answer here:
i have <figure><img> structure set float: right max-width: 50%. figure images floats on right side, want it. subsequent paragraphs wrap text on left half of page , don't bleed floating figure.
but if add <aside> background color , nice border, <aside> element rendered on top of floating figure. upon further investigation, see <p> tag extends floating figure---it's text wraps before it. presumably if put border on paragraph, render on floating figure, too. guess had forgotten css.
so float <aside>, size shrink-wrap around text (which smaller half page). or give <aside> display: inline-block, same thing happen.
how can make block element expand width wide possible not render on floating element? think way: paragraph wrap text @ edge of floating figure. how make <aside> have width equal width @ paragraph wrap in presence of floating figure?
here example makes clear. resize page horizontally until 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 (<a href="https://commons.wikimedia.org/wiki/file:nokota_horses_cropped.jpg"><cite>wikimedia commons</cite></a>)</figcaption></figure> <p>the figure shows horses. you'll notice paragraph wraps right @ edge of image, , goes next line.</p> <aside style="border: 0.1em solid">this aside. want border stop @ floated figure, text wrap @ floated figure.</aside> </body> </html> there another question similar mine---but responses there not provide solution problem.
so let me ask this: understanding box takes entire width, if contained text may wrap when encountering floating block, there way define border and/or background appear around wrapping text, , not bleed floating block?
i believe after solution in which, floating element (figure) not interfere aside part, letting have complete border in remaining space. this, may put stuff in parent element, having overflow: hidden. also, aside section should have overflow: hidden dont mess 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 (<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 horses. you'll notice paragraph wraps right @ edge of image, , goes next line.</p> <aside>this aside. want border stop @ floated figure, text wrap @ floated figure.</aside> </div> </div>
Comments
Post a Comment