Позиция ДИВ бок о бок с CSS

У меня есть этот простой макет в моей страницеПозиция ДИВ бок о бок с CSS

<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>

И в CSS:

#content-wrap 
{ 
clear: both; 
float: left; 
width: 100%; 
} 
#content 
{ 
text-align: left; 
padding: 0; 
margin: 0 auto; 
height: 470px; 
overflow: auto; 
    width: 760px; 
}

ДИВ «содержание» центрируется внутри обертки, что я» d хотел бы сделать, это поставить другой div рядом с «содержимым» на левой стороне, плавающим и фиксированным с 200px почти ширины. Как я могу это сделать?

Заранее благодарим за любую помощь.

источник

2010-07-11 Argons

Вы хотите, чтобы #content выровнялся по правой стороне нового div или был центрирован в оставшемся пространстве рядом с новым div? – DHuntrods

Мне хотелось бы, чтобы новый div плавал слева от #content. #content остается центрированным, но новый div выравнивается рядом с этим. – Argons

Извините, что я неправильно понял, что вы хотели. Посмотри, лучше ли это.

<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>

источник

2010-07-11 12:21:10

Вы можете центрировать выровнять #content-wrap DIV, а затем использовать абсолютное позиционирование внутри него для двух внутренних див. Вы используете div с фиксированной шириной, поэтому я не думаю, что это должно быть проблемой.

<?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>

источник

2010-07-11 12:44:12 Mike

Позиция ДИВ бок о бок с CSS

ответ

Смежные вопросы