блок div смещается вниз при заполнении соседнего div`a

DarkEnot · April 25, 2017

Доброго времени суток, форумчане. Пытаюсь сделать 3 div`a в ряд, вроде всё хорошо, но когда начинаю заполнять один из них текстом, то 2 остальных смещаются вниз на одну строку (скрин прилагается).
Так же, еще одна проблема. Ткните носом, что почитать, чтобы разобраться с размещением элементов на странице. Какие конкретно параметры за это отвечают? Мне нужно сделать меню поверх картинки, но у меня получается, что меню внизу картинки (хотя всё в одном div`e). Заранее спасибо
HTML:

Скрытый текст


<!DOCTYPE html>
<html>
<head>
	<meta charset="windows-1251">
	<title>Скотч с логотипом от производителя.</title>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div class="header">
		<div class="l_head">
			<img src="img/logo.png">
		</div>
		<div class="r_head">
			<div class="top_menu_index">
			</div>
			<img src="img/fon_menu1.png">
		</div>
	</div>
	<div class="side_1">
		<div class="l_menu">
			<b>строка 1</b> </br>
			<a href="">строка 2</a>
		</div>
		<div class="content">
			Контент
		</div>
		<div class="r_menu">
			Правое меню
		</div>
	</div>
	<div class="footer">
		<center>FOOTER</center>
	</div>
</body>
</html>

CSS:

Скрытый текст


body{
	background-color: #eeeeee;
}
.header{
	height: 168px;
	margin-bottom: 1%;
	border: 1px solid black;
	width: 100%;
}
.l_head{
	display: inline-block;
	text-align: left;
}
.r_head{
	display: inline-block;
	border: 1px solid black;
}
.logo{
}
.top_menu_index{
	display: inline-block;
}
.top_menu{
}

.side_1{
	text-align: center;
	width: 100%;
}

.l_menu{
	text-align: center;
	background: #BCC9CD;
	display: inline-block;
	border: 3px double black;
	width: 20%;
	min-width: 150px;
	height: 400px;
}

.content{
	text-align: left;
	background: #BCC9CD;
	display: inline-block;
	border: 3px double black;
	width: 55%;
	min-width: 150px;
	height: 400px;
}

.r_menu{
	text-align: left;
	background: #BCC9CD;
	display: inline-block;
	border: 3px double black;
	width: 20%;
	min-width: 150px;
	height: 400px;
}

.footer{
	margin-top:1%;
	border: 1px solid black;
	width: 100%;
	height: 100px;
	background: #71AFC0;
}

Edited April 25, 2017 by DarkEnot

klierik · April 25, 2017

Выложи в jsfiddle

DarkEnot · April 25, 2017

https://jsfiddle.net/e37sb7mn/

19 минут назад, klierik сказал:

Выложи в jsfiddle

klierik · April 25, 2017

https://jsfiddle.net/e37sb7mn/4/

DarkEnot · April 25, 2017

Только что, klierik сказал:

https://jsfiddle.net/e37sb7mn/4/

А в чём была ошибка? Если не сложно.
Кстати, спасибо за быструю помощь

klierik · April 25, 2017

Добавлено:

.l_menu,
.content,
.r_menu {
  vertical-align: top;
}

DarkEnot · April 25, 2017

Спасибо за помощь, проблема решена.

Ролан · June 12, 2017

Не думаю что лучшая практика верстать inline block'ами

klierik · June 13, 2017

Порой надо не лучшая, а 100% работающая кроссбраузерно.

Ситуация какая:
Классно верстать гридами, но их не все браузеры поддерживают.
Классно верстать флексами, но их поддерживают только современные браузеры (утрирую, холивар не требуется)

Но можно железобетонно верстать таблицами, флотами и инлайн-блоками и код будет работать везде одинаково (утрирую, надо учесть кроссбраузерность, но будет работать).

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

Попробуй симулировать то что он умеет другими свойствами... И скорее всего выйдешь на реализацию через JS со всеми вытекающими

Sign In

блок div смещается вниз при заполнении соседнего div`a

Question

DarkEnot

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

DarkEnot

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

DarkEnot

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

DarkEnot

Link to comment

Share on other sites

Ролан

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information