Position div side by side with css
Question
I have this simple Layout in my page
<div id="content-wrap">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="content" style="height: 550px">
</div>
</form>
</div>
And the css:
#content-wrap
{
clear: both;
float: left;
width: 100%;
}
#content
{
text-align: left;
padding: 0;
margin: 0 auto;
height: 470px;
overflow: auto;
width: 760px;
}
The div "content" is centered inside the wrap, what I'd like to do is to put another div next to "content" on the left side floating and fixed with 200px almost of width. How can I do that?
Thanks in advance for any help.
2 answers
solution1
1 ACCPTED 2010-07-11 12:21:10
Sorry I misread what you wanted. See if this is any better.
<html>
<head>
<style type="text/css">
#content-wrap
{
background-color: #EEE;
clear: both;
float: left;
width: 100%;
}
#content
{
background-color: #0F0;
text-align: left;
padding: 0;
margin: 0 auto;
height: 470px;
width: 760px;
}
#leftbar
{
background-color: #F00;
float: left;
width: 200px;
height: 470px;
margin-left: -200px;
}
</style>
</head>
<body>
<div id="content-wrap">
<form id="form1" runat="server">
<div id="content">
<div id="leftbar">
</div>
</div>
</form>
</div>
</body>
</html>
solution2
0 2010-07-11 12:44:12
You could centre align the #content-wrap div, then use absolute positioning inside it for the two inner divs. You are using fixed-width divs, so I don't think this should be a problem.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
#content-wrap {
position: relative;
margin: 0 auto;
width: 900px;
height: 600px;
background: #eeeeee;
}
#content {
position: absolute;
left: 215px;
width: 470px;
height: 600px;
background: #cccccc;
}
#sidebar {
position: absolute;
background: #aaaaaa;
left: 0;
height: 600px;
width: 200px;
}
</style>
</head>
<body>
<div id="content-wrap">
<div id="content"></div>
<div id="sidebar"></div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.