我需要到中心駐留液體寬度的div

我有代碼看起來像這裏面的固定寬度的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，那是因爲我已經嘗試實現所有修補程序的微幅下挫janky：

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

的那一刻我感動的「包裝」接近從固定寬度的液體寬度，但非中心的「主要「元素。我已經嘗試了一切。我錯過了什麼？

來源

2011-03-14 GilloD

頭腦作出的jsfiddle在不同的'div's顏色向我們展示問題？我試圖複製粘貼到http://jsfiddle.net/的代碼，但似乎無法重現問題。 – Bazzz 2011-03-14 13:15:10

http://jsfiddle.net/tPaSz/ – GilloD 2011-03-15 08:16:47

這是你所追求的：

JSFiddle Demo

我所做的是#main元素上刪除float:left;並添加margin:0 auto; http://dl.dropbox.com/u/17927147/StackOverflow/Screen%20shot%202011-03-15%20at%2013.59.12.png

來源

2011-03-14 13:19:39

所以，這個工程。但是，如果我放棄float：left;，它將刪除'main'元素上的透明背景。任何想法爲什麼？ – GilloD 2011-03-14 22:59:19

嗯奇怪...什麼瀏覽器？ – 2011-03-14 23:28:11

Chrome 10.0.6，它集中div，但背景消失。 – GilloD 2011-03-15 08:18:57

我需要到中心駐留液體寬度的div

回答

相關問題