Position div side by side with css_问答_开发者

开发者 https://www.devze.com 2023-01-06 22:09 出处：网络

I have this simple Layout in my page <div id=\"content-wrap\"> <form id=\"form1\" runat=\"server\">

相关专题：css

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.

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>

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>