Xhtml and Divs/Floating
I am trying to place two divs next to each-other on the same line, have a break and then have another full block div.
Here is what I have so far
body code<body>
<div class="noFloat">
<div class="square bgBlue ltFloat">I'm Blue</div>
<div class="square bgGreen ltFloat">I'm Green</div>
</div>
<div class="dvCenter">I'm in the middle</div>
<div class="dvCenter">I'm in the middle</div>
</body>
css
body {
background-color: red;
}
.square {
width: 100px;
height: 100px;
}
.bgBlue {
background-color: blue;
}
.bgGreen {
background-color: green;
}
.dvCenter {
fl开发者_如何学Coat: none;
margin: auto;
width: 300px;
background-color: purple;
}
.ltFloat
{
float: left;
}
.noFloat
{
display: block;
float: none;
}
I am very stuck as to why this won't work correctly. Any help is greatly appreciated :-)
By break I intended to have the two left floated divs sharing no horizontal space with the centered divs.Change the .noFloat rule to
.noFloat
{
display: block;
float: none;
overflow:auto;
clear:both;
}
demo at http://jsfiddle.net/gaby/53vVP/1
Alternatively you can set clear:left; on the .dvCenter rule.
demo at http://jsfiddle.net/gaby/53vVP/
加载中,请稍侯......
精彩评论