Трехколоночная шапка, резиновый блок + вертикальное выравнивание

gangsta15 · May 19, 2011

Здравствуйте, тут впервые. Собственно вопрос - делаю 3х колоночную шапку т.е. 3 блока помещены в фиксированный блок (980px), два из них - те что по бокам фиксированы, тот что в середине - растягивается на всю оставшуюся ширину, и к тому же ему задается свойство display: table-cell, чтобы можно было сделать вертикальное выравнивание по центру. Но дело в том что display: table-cell и float: left вместе работать не будут, просьба помочь как сделать чтобы было и float: left и вертикальное выравнивание внутри блока? Только чтобы было наименее извращенней) Ниже прикрепил наглядный пример.

HTML:

<div id="header">
	<div class="header_left"> </div>
		<div class="header_middle">
			Middle text
		</div>
	<div class="header_right"> </div>
</div>

CSS:

#header {
	height: 99px;
	background-color: red;
}

.header_left {
	background-color: orange;
	height: 99px;
	width: 20px;
	float: left;
}

.header_middle {
	background-color: #70b5f6;
	height: 99px;
	width: 940px;
	display: table-cell;
	vertical-align: middle;
}

.header_right {
	background-color: orange;
	height: 99px;
	width: 20px;
	float: right;
}

P.S. Но либо нет вертикального выравнивания, либо правый блок съезжает вниз (т.е. он не обтекает центральный). Может в центральном сделать еще один, а уже ему задать table-cell?

Edited May 19, 2011 by gangsta15

psywalker · May 19, 2011

Сделай шапку на display:table;, а колонкам всем раздай table-cell и выравнивание.

buddah · May 19, 2011

Либо если совсем без намеков на таблицы, то сделай так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
html, body{
	margin:0;
	padding:0;
}
#header {

		width:980px;
        height: 99px;
        background-color: red;
		padding:0; 
		margin: 0 auto;
}

.header_left {
		padding:0; 
		margin: 0;
        background-color: orange;
        height: 99px;
        width: 20px;
        float: left;
		padding:0; 
		margin: 0;

}

.header_middle {
        background-color: #70b5f6;
        height: 99px;
        width: 940px;
        float:left;
        vertical-align: middle;
		padding:0; 
		margin: 0;
}

.header_right {
padding:0; 
margin: 0;
        background-color: orange;
        height: 99px;
        width: 20px;
        float: right;
}
.header_middle p{
text-align: center;
}
</style>
</head>
<body>
<div id="header">
        <div class="header_left">ewfsfsfsf</div>
                <div class="header_middle">
                        <p>Middle text</p>
                </div>
        <div class="header_right">sdfsdfsdf</div>
</div>
</body> 
</html>

И выровняй нужный элемент по вертикали (в данном случае p)отрицательным margin-top

gangsta15 · May 19, 2011

Сделай шапку на display:table;, а колонкам всем раздай table-cell и выравнивание.

Воспользовался этим решением, помогло.

Либо если совсем без намеков на таблицы, то сделай так:
...
И выровняй нужный элемент по вертикали (в данном случае p)отрицательным margin-top

Не совсем понял как по вертикали так выровнять, черкни пожалуйста пример)

P.S. Благодарю за помощь.

psywalker · May 19, 2011

Сделай шапку на display:table;, а колонкам всем раздай table-cell и выравнивание.
Воспользовался этим решением, помогло.
Либо если совсем без намеков на таблицы, то сделай так:
...
И выровняй нужный элемент по вертикали (в данном случае p)отрицательным margin-top
Не совсем понял как по вертикали так выровнять, черкни пожалуйста пример)
P.S. Благодарю за помощь.

А если помогло первое, то зачем второе?

Serlutin · May 19, 2011

А если помогло первое, то зачем второе?

Наверное, потому что table-cell не работает в IE7.

Можно поинтересоваться, для чего вам вертикальное выравнивание?

Edited May 19, 2011 by Serlutin

gangsta15 · May 20, 2011

А если помогло первое, то зачем второе?

Чтобы знать два вида решения.

Можно поинтересоваться, для чего вам вертикальное выравнивание?

Требуется выравнивание логотипа по вертикали, по середине, т.к. он возможно будет изменяться, да и размеры по высоте будут разными.

Еще прошу помочь, немного не по теме. В блоке wrapper имеется три блока по вертикали в следующем порядке: header, content, footer. У header и footer, высота фиксированная, нужно чтобы блок content растягивался на всю оставшуюся высоту. Подскажите как это реализовать или тыкните на статью, не могу найти хорошого решения) Ниже картинка для наглядности.

Gaspode · May 20, 2011

#wrapper { position: relative; }
#content {
   position: absolute;
   top: высота_шапки;
   bottom: высота_подвала;
   width: 100%;
}

Только ИЕ 6 это не схавает.

psywalker · May 20, 2011

#wrapper { position: relative; }
#content {
   position: absolute;
   top: высота_шапки;
   bottom: высота_подвала;
   width: 100%;
}

Только ИЕ 6 это не схавает.

Да, ему нежен экспрешан.

gangsta15 · May 20, 2011

Помогло но: у меня в одну линейку стоят три блока, как всех их растянуть на оставшуюся высоту причем чтобы они обтекали друг друга? Думаю тут что то с padding/margin надо сделать, но пока не получается. Ниже пример накидал, подскажите)

Извиняюсь) Хватило простого margin-left для второго и третьего блока.

Edited May 20, 2011 by gangsta15

psywalker · May 20, 2011

Таблицей делай. Слишком уже много хотелок и невыгодно на слоях лепить.

gangsta15 · May 20, 2011

Спасибо всем за помощь, всё получилось и работает.

Sign In

Трехколоночная шапка, резиновый блок + вертикальное выравнивание

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information