Text in floated element not wrapping

[csdude55]

I have a parent container, with 2 child elements that are both float: left. It looks like this:

<div id="parent" style="margin...; padding...">
 <div id="child_1" style="float: left; width: 250px">
  <div id="whatever"></div>
  <script>$('#whatever').ajax('whatever.php');</script>
 </div>

 <div id="child_2" style="float: left">
  <p>$example_1</p>
  <p>$example_2</p>
  <p>$example_3</p>
 </div>
 <div style="clear: both"></div>
</div>

That's a mock-up for this example, of course, but it's pretty close to exactly what I have... but of course I use classes instead of inline styles, and there's a bit more text to it. But it is notable that "child_1" does have a defined width of 250px, and on mobile devices it's set to "display: none". And "parent" doesn't have a defined width, but the desktop screen that I'm using for production has it at around 600px.

The issue I'm having is that when $example_[1-3] is long, it doesn't wrap within "child_2"; instead, it expands the width of "child_2" and forces it to wrap underneath "child_1". That's not what I want; I always want "child_2" to the right of "child_1", but I want $example_[1-3] to wrap and stay within the confines of "child_2".

(In retrospect, I really never want "child_2" to wrap around, so I guess "display: inline" would be more appropriate than "float: left". But then I have to add min-height to "parent" for aesthetic purposes, so I guess I'll stick with "float: left" unless you guys can suggest otherwise)

Changing from "float: left" to "display: inline" didn't have any impact on the issue, and so far the only solution I've found is to add "max-width" to "child_2". Can you guys suggest an alternative?

[lucy24]

In your code as posted, you've set an explicit width on child_1 but not child_2, so you can hardly fault it for not sticking to a particular width. Was that just a glitch in posting?

What's wrong with max-width? It seems like just what you need.

As an alternative to "display: inline" you might try "display: table-cell". I know it seems like cheating after all these years of beating it into your head not to use tables for layout--but it does make it a lot easier to govern things like height and vertical alignment. And then you can set one of the two widths (child1 or child2) as a percentage of the "parent".

[csdude55]

In your code as posted, you've set an explicit width on child_1 but not child_2, so you can hardly fault it for not sticking to a particular width. Was that just a glitch in posting?

No, not a glitch, but maybe just a lack of logic.

The plan is, on a desktop or tablet (ie, min-width > 660px) "child_1" has a fixed width of 250px, and "child_2" should fill up the remainder. But on mobile, "child_1" is set to "display: none", so "child_2" fills up the entire container.

Rather than setting multiple widths for "child_2" in the stylesheet, I left it at the default ("auto"?). Is that a bad idea?

What's wrong with max-width? It seems like just what you need.

Probably nothing wrong with it, but it feels kinda like a cheat since max-width isn't supported in older versions of IE. Which really isn't relevant anymore (IE7 traffic is like 0.01% for me, and I don't have any IE < 7 traffic), but I thought there might be a better option.

As an alternative to "display: inline" you might try "display: table-cell". I know it seems like cheating after all these years of beating it into your head not to use tables for layout--but it does make it a lot easier to govern things like height and vertical alignment. And then you can set one of the two widths (child1 or child2) as a percentage of the "parent".

You're right, I'm replacing an old layout that used a <table>, so I'm trying to get away from that :-( And, like before, I understand that older IE has limited support for table-cell... IIRC, <= IE8? But I guess that's mostly irrelevant now, anyway, it's just something that's stuck in my head.

I've never used "table-cell"... do I still have to have a container for "display: table" and "display: table-row"? Is there any reason that using it would be better than just setting "max-width"?

[not2easy]

The difference is that on desktop you use {display: table-cell;} and on mobile you change to {display: block;} and it "wraps" the table row. It isn't a <table> just uses table-like properties so you can do away with floats. More predictable behavior.

div {display: table-row;} wraps the div {display: table-cell;} on desktop and media queries change them all to display:block at narrow widths.

display: has many useful applications for responsive design, there's a handy reference at w3schools [w3schools.com] and more in depth info at w3.org [w3.org]

[NickMNS]

I think that this should do what you want:

#child_1{
 position:relative;
 display:inline-block;
 width: 250px;
 background-color:red;
 }
#child_2{
 position:absolute;
 display:inline-block;
 background-color:#cdcdcd;
}

here is a demo:
[jsfiddle.net...]

[csdude55]

Thanks, Nick, I think that's exactly what I was looking for :) I'm not going to pretend to understand WHY that works (child_1 is relative to... what?), but it does. So thanks!