Home/ Questions/Q 6241927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T11:51:22+00:00

I’m sorry for the horrible title. Essentially, I have a containing div which contains

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0