div width 100% without overflowing to next line
<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?
Try changing your #design_right_content to this:
#design_right_content{
...
width: 360px;
...
}
The padding adds to the width of an element therefore bumping it down
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/
精彩评论