Variable Width <div>s

HTML & CSS
1

I have a block that takes up 90% of the width of a page.

Within this are 2 divs, one on the left and the other on the right. The left-hand div holds an image and I want this div to only be as wide as the image.

The right-hand div should take up the rest of the space.

Is there a way to do this using CSS only?

2 

<div style="width: 90&#37;">
  <img style="float: left; width: 200px">
  <div style="margin-left: 210px"></div>
</div>

should be fine

3

An important point that I forgot to mention. The images will be variable width, so I cannot set the width of the left-hand div to a fixed value.

4

Hi,
I did something similar recently for someone else. Though it is not exactly as you have explained your needs to be.

I used display:table on the main wrapper with a width (to simulate min-width) then I set a min-width on one of the floated columns which allowed for it to expand with large images.

Auto Width Wrapper Using display:table;

Of course IE6/7 do not support display:table so they present a problem. I was able to get close in IE6 by using display:inline-block due to it’s expanding box bug. There was no way to get IE7 to respond though so I gave up after a while.

Auto Width Wrapper Using Inline-Block

5

It shouldn’t mak a difference.


<div style="width: 90&#37;; background: red">
  <div style="float: left; width: 30%; background: green">&nbsp;</div>
  <div style="margin-left: 30%; background: blue">&nbsp;</div>
</div>
6

Hi,
Something like this should do what you are wanting. :slight_smile:

Shrinkwrap Float Sidebar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fluid main content with min-width sidebar</title>

<style type="text/css">
* {margin:0;padding:0;}

body{
    background: #fff;
    font-size:100%;
}
#wrapper{
    width:90%;
    min-width:700px;
    margin:20px auto;
    background:#444;
    border:1px solid #000;   
}
#header{
    height:80px;
    padding:10px 0;
    font-family:"courier new";
    background:lime;
    text-align:center;
}
#gauge{
    float:left;
    width:210px;
    height:20px;
    margin:30px 0 0;
    background:red;
}
#inner{overflow:hidden;}

#left{
    float:left;/*shrink wrap to inner content width*/
    min-height:150px;/*height for demo only*/
    padding:5px;
    background:orange;
    font-weight:bold; 
}
#left p{width:180px;background:#CDF;}/*restrain the p block width*/

#content{
    overflow:hidden;
    background:#EEF;
}
* html #left{width:200px; margin-right:-3px;}/*ie6 3px jog*/
* html #inner,* html #content{height:1%; overflow:visible;}/*ie6 haslayout*/

#footer{
    clear:both;
    height:50px;
    background:lime;
    text-align:center;
}

p{padding:10px;}

/*===Test Expander===*/
a.test { /*simulate an image*/
    float:left;
    clear:left;
    width:200px;
    margin:5px 0 0;
    padding:20px 0;
    background:#FFF;
}
a.test:hover{/*simulate a wider image*/
    width:300px;
    height:150px;
}
</style>

</head>
<body>

<div id="wrapper">
    <div id="header">
        <h2>Fluid main content with shrinkwrap float sidebar</h2>
        <div id="gauge">200px wide gauge</div>
    </div>
    <div id="inner">   
        <div id="left">
            <p>Left float with no width set. Let it shrink wrap to image width.</p>
            <a class="test" href="#">Expand width to 300px</a>
        </div>
        <div id="content">
            <p>Lorem ipsum dolor sit amet consectetuer consectetuer Curabitur sagittis nulla ornare. 
            Est Vestibulum eget interdum sed condimentum at laoreet massa pretium sed. Pellentesque 
            ut mauris dictumst orci Aenean.</p>
            <p>Rhoncus orci amet Nam adipiscing eget dui gravida libero ac Quisque. Interdum pede 
            pharetra vitae Nulla tincidunt pede tempus odio interdum enim. Dictum et nibh In a vitae 
            id amet lobortis Phasellus laoreet. Ultrices dui risus massa quam eu nisl consequat quis.</p>
            <p>Lorem ipsum dolor sit amet consectetuer consectetuer Curabitur sagittis nulla ornare. 
            Est Vestibulum eget interdum sed condimentum at laoreet massa pretium sed. Pellentesque 
            ut mauris dictumst orci Aenean.</p>
            <p>Rhoncus orci amet Nam adipiscing eget dui gravida libero ac Quisque. Interdum pede 
            pharetra vitae Nulla tincidunt pede tempus odio interdum enim. Dictum et nibh In a vitae 
            id amet lobortis Phasellus laoreet. Ultrices dui risus massa quam eu nisl consequat quis.</p>
        </div><!--end content-->            
    </div><!--end inner-->
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

</body>
</html>
7

Re-reading I think I may have understood the question, you want to know how the image can force the parent elements size.

Had trouble visualising it, A picture is worth a thousand words :wink:

8

This is a fantastic bit of code. Thanks very much for your help.