Исчезает div в браузере Chrome
Добрый вечер.
При уменьшении окна браузера chrome, .sidebar (на определенном этапе) перестает отображаться. В firefox все ок(.sidebar не исчезает) и при уменьшении окна появляется горизонтальный скролл. Как добиться того же и для chrome ?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body {
margin: 0;
color: #000;
background: #CCC;
}
.container {
float: left;
max-width: 750px;
min-width: 550px;
margin-right: 250px;
background: #FFF;
}
.sidebar {
float:left;
margin-left: -250px;
width: 250px;
background-color: #444;
color: #FFF;
}
</style>
</head>
<body>
<div class="container">Небольшой размер и простота их грамматик, а также возможность изучать полное множество высказываний, порожденных на таких языках, делают их идеальными модельными объектами для тестирования моделей усвоения языка.</div>
<div class="sidebar">Но языки поисковых запросов отошли от родительских и обзавелись наборами идиом</div>
</body>
</html>
|
margin-left и margin-right вам не нужны :)
.container {
float: left;
max-width: 750px;
min-width: 550px;
background: #FFF;
}
.sidebar {
float:left;
width: 250px;
background-color: #444;
color: #FFF;
}
|
ну или уберите min-width: 550px; в контейнере.
|
На данный момент у тебя блок падает вниз и уезжает на -250 влево, из-за этого ты его и не видишь.
Убери "margin-left: -250px;" и никогда так не делай) Тебе нужно задать конкретный размер блоков, или в пикселях, или в процентах(если хочешь что бы был резиновый) и тогда все будет ровно. или сделай левый блок без float, а правый поставь float: right; и поменяй их местами что бы тот у кого стоит float был выше в дереве. |
| Часовой пояс GMT +3, время: 08:37. |