Menu
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
912
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. :)
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
