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

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

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 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. :)

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.

来源：https://stackoverflow.com/questions/7010327/making-a-div-float-left-but-not-fall-if-text-is-too-long

标签

html

word-wrap