Welcome to WebmasterWorld Guest from 18.232.53.231

Forum Moderators: not2easy

Message Too Old, No Replies

Text in floated element not wrapping

     
2:00 am on Mar 29, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1137
votes: 115


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?
3:43 am on Mar 29, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15753
votes: 826


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".
5:42 am on Mar 29, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1137
votes: 115


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"?
7:05 am on Mar 29, 2017 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


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]
1:44 pm on Mar 29, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2662
votes: 793


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...]
9:15 pm on Mar 30, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1137
votes: 115


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!