В блоке DIV не выравниваются внутренние блоки

@Southerner · Регистрация: 17.08.2010

Author24 — интернет-сервис помощи студентам

Здравствуйте. Схема стандартная: я начинающий WEB-дизайнер, и у меня реальный вопрос, точнее проблема.

Вот таблица стилей

CSS

#header {margin-top:0; height:20%; border:1px solid black;}
#content {margin-top:auto; height:70%; border:1px solid black; }
#footer {margin-top:auto; height:10%; border:1px solid black;}
 
#Head1 { width:20%; height:100%; border:1px solid black;}
#Head2 { margin-left:80%; width:20%; height:100%; border:1px solid black; border-right:0px;}
#Head3 { margin-right:20%; margin-left:20%; width:60%; height:100%; border:1px solid black;}

которая присоединяется к вот этому HTML-файлу:

HTML5

<HTML>
<HEAD>
<TITLE>Site</TITLE>
<META http-equiv="Content-type" content="text/html" charset="windows-1251">
<link href="style.css" type"text/css" rel="stylesheet">
</HEAD>
<BODY>
<div id="Header"> 
    <div id="Head1"></div>
    <div id="Head2"></div>
    <div id="Head3"></div>
</div>
<div id="content"> </div>
 
<div id="Footer"> </div>
 
</BODY>
</HTML>

А теперь собственно проблема: я пытаюсь сделать своего рода каскад из верхней части(Header), Основной(Content) и нижней (Footer). страницу на три части я как бы поделил, но вот поделить блок Header еще на три части не получается, а получается вот так (картинка ниже):
то есть как видно на скрине, все три части хедера располагаются по неведомым мне причинам друг под другом. Прошу вас помочь мне разобраться в этом.

@Crudelis · 21.09.2010, 02:19

CSS

1
2
3

#Head1 { float:left;width:20%; height:100%; border:1px solid black;}
#Head2 { float:left;margin-left:80%; width:20%; height:100%; border:1px solid black; border-right:0px;}
#Head3 {float:left; margin-right:20%; margin-left:20%; width:60%; height:100%; border:1px solid black;}

если я правильно понял то нужно чтоб хедеры шли один за одним, попробуйте изменить код.

@vahagn_9 · 22.09.2010, 11:57

Сообщение от Southerner

Здравствуйте. Схема стандартная: я начинающий WEB-дизайнер, и у меня реальный вопрос, точнее проблема.

Вот таблица стилей

CSS

#header {margin-top:0; height:20%; border:1px solid black;}
#content {margin-top:auto; height:70%; border:1px solid black; }
#footer {margin-top:auto; height:10%; border:1px solid black;}
 
#Head1 { width:20%; height:100%; border:1px solid black;}
#Head2 { margin-left:80%; width:20%; height:100%; border:1px solid black; border-right:0px;}
#Head3 { margin-right:20%; margin-left:20%; width:60%; height:100%; border:1px solid black;}

которая присоединяется к вот этому HTML-файлу:

HTML5

<HTML>
<HEAD>
<TITLE>Site</TITLE>
<META http-equiv="Content-type" content="text/html" charset="windows-1251">
<link href="style.css" type"text/css" rel="stylesheet">
</HEAD>
<BODY>
<div id="Header"> 
    <div id="Head1"></div>
    <div id="Head2"></div>
    <div id="Head3"></div>
</div>
<div id="content"> </div>
 
<div id="Footer"> </div>
 
</BODY>
</HTML>

А теперь собственно проблема: я пытаюсь сделать своего рода каскад из верхней части(Header), Основной(Content) и нижней (Footer). страницу на три части я как бы поделил, но вот поделить блок Header еще на три части не получается, а получается вот так (картинка ниже):
то есть как видно на скрине, все три части хедера располагаются по неведомым мне причинам друг под другом. Прошу вас помочь мне разобраться в этом.

вся проблема в ширине.
попробуи так

HTML5

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vopros</title>
<style type="text/css">
#header 
{
margin-top:0;
height:20%;
border:1px solid black;
}
#content {margin-top:auto;
height:70%;
border:1px solid black;
}
#footer {margin-top:auto; height:10%; border:1px solid black;}
 
#Head1
{ 
width:20%; 
height:100%; 
//border:1px solid black;
background-color:#ff0000;
float:left;
}
#Head2 
{ 
width:60%;
height:100%;
background-color:#00ff00;
//border:1px solid black;
//border-right:0px;
float:left;
}
#Head3
{
width:20%;
background-color:#0000ff;
height:100%;
//border:1px solid black;
float:left;
}
</style>
</head>
 
<body>
    <div id="Header"> 
        <div id="Head1"></div>
        <div id="Head2"></div>
        <div id="Head3"></div>
</div>
<div id="content"> </div>
 
<div id="Footer"> </div>
</body>
</html>

Добавлено через 12 минут
если я правилно пнял ти хочеш чтобы диви стояли рядом.
не забывайте о магинах и бордерах.

@Southerner · 22.09.2010, 17:40 **[ТС]**

vahagn_9,
все сработало, спасибо)

@vahagn_9 · 22.09.2010, 22:05

Сообщение от Southerner

vahagn_9,
все сработало, спасибо)

всегда пожалуйста

@Southerner 0 / 0 / 0 Регистрация: 17.08.2010 Сообщений: 11
	22.09.2010, 17:40 [ТС]	4
	vahagn_9, все сработало, спасибо) 0

@vahagn_9 1 / 1 / 0 Регистрация: 21.09.2010 Сообщений: 14
	22.09.2010, 22:05	5
	Сообщение от Southerner vahagn_9, все сработало, спасибо) всегда пожалуйста 0