Главный столбец появляется, когда заканчивается столбец боковой панели

Question

Я говорю об этом, и я знаю, что это просто.

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

Тогда есть основной раздел контента. Существует изображение и h1, которые выглядят так, как вы ожидали бы против div заголовка, но затем появляется большой пробел до навигации (во вложенном div). Навигация в основном содержимом div, но верхняя часть этого div всегда выравнивается с нижней частью содержимого боковой панели.

Я пробовал смеси прозрачного: левого и того же, и плавающего, и еще чего-то. Если внутри html я перемещаю div на боковой панели ниже основного содержимого div, то основное содержимое не имеет пробела, но боковая панель имеет большой верхний зазор и появляется на одном уровне с нижней границей, где заканчивается основной контент.

Что мне здесь не хватает, спасибо заранее!

Answer 1

Вы устанавливаете любые ширины (или отступы, границы, границы), которые могут сделать ваш проблематичный div слишком широким, чтобы он поместился?

Помните, что если вы делаете что-то вроде:

width: 100%; 
border: 1px solid; 

Тогда ваш элемент будет занимать 100% ширины + 2 пикселя.

Answer 2

Похоже, что у вас есть боковая панель, начинающаяся сначала в исходном порядке.

Если у вас есть два divs (sidebar, main), которые перемещаются в разных направлениях, то посмотрите на ширину, доступную для них. Уменьшите ширину одного div (вы должны иметь ширину, установленную на ваших поплавках), пока их ширина комбинирования, включая отступы, границы, границы, не будет в доступном пространстве. (Я буду использовать ширину только в моем примере для краткости).

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

<div id="container"> 
<div id="header">head</div> 
<div id="sidebar">side</div> 
<div id="mainContent">main</div> 
</div> 

Ширина #sidebar & #mainContent слишком широкий (#mainContent получает сместившимися):

#container{ 
**width:950px;** 
margin:0 auto; 
background:blue; 
} 

#mainContent{ 
float:right; 
**width:651px;** 
background:red; 

} 

#sidebar{ 
float:left; 
**width:301px;** 
background:green; 
} 

Ширина #sidebar & #mainContent подходят внутри контейнера:

#container{ 
**width:950px;** 
margin:0 auto; 
background:blue; 
} 

#mainContent{ 
float:right; 
**width:650px;** 
background:red; 
} 

#sidebar{ 
float:left; 
**width:300px;** 
background:green; 
} 

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

Answer 3

Имеет ли ваш h1 или img верхний предел? Он будет торчать из верхней части mainContent div и выталкивать его.