Making a div float left, but not "fall" if text is too long

Question

I'm sorry for the horrible title.

Essentially, I have a containing div which contains two divs with position: relative; and float: left;. The first div is set to 200px (by virtue of its contents) because everything it will contain is not meant to grow width-wise.

However, the second div I want to grow only to the side of the containing div. The containing div does not have a set width as I have my screens vertical and I know most people have theirs horizontal. I test it on multiple computers, so I know what it looks like in both versions.

However, back to the point, in the second div, if I put in a phrase longer than the rest of the containing div, then the second div drops to below the first div. I don't want this second div to have a set width, so is there a way to set a max-width? And if so, is there a way to set it to whatever the containing div has left? I'd really like to not have to pull screen resolution and what not, so hopefully there's another way.

Thank you for the help.

Cut down code and CSS on jsFiddle.net

score 21 · Accepted Answer · answered Aug 10 '11 at 12:13

overflow is the magic word.

You can use it both to get rid of that ugly clearing div, and to have the second div take up whatever space is left next to the float.

Also, the .content div:last-child rule you have in your CSS applies to the empty clearing div instead of your second column, so it isn't actually doing anything.

Here's what it will look like (and the updated fiddle):

<!doctype html>
<style>
.content {
  margin: 10px;
  padding: 0;
  border: 1px solid black;
  overflow: hidden; /* replaces <div class="clear"/> */
}

.columns {
  position: relative;
  float: left;
  padding-right: 20px;
  margin-bottom: 10px;
}

.c2 {
  float: none; /* Don't float this column... */
  overflow: hidden; /* ... Create a new block formatting context instead */
  padding-right: 10px;
  word-wrap: break-word;
}
</style>

<div class="content">
    <div class="columns">
        <img src="#" height="200px" width="200px" />
    </div>
    <div class="columns c2">
        TestingTestingTestingTesting
    </div>
</div>

I'm still looking this over, but in my original code the `
` is actually outside of the content div. Just had to put it in there for the small code because it wasn't looking right. — XstreamINsanity, Aug 10 '11 at 12:18
Awesome. I was able to remove the `
` from my template and it did wrap the text. It also continues to wrap when I resize the page. I truly appreciate it. — XstreamINsanity, Aug 10 '11 at 12:26
beautiful. "float:none" on the second element was the keyword for me here. You are awesome. — bitwit, Aug 30 '12 at 00:15

score 2 · Answer 2 · answered Aug 10 '11 at 11:59

2

I'm not sure if you need the second div to be floated but here's an example that seems to do what you want with the second div having the float removed but having a 200px margin added to it.

http://jsfiddle.net/chrisvenus/ZdFwD/1/

I also swapped the images for fixed width DIVs since on my browser the broken image was just being removed.

If the content in the right becomes too big and unbreakable then the overflow will ensure scrollbars are created for that div instead of it increasing the div size and then dropping it down or other undesired behaviour.

this might not be perfect for your needs but if not it should be a good start. :)

answered Aug 10 '11 at 11:59

Chris

27,210
6
71
92

I mean, it looks alright so far, my only question is why did it make the text area so small and give it scrollbars when the text should fit? :) – XstreamINsanity Aug 10 '11 at 12:09
Hmm... its not doing that for me... You could try putting a width: 100% on the right div to make sure it expands to fit the space. For me though (FF3) it starts off taking up all the width it can after taking out the 200 and as I shrink its window it moves text onto multiple lines until it gets the single widest element that can't be broken and then create scrollbars.... – Chris Aug 10 '11 at 12:15
I wonder if it's Chrome that's doing it. When I go directly to your link, it gives me a text area probably 15-20 px wide, but has both lines. Very odd. – XstreamINsanity Aug 10 '11 at 12:20
Yes, I see it when i view it in chrome now. That is mighty strange, its like chrome isn't making the box fill up its maximum size once you put the overflow on. I'm afraid I've not really got any good ideas about how to fix that though. – Chris Aug 10 '11 at 12:26
actually this question helped: http://stackoverflow.com/questions/5251366/chrome-not-calculating-width-correctly-for-block-with-overflow-hidden-left-marg it seems that adding margin-right negative helps solve that but it feels like we are getting a bit hacky now... – Chris Aug 10 '11 at 12:28
Yeah, that's what I'm trying to avoid. Ideally I wish everyone would just use ONE browser (I don't care which, but prefer not IE) and just come up with some standard, please. :) – XstreamINsanity Aug 10 '11 at 12:52

score 0 · Answer 3 · answered Aug 10 '11 at 12:10

Question was a bit vague, but I think max-width is what you need - here's a sample HTML:

<html>
  <head>
    <style type="text/css">
      #wrap {
        position: relative;
      }

      .inner {
        position: relative;
        display: inline-block;
        float: left;
        max-width: 300px;
      }

      #one {
        border: 1px solid red;
        width: 200px;
      }

      #two {
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <div id="one" class="inner">Insert long text...</div>
      <div id="two" class="inner">Insert more long text...</div>
    </div>
  </body>
</html>

I hope I interpreted what you meant correctly.

It kind of does, because at least I could go on the basis of normal resolution being 1024 wide and give it a max-width of 700 or something, but if someone has a higher res screen, then they're limited (not that it's a horrible thing). Ideally, and it probably isn't possible, I'd want `max-width: .content:width-.leftcolumn:width`. Essentially. — XstreamINsanity, Aug 10 '11 at 12:14

Making a div float left, but not "fall" if text is too long

3 Answers3

Linked