Мне нужно центрировать div фиксированной ширины, который находится внутри div ширины жидкости

У меня есть код, который выглядит так:

<div id="wrapper"> <!--Liquid -->

  <div id="header"> <!--Liquid-->
    <img src="logo.png">
  </div> <!--End header -->
 <div id="bg_hold"> <!--Holds a background, Liquid -->


 <div id="main"> <!--Fixed-->
   <div id="l_col">
     lcol
   </div>

   <div id="r_col">
      rcol
   </div>
 </div> <!--End main -->
</div><!--End bg_hold-->
</div> <!--End wrapper -->

enter code here

Итак, мы рассматриваем здесь набор жидких элементов div, предназначенных для расширения вместе с разрешением. Затем есть одно поле содержимого фиксированной ширины. Мне нужно центрировать этот блок фиксированной ширины, и ничто под солнцем не сделает этого. Я часами бился головой, я просмотрел каждый учебник и ТАК вопрос по теме. Ничто не делает этого. Вот CSS, он немного подкачанный из-за всех исправлений, которые я пытался реализовать:

body{
font-family: Tahoma,Josefin Sans,Arial, Helvetica, sans-serif;
font-size:12px;
}


#wrapper{
width:100%; /*Creating a liquid layout for the wrapper un-centers the main div */
clear:both;
overflow:hidden;
margin:0 auto;
}

#header{
position: relative;
float:left;
width:100%;
background-image: url("img_v3/header_bg.png");
text-align:center;
}

#bg_hold{
width:100%;
overflow:hidden;
background-image: url("img_v3/body_bg.png");
}


#main{
width:645px;
text-align:center;
position: relative;
float:left;
z-index: 1000;
-webkit-box-shadow: #BBB 0px 0px 10px;
background: rgba(255, 255, 255, 0.699219);
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;

text-align: justify;
}

#l_col{
width: 380px;
float:left;
margin-top: 20px;
margin-right: 30px;
margin-left: 20px;
margin-bottom: 20px;
}

#r_col{
width:185px;
float:left;
margin-top: 20px;
margin-right: 20px;
margin-left: 10px;
margin-bottom: 20px;
}

В тот самый момент, когда я переместил «оболочку» с фиксированной ширины на жидкую ширину, она потеряла центр «основного» элемента. Я пробовал все. Что мне не хватает?


person GilloD    schedule 14.03.2011    source источник
comment
Не могли бы вы сделать jsfiddle с div разными цветами, чтобы показать нам проблему? Я попытался скопировать и вставить ваш код в jsfiddle.net, но не смог воспроизвести проблему.   -  person Bazzz    schedule 14.03.2011


Ответы (1)


Это то, что вы были после:

Демонстрация JSFiddle

Все, что я сделал, это удалил float:left; в элементе #main и добавил margin:0 auto; http://dl.dropbox.com/u/17927147/StackOverflow/Screen%20shot%202011-03-15%20at%2013.59.12.png

person Myles Gray    schedule 14.03.2011
comment
Итак, это работает. НО, прозрачный фон на «основном» элементе исчезает, если я опускаю float:left;. Есть идеи, почему? - person GilloD; 15.03.2011
comment
Chrome 10.0.6, он центрирует div, но фон исчезает. - person GilloD; 15.03.2011
comment
@GilloD Исправлено, вам нужно было добавить- overflow:hidden; к #main - person Myles Gray; 15.03.2011