Auto Expanding Div Columns (when floated div has no set size)

Usually 2 divs side-by-side (e.g. left menu and main content) will have the left div floated left with set size, the 2nd div also float with a left margin equal to the width of the left div.

When the left div has no set size (for example if it will contain an image of unknown width) you can still float it left, but instead of floating the 'main content' div, you can set overflow: hidden; in its CSS style (real implementation via external .css).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>   
    <div style="float: left">           
        <div style="width:200px; height:200px; background-color: Fuchsia"></div>        
    </div>

    <div style="overflow: hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo sodales faucibus. Aenean ante nunc, porta nec lacinia dignissim, eleifend ut quam. Duis quam elit, condimentum ac hendrerit et, sodales semper arcu. Phasellus justo urna, porta quis vestibulum non, fringilla non est. Sed vestibulum bibendum feugiat. Vivamus porttitor justo at sem egestas ultricies vitae et mi. Ut mattis ante sed dui viverra vel scelerisque felis bibendum. Proin nec sapien id orci egestas eleifend. Sed facilisis erat in urna ullamcorper et suscipit urna luctus. Phasellus cursus consequat odio eget auctor. Curabitur eu ante nec lacus ultrices tristique.</p>
    </div>
</body>
</html>
 

SHARE:

Add comment

Loading