Div忽略設置寬度限制，CSS

全部。我有這個問題，我已經明確地說明了某個div應該有多寬，但它忽略了它。我有一個包裝，並在其中我想並排邊欄和內容欄。內容欄似乎正在推開邊欄並填滿所有空間。Div忽略設置寬度限制，CSS

代碼的問題：

#wrapper{ 
    font-family: "Georgia", serif; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -2em; 
    width: 700px; 
    position: relative; 
} 

#content{ 
    float: left; 
    width: 400px; 
    padding-left: 25px; 
    padding-right: 50px; 
} 

#sidebar { 
    float: right; 
    width: 175px; 
    padding-right: 25px; 
}

和HTML僅僅是等等等等等等簡而言之

我把Lorem存有其中的內容是，我把一些Lorem Ipsum在側欄中。 Chrome瀏覽器中的元素檢查器顯示內容爲700像素寬，即使我宣稱它爲400像素。我真的不關心IE6的兼容性。

http://imgur.com/A1w0a它應該看起來如何。

有人說有關小提琴的事。我是否做得對http://jsfiddle.net/R3Wyw/1/ 大Lorem Ipsum塊更瘦，只有400像素的文本，而側邊欄應該向上移動並插入旁邊。

來源

2012-08-11 zvory

請張貼HTML代碼或小提琴 – FelipeAls 2012-08-11 08:09:55

這是一個小提琴：http://jsfiddle.net/R3Wyw/ – 2012-08-11 08:14:14

'＃content'對我來說不會顯示爲700px寬。它的寬度是475px **，因爲填充。 – 2012-08-11 08:15:08

你在你的代碼已經基本HTML和CSS語法問題：

HTML結束標記應該寫</div>和永遠</div id="content">。

好：

<div id="content" class="something" role="main"> 
     <p>Content</p> 
    </div>

壞：

<div id="content" class="something" role="main"> 
     <p>Content</p> 
    </div id="content" class="something" role="main">

CSS註釋必須寫/* a CSS comment */，不<-- HTML comment -->

你應該嘗試驗證自己的代碼http://validator.w3.org（HTML）和http://jigsaw.w3.org/css-validator/（CS）發佈之前（使用Firefox上的Web Developer Toolbar擴展快速完成）。
錯誤信息有時有點含糊不清，但它們總是一樣的;）谷歌讓他們得到解釋或在這裏詢問SO。

對於寬度問題，我爲元素和父母添加了不同的背景顏色，以更好地查看哪一個不是預期的（哪一個只有浮動的孩子，因此流中沒有真正的內容，因此沒有高度沒有可見的背景顏色...）。像淺藍，淺綠，粉紅，淺黃等，這和MeasureIt！ Fx上的擴展。

來源

2012-08-11 09:22:29 FelipeAls

Div忽略設置寬度限制，CSS

回答

相關問題