Jump to content
  • 0

Высота div


Sever87
 Share

Question

Здравствуйте. Помогите, пожалуйста, решить такую проблему. Высота правого divа не растягивается под высоту рисунка в н?м. Т.е. если текст будет не слишком длинным, то рисунок вылезет за пределы divа, т.к. его высота divа зависит только от объ?ма текста. Как это можно исправить?

<html>
<head>
<title>Document</title>
<style type="text/css">
#menu{
float:left;
background-color:#6699FF;
width:100px;
}
#content {
background: #e3e8cc;
margin-left: 110px;

}
</style>
</head>
<body>
<div id="menu">
Ссылка 1

Ссылка 2

Ссылка 3

Ссылка 4

</div>

<div id="content">
<img src="images/1.jpg" align="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
liguam erat volutpat.
</div>

</body>
</html>

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Большое спасибо!

Но почему-то работает только в Opera, а в IE7 нет :)

Добавьте доктайп, а в #content свойство height:100%;. Без доктайпа скорее всего прид?тся блок #content вкладывать в ещ? один блок:

<div>
<div id="content">
...
</div>
</div>

Если будете использовать overflow, посмотрите как ваша в?рстка будет выглядеть в Firefox. В н?м работа этого свойства несколько отличается от Оперы и IE.

Link to comment
Share on other sites

  • 0
height может быть а не hight?

ну так это даст фиксированную высоту, а мне это не нужно

Это даст фиксированную минимальную высоту, а если текста больше то див растянется

Этот способ имеет один недостаток. Возможна ситуация, когда картинки в блоках различного размера, например:

<div>
<img style="height:50px;float:left" />
Некая строка текста
</div>
<div>
<img style="height:100px;float:left" />
Ещ? одна строка текста
</div>

Какой здесь задать min-height? Если min-height будет равняться 50px, то во втором блоке изображение будет вылезать за пределы самого блока. Если же сделать наоборот 100px, то в первом блоке под изображением появится лишнее пустое пространство. Устанавливать каждому блоку отдельный min-height не рационально. Так что в таком варианте данный способ неприемлем, в других случаях - вполне.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy