Добрый день!
Что-то я совсем не могу вкурить как сделать следующее:
Блоки 2,3: минимальная высота 1500px свободное пространство междублоком и соседними элементами включая границы браузера 100px.Максимальная ширина - 600px. Положение блока по центру.Если ширина браузера позволяет, необходимо разместить эти блоки в две колонки
Есть следующий код:
<body>
<div class = "first"><p>#1</p></div>
<div class = "wrapper">
<div class = "second"><p>#2</p></div>
<div class = "third"><p>#3</p></div>
</div>
<div class = "fourth"><p>#4</p></div>
</body>
</html>
И CSS, с которым получается сделать центровку двух блоков рядом на большом экране:
body {
width: 100%;
min-width: 240px;
font-size: 100%;
}
.first {
min-height: 100px;
}
.first,
.wrapper .second,
.wrapper .third,
.fourth {
background: #ccc;
border: 2px solid #333;
}
.first p,
.wrapper .second p,
.wrapper .third p,
.fourth p {
font-size: 2em;
color: #222;
line-height: 3em;
margin-left: 10px;
}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1640px;
}
.wrapper .second,
.wrapper .third {
float: left;
min-height: 1500px;
width: 100%;
max-width: 600px;
margin: 100px;
}
.fourth {
clear: both;
}
На маленьком экране помещается один блок, но он не центруется.
Уже пробовал inline-block, float: left и float у каждого блока в разные стороны. Не могу понять как центрировать. Для margin: 0 auto нужно указать железную ширину...
