Проблема размещения CSS. Не удалось добавить вторую боковую панель

Я не могу добавить 2 боковых панели на образец веб-страницы, которую я сделал сегодня.Проблема размещения CSS. Не удалось добавить вторую боковую панель

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- saved from url=(0045)http://csseasy.com/layouts/fixed/1column.html --> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="generator" content= 
    "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> 
    <link rel="stylesheet" type="text/css" href="style2.css" /> 

    <title>CSSeasy.com example page</title> 
</head> 

<body> 
    <div id="header"></div> 

    <div id="content"></div> 

    <div id="ltsidebar"></div> 

    <div id="rtsidebar"> 
    <div id="footer"></div> 
    </div> 
</body> 
</html>

CSS

body 
{ 
    width:1400px; 
} 

#header 
{ 
    background-color:#666; 
    height:150px; 
    margin-left:250px; 
    width:750px; 
} 

#content 
{ 
    background-color:#666; 
    height:auto!important; 
    margin-bottom:20px; 
    margin-left:250px; 
    margin-top:20px; 
    min-height:500px; 
    width:750px; 
} 

#footer 
{ 
    background-color:#666; 
    height:100px; 
    margin-left:250px; 
    margin-top:0; 
    width:750px; 
} 

#ltsidebar 
{ 
    background-color:#666; 
    float:left; 
    height:300px; 
    margin-bottom:20px; 
    margin-top:-500px; 
    width:200px; 
} 

#rtsidebar 
{ 
    background-color:#666; 
    float:right; 
    height:300px; 
    margin-bottom:20px; 
    margin-right:160px; 
    margin-top:-500px; 
    width:200px; 
}

я был в состоянии добавить одну врезку всплывал влево. Но когда я сделал еще один div для правой боковой панели и увеличил ширину тела с 960 пикселей до 1400 пикселей, я вижу, что нижняя панель справа. Зачем? Я хочу, чтобы нижняя панель была только внизу. Поэтому мой вопрос: почему нижний колонтитул двигался вправо? И для чего это решение?

источник

2013-04-22 mr-karan

Можете ли вы сделать [скрипку] (http://jsfiddle.net)? Не определяйте ширину 'body' в px. – Mooseman

Перемещение нижнего колонтитула снаружи правой боковой панели, кажется, исправить, но я не уверен, что понял вашу проблему. Во всяком случае, вот скрипка с вашим кодом (нижний колонтитул выведен из боковой панели): http://jsfiddle.net/E3SMb/ Используйте его в своем вопросе, чтобы помочь людям понять проблему. – cernunnos

Да, это я просил. Спасибо за решение –

Если вы используете элементы float, вы должны очистить это плавающее.

HTML КОД

<div id="header"></div> 
    <div class="wrapper"> 
     <div id="ltsidebar"></div> 
     <div id="content"></div>  
     <div id="rtsidebar"> 
    </div> 
    <div id="footer"></div>

CSS КОД

body 
{ 
    width:1400px; 
} 

#header 
{ 
    background-color:#666; 
    height:150px; 
    margin: 0 auto; 
    width:750px; 
} 

#content 
{ 
    background-color:#666; 
    height:auto!important; 
    margin: 20px 125px; 
    min-height:500px; 
    width:750px; 
    float: left; 
} 

#footer 
{ 
    background-color:#666; 
    height:100px; 
    margin: 0 auto; 
    width:750px; 
    clear: both; 
} 

#ltsidebar 
{ 
    float:left; 
    width:200px; 
    height:300px; 
    background-color:#666; 
} 

#rtsidebar 
{ 
    float:right; 
    width:200px; 
    height:300px; 
    margin-bottom:20px; 
    background-color:#666; 
}

DEMO

http://jsfiddle.net/SmXKj/2/

источник

2013-04-22 12:38:19

Спасибо :) Хотя я никогда не понимал должным образом, как работает четкое свойство. Любой хороший учебник? –

Вы можете помочь мне в этом http://stackoverflow.com/questions/23435681/unable-to-specify-css-position-fixed –

Попробуйте это, чтобы сохранить колонтитул в нижней части:

<div id="header"></div> 

    <div id="content"></div> 

    <div id="ltsidebar"></div> 

    <div id="rtsidebar"> 

    </div> 
    <div id="footer"></div>

Я переехал колонтитул Дива раздел из rtsidebar и поместил его под rtsidebar.

источник

2013-04-22 11:58:46 web2008

Спасибо. Это сработало :) –

Проблема размещения CSS. Не удалось добавить вторую боковую панель

ответ

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