Can You Float a Div in the Lower Right of Its Parent Div and Have Text Wrap Around It

Can you float a div in the lower right of its parent div and have text wrap around it?

Didn't see a demo there - or anyone doing it with a pseudo element (which would be a bit more semantically correct because it's styling and not content) so let me just post that then :

Demo

<div id="parent">
<div></div>
<span>text</span>
</div>

#parent:before {
content: '';
height: 35%;
float: right;
}

#parent div {
width: 130px;
height: 65%;
float: right;
clear: right;
}

When it comes to responsiveness in this particular case there are two aspects. First would be the background but since that isn't responsive itself for the most part and positioned at the bottom right, some width and height may have to be set along with the break points in the media queries.

Another form of responsiveness, automatic adjustment to the amount of text, is a tricky one that doesn't seem to be solvable without JavaScript. When height is left to auto, the floated elements will not inherit any height. This causes for the effect to not render. And because children cannot refer up the tree to relate to their parent's unknown height there isn't a pure CSS approach available.

So the example still has a fixed height and a minor bit of JS that's commented out but which should come close to making it adapt. It's a workaround but it's all current browser support will allow.


And now what can be used in the future!

Caniuse

The image itself could be cropped and saved as png, leaving transparent space around it. Then we can apply shape-outside and shape-image-threshold rules to it. With the current spec any text will then wrap when it's floated. Browser support it still limited at this point but it's very promising. The great thing I noticed about it is that when the floated element is given top margin, the text will start to flow above it! This does not occur in the example at the top of this post, it will only make the block appear longer (and empty as well). Because of this, a minimal bit of vanilla JS can make it fully responsive by only setting margin and without using an additional pusher element :

Example

<img id="image" src="image.png" alt="Sample Image">

#image {
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: right;
}

window.onload = placeBottom;
window.onresize = placeBottom;

function placeBottom() {
var parent = document.getElementById('parent'),
image = document.getElementById('image');
image.style.marginTop = 0;
var space = parent.clientHeight-image.clientHeight;
image.style.marginTop = space + 'px';
}

It's actually very straightforward :

http://www.html5rocks.com/en/tutorials/shapes/getting-started/

Credit for the latter part to Paulie_D for putting me on the track of CSS shapes and later recognising that images used in this way are subject to same domain policy. Meaning they have to be hosted by the site itself or when linked externally, CORS restrictions will need to be relaxed.

How can I wrap text around a bottom-right div?

It sure seems to have been asked before (2003), and before (2002), or before (2005)

The last link actually suggest a javascript-based solution, but for a fixed (i.e. non fluid) solution.

It is consistent however, with other advices found

The only way to do that is to put the floated element somewhere in the middle of the text. It's impossible to get it perfect all of the time.

Or this one:

It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).

Anyway, as discussed in this thread, there is no easy solution...


Cletus mentions in the comments this thread from 2003, which states once again the fact it can not easily be achieved.

However, it does refer to this Eric Meyer's article, which comes close to the effect you want to achieve.

By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.

Because floats were not originally intended to be used for layout, some hacks may be necessary to make them behave as intended. This can involve floating elements that contain floats, "clearing" elements, or a combination of both.


Yet, Chadwick Meyer suggests in his answer a solution based on the :before CSS selector (variation of Leonard's answer).

It does work here.


Update Apr. 2021: Temani Afif suggests in his answer using Flexbox combined with a shape-outside.

But do check out the Backwards Compatibility of Flexbox, even though its support by all browsers is quite good.

Text wraps around floating div but borders and hr / s do not

I know this problem was posted some time ago, but I had the same problem today and found another solution:

http://jsfiddle.net/MvX62/

I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.

Also you don't need to define z values and don't need any hacks or workarounds.

How do I get a div to float to the bottom of its container?

After struggling with various techniques for a couple of days I have to say that this appears to be impossible. Even using javascript (which I don't want to do) it doesn't seem possible.

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

I guess I'll have to revisit the design goals for this item unless anyone has a last minute suggestion.

Float a Div to bottom-right corner of a div

You have to create a floating element that will "push" the child element down. Then with Javascript you calculate the height of the pusher element. Note that the pusher and the child container have to be declared BEFORE the text, so they are rendered as the "first character" of the container.

var parents = document.getElementsByClassName("parent");for (var i = 0; i < parents.length; i++) {  var parent = parents[i];  var child = parent.getElementsByClassName("child")[0];  var filler = parent.getElementsByClassName("filler")[0];  var parenth = parent.offsetHeight;  var childh = child.offsetHeight;  filler.style.height = (parenth-childh) + "px";}
.parent {  background-color: grey;}.child {  float: right;  clear: right;  background-color: green;}.filler {  width: 0px;  float: right;}
<div class="parent">  <div class="filler"></div>  <div class="child">thingy thingythingy<br><br>thingy thingy thingy<br>thingy thingy thingy</div>  asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd</div>

Floating an image to the bottom right with text wrapping around

Create a spacer element with float: right and height equal to the height of the content minus the height of the image. Then use float: right and clear: right on the image:

<div class="spacer"></div>
<img class="bottomRight" src="" />
<div class="content"></div>
.spacer {
height: calc(100% - 200px);
width: 0px;
float: right;
}
.bottomRight {
height: 200px;
float: right;
clear: right;
}

http://cssdesk.com/bLNWs

My demo uses fixed dimensions in the container element. Since that is rarely a realistic case, it probably makes more sense to use JavaScript to size the spacer. Call this function, passing a reference to the spacer element when the document is ready and during the window.onresize event.

function sizeSpacer(spacer) {
spacer.style.height = 0;
var container = spacer.parentNode;
var img = spacer.nextElementSibling || spacer.nextSibling;
var lastContentNode = container.children[container.children.length - 1];
var h = Math.max(0, container.clientHeight - img.clientHeight);
spacer.style.height = h + "px";
while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {
spacer.style.height = --h + "px";
}
if (lastContentNode.getBoundingClientRect().bottom > img.getBoundingClientRect().bottom) {
spacer.style.height = ++h + "px";
}
}

This function works (see the demo), and can be reworked for jQuery or your library of choice. It's not meant to be plug-in quality code, but serves to illustrate the concept.

jsfiddle.net/gilly3/xLr7eacp

Edit: I created a jQuery plugin version (github | jsFiddle demo) that supports floating bottom left or bottom right. It also supports specifying which element to align the bottom with.

By the way, I didn't bother trying to support IE7.

Floating elements within a div, floats outside of div. Why?

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

<div class="parent">
<img class="floated_child" src="..." />
<span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

Div stretch then wrap around other floated div

Looks like you just about have it.. confused:
http://jsfiddle.net/BCBd2/1/



Related Topics



Leave a reply



Submit