CSS Side-by-side Divs
In the following example i'm trying to get the divs "left" and "right" to appear side-by-side. Obviously my understanding is flawed but what mistake have I made, because (in Chrome at least) they do not appear side-by-side.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background: #ffffff;
text-align:center;
}
#container {
margin: 100px auto 100px auto;
padding: 0;
background: #eeeeee;
text-align:left;
width: 49.5em;
}
#title {
margin: 2em;
padding: 0;
background: dddddd;
width: 49.5em;
}
#graphics {
margin: 0;
padding: 0;
height:200px;
background: #cccccc;
width: 49.5em;
}
#navigation {
margin: 0;
padding: 0;
background: #bbbbbb;
height:3em;
width: 49.5em;
}
#wrapper {
margin: 0;
padding: 0;
background: #aaaaaa;
width: 49.5em;
}
#left, #right {
margin: 0;
padding: 0;
float: left;
background: #999999;
width: 41em;
}
#right {
margin: 1.5em 0 0 0.5em;
padding: 0;
float: right;
background: #888888;
width: 8em;
}
.clear {
margin: 0;
padding: 0;
height: 0;
font-size: 1px;
line-height: 0;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="title">Title</div>
<div id="graphics">Graphics</div>
<div id="menu">Menu Item</div>
<div id="wrapper">
<div id="left">
开发者_如何学JAVA Left
</div>
<div id="right">
Right
</div>
<div class="clear">
</div>
</div>
</div>
</body>
</html>
The problem was that you specified a 1.5em margin-top on #right. Take that out and it should work. Here's a working jsfiddle.
remove margin from #right
#right {
/* margin: 1.5em 0 0 0.5em;*/
padding: 0;
float: right;
background: #888;
width: 8em;
}
http://jsfiddle.net/x5qaf/1/
This fixes it for me:
#left {
margin: 0;
padding: 0;
float: left;
background: #999999;
width: 41em;
}
#right {
/* margin settings moved the box*/
padding: 0;
float: right;
background: #888888;
width: 8em;
}
加载中,请稍侯......
精彩评论