Обтекание блоков - как выровнять высоту блока-контейнера?

samorealization · February 28, 2009

Всем здравствуйте.

Есть такой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
 <title>Test2</title>
 <style>
  div, h1, h2, h3, p { padding: 0; margin: 0; }
  h1, h2, h3 { padding-top: 9px; padding-bottom: 3px; }

 #container { 
  width: 980px; 
  margin: 0 auto; 
  border: 1px solid #f00;   
  background: #ccf;
 }
 </style>
</head>
<body>
<div id="container">
 <div style="border: 1px solid #000;">
   <div style="width: 500px; float: left; border: 1px solid #000;">
	Главная<br>О компании<br>Услуги
   </div>
   <div style="margin-left: 500px; text-align: right; ">
	Copyright 2009
   </div>
 </div>
<!--
 <div style="clear: both; background: #fee; "></div>
 -->
</div>

</body>
</html>

Как я понял высота блока-контейнера определяется высотой правого блока (второго блока).

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

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

Спасибо.

rash · February 28, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Test2</title>
<style>
  div, h1, h2, h3, p { padding: 0; margin: 0; }
  h1, h2, h3 { padding-top: 9px; padding-bottom: 3px; }

#container { 
  width: 980px; 
  margin: 0 auto; 
  border: 1px solid #f00;   
  background: #ccf;
}
</style>
</head>
<body>
<div id="container">
<div style="border: 1px solid #000; overflow: hidden;">
   <div style="width: 500px; float: left; border: 1px solid #000;">
	Главная<br>О компании<br>Услуги
   </div>
   <div style="margin-left: 500px; text-align: right; ">
	Copyright 2009
   </div>
</div>
<!--
<div style="clear: both; background: #fee; "></div>
-->
</div>

</body>
</html>

?

samorealization · February 28, 2009

Проблемы в:

FF 3.0.4

Opera 9.63

Все хорошо в:

IE 7

rash · February 28, 2009

Проверено в FF 3.06 и Opera 9.63

samorealization · February 28, 2009

Иду на ответственный шаг...

http://samorealization.ru/ (сделал скриншоты, выложил).

Что не так???

Vlad · February 28, 2009

clear не туда вставил.

Надо

</div>

</div>

samorealization · March 2, 2009

Вопрос закрыт.

Спасибо.

Sign In

Обтекание блоков - как выровнять высоту блока-контейнера?

Question

samorealization

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

rash

Link to comment

Share on other sites

samorealization

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

samorealization

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

samorealization

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information