Элемент позиционирования не работает должным образом

Итак, я пытаюсь использовать код столбца, чтобы получить три столбца, выстроенных в линию. К сожалению, когда я попытался это, я получил левые и правые столбцы, плавающих по среднему колонку, например, так:Элемент позиционирования не работает должным образом

http://i.imgur.com/p4ln5Ri.png

Это код CSS я использовал. Для справки, #left означает левый столбец, #main the middle и # right - правый столбец.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>3-Column</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link href="ThreeColumnProjectCSS.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="header"><h1>Header</h1></div> 
<div> 
<div class="column"> 
<h1>Left</h1> 
<ul> 
<li>Lorem ipsum dolor sit amet</li> 
<li>Consectetur adipisicing elit</li> 
<li>Sed do eiusmod tempor incididunt</li> 
<li>Ut labore et dolore magna aliqua</li> 
<li>Ut enim ad minim veniam</li> 
</ul> 
</div> 

<div class="column"> 
<h1>Header - Main</h1> 
<p>Ullamco laboris nisi sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, velit esse cillum dolore. Sunt in culpa ut enim ad minim veniam, consectetur adipisicing elit. In reprehenderit in voluptate qui officia deserunt sed do eiusmod tempor incididunt.</p> 
<p>Excepteur sint occaecat duis aute irure dolor sunt in culpa. Quis nostrud exercitation consectetur adipisicing elit. In reprehenderit in voluptate lorem ipsum dolor sit amet, cupidatat non proident. Ut labore et dolore magna aliqua.</p> 
<p>Quis nostrud exercitation qui officia deserunt eu fugiat nulla pariatur. Consectetur adipisicing elit, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Velit esse cillum dolore qui officia deserunt ut labore et dolore magna aliqua.</p> 
<p>In reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Excepteur sint occaecat lorem ipsum dolor sit amet, quis nostrud exercitation.</p> 
<p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Ullamco laboris nisi ut enim ad minim veniam, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, velit esse cillum dolore.</p> 
</div> 

<div class="column"> 
<h1>Right</h1> 
<p>Sed do eiusmod tempor incididunt excepteur sint occaecat duis aute irure dolor.</p> 
</div> 
</div> 
</body> 
</html>

CSS:

html, body { 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
} 

#left { 
    position: absolute; 
    left:0px; 
    top:100px; 
    width:200px; 
    background:#fff; 
    border:1px solid #000; 
    padding: 0px 5px; 
} 

#right { 
    position: absolute; 
    right:0px; 
    top:100px; 
    width:200px; 
    background:#fff; 
    border:1px solid #000; 
    padding: 0px 5px; 
} 

#header { 
    background:#fff; 
    /* IE 5.5 */ 
    height:81px; 
    border-top:1px solid #000; 
    border-right:1px solid #000; 
    border-left:1px solid #000; 
    voice-family: "\"}\""; 
    voice-family: inherit; 
    /* IE 6 */ 
    height: 99px; 
} 
html]body #banner { 
    /* Mozilla and Safari */ 
    height: 99px; 
} 

#main { 

    background:#fff; 
    /* these two margins affect IE 5.5 */ 
    margin-left: 200px; 
    margin-right:200px; 
    border:1px solid #000; 
    padding: 0px 5px; 
    voice-family: "\"}\""; 
    voice-family: inherit; 
    /* these two margins affect IE 6 */ 
    margin-left: 200px; 
    margin-right:200px; 
} 
html]body #main { 
    /* these two margins affect Mozilla and Safari */ 
    margin-left: 212px; 
    margin-right:212px; 
} 
#footer { 
    width: 100%; 
    height: 35px; 
    border: solid #000000; 
    border-width: 1px 0; 
    margin: 0; 
}

Я ценю помощь.

источник

2013-03-10 Cdore

пожалуйста также опубликовать HTML-разметку. –

Я отредактировал в формате HTML – Cdore

Я бы избавился от положения абсолютного и использовал систему сетки.

Например: http://jsfiddle.net/C6CnJ/7/

.row { clear: both; } 

.column { 
    width: 130px; 
    margin: 0 10px 20px; 
    float: left; 
} 

<div class="row"> 
    <div class="column">Lorem ipsum...</div> 
    <div class="column">Lorem ipsum...</div> 
    <div class="column">Lorem ipsum...</div> 
</div> 
<div class="row"> 
    <div class="column">Hello!</div> 
</div>

источник

2013-03-10 19:46:43 ktm5124

А, очень хорошо. Теперь, последнее решение проблемы для этого. Во всех столбцах слова прижимаются к границе. Я предполагаю, что увеличение размера прокладки создаст пространство между словами и границей? – Cdore

Я обновил его, чтобы добавить некоторый интервал. Вы можете отрегулировать маржу в классе столбца. – ktm5124

Я изменил «margin» на «padding», потому что это промежуток, который я хотел, внутри коробки. Но спасибо за вашу помощь. Ты действительно помог мне. – Cdore

Элемент позиционирования не работает должным образом

ответ

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