Log in

View Full Version : setting width of div to remainder of parent's space


gib65
08-11-2012, 05:50 AM
Hello,

How can I tell a div, in CSS, to take up the rest of the space that's left over from another div to its left. I mean, I have one div floating on the left and it's size is determine by the jpg image that's filling it up. Then, the div to its right is floating left and its size is also determined by its contents (text in this case). I would like to set its width, in CSS, to be whatever's left in its parent div (also the parent of the div to the left) after the first div took up space on the left side.

I'm trying to force it to stick with the remaining width, and to force it to grow in height if it needs more room to display its contents. The problem now is that if its contents are too large, the div wraps around to the next line (i.e. it appears under the first div instead of to its right). I'm hoping that setting its width to be fixed at the remainder of its parent's available space, it won't do this and will grow its height down instead if it needs extra space for its contents.

How can I do this?
jscheuer1
08-11-2012, 07:49 AM
Possibly make the parent -


overflow: hidden;

But I can't be sure. Put up a demo.
itivae
08-12-2012, 01:59 AM
Perhaps setting a max-width on both elements?
bernie1227
08-12-2012, 02:27 AM
well you could change the width of the div dynamically, so something along the lines of:


<html>
<head>
<script type="text/javascript">
var imageWidth = document.getElementById('image').style.width;
var containerWidth = document.getElementById('container').style.width;
var divWidth = document.getElementById('fillwidth').style.width;
divWidth = containerWidth - imageWidth;
</script>
</head>

<body>
<div id="container">
<div id="fillwidth"></div>
<img src="fishcakes/image/fishcakeagain.png" id="image"></img>
</div>
</body>
</html>

or something along those lines