Question

<div id="transport">
    <div id="design_header">

    </div>
    <div id="design_image">
    </div>
    <div id="design_right_content">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries<br />
        <ul id="design_list">
            <li>one</li>
            <li>
                two</li>
            <li>
                three</li>
            <li>
                four</li>
        </ul>

   </div>
</div>

#design_right_content{
border: 1px solid;
float: left;
width: 400px;
overflow:hidden;
padding: 20px;
background-color: #E1DFD9;
display: inline;
 }
#transport{
border: 1px solid;
float: right;
width: 800px;
overflow: hidden;
background-color: #E1DFD9;
margin: 0px;
padding: 0px;
}
#design_header{
width: 100%;
overflow: hidden;
margin-top: 0px;
padding: 10px;
background-color: #006A4D;
height: 20px;
color: #ffffff;
clear:both;
float:left;
}
#design_image{
border: 1px solid;
float: left;
width: 300px;
min-height: 300px;
overflow: hidden;
display: inline;
background-color: orange;
}

For the above is there a way to have the div design_right_content have width:100% without it getting carried over to the next line?

Answer 1

You can (slightly amusingly) do this by simply removing a bunch of properties.

Change #design_right_content to this:

#design_right_content {
    border: 1px solid;
    overflow:hidden;
    padding: 20px;
    background-color: #E1DFD9;
}

See: http://jsfiddle.net/thirtydot/TqHkp/

This has the advantage that you don’t need to specify any width on #design_right_content.

Which is a major improvement if you wanted to make this fluid width: http://jsfiddle.net/TqHkp/1/