5

Is it possible in any way to align a block of text with an unknown in advance height to right bottom of the parent with also unknown height? Needs pure CSS. Tried to use flexbox, float, absolute positioning, but was unable to figure it out.

There is one pretty answer https://stackoverflow.com/a/18171538/4716464, but looks too weird and can be buggy in different browsers.

Floating an image to the bottom right with text wrapping around only partially addresses my problem because topic starter there has at least an inner block of known size, but in my case both are dynamic, so calc (100% - 200px) wouldn't work in my case.

enter image description here

Community
  • 1
  • 1
Sergiy Pereverziev
  • 408
  • 2
  • 8
  • this depends, does the text in red have to be in one element, or can it broken up into different elements? – Abdul Ahmad Jul 14 '15 at 17:15
  • CSS can't do that yet. You could certainly position the element but you couldn't get the text to wrap AFAIK.That said, CSS shapes offer an option but I don't think they are ready for deployment yer. – Paulie_D Jul 14 '15 at 17:22
  • I'm affraid pure css can't help you. However, absolute positionning of your orange box and right and bottom padding for your red box would be a safe solution. – Nathan Peixoto Jul 14 '15 at 17:40
  • @AbdulAhmad it can be in different elements but should float around orange item smoothly and height of each paragraph can dynamically change. So split into "upper" and "left-bottom" blocks won't work in this case – Sergiy Pereverziev Jul 14 '15 at 17:47
  • @Paulie_D thanks, I'll look into it – Sergiy Pereverziev Jul 14 '15 at 17:48
  • @NathanPeixoto yeah, but clipping to bottom doesn't make sense in my case since it's not floated by text. – Sergiy Pereverziev Jul 14 '15 at 17:50
  • 1
    Also see this - http://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around – Stickers Jul 14 '15 at 18:05
  • @Pangloss thanks. I've updated the question to note that partially it addresses my question, but I have even a harder case because I have dynamic content in both blocks and can't even use calc. – Sergiy Pereverziev Jul 17 '15 at 21:09

1 Answers1

1

Would this work for you? You could overflow hide the parent if it could be smaller than the child to avoid a weird visual.

.parent {
  position: relative;
}

.child {
  position: absolute;
  right: 0;
  bottom: 0;
}

EDIT:

So, I completely missed the text wrapping part. This solution I whipped up in CodePen leverages the CSS3 multiple column layout to accomplish the effect you're looking for. Adjust the body size to see it in full effect.

Can I Use... says this should work IE10+ and on most mobile browsers. You didn't specify what browser, so hopefully this works for your needs.

Also note, that I'm using Autoprefixer in CodePen, so you'll need to manually prefix column-count if you don't have that as part of your build step. Check out this CSS Tricks article for any additional info on multi-column.

From CodePen:

<div class="parent">
   ... Text ...
   <div class="child">
     ... Another Text ...
   </div>
</div>

.parent {
  background: red;
  border: 3px solid #000;
  column-count: 2;
}

.child {
  background: orange;
  border: 1px solid black;
}
Benjamin Solum
  • 2,281
  • 18
  • 29