Имеется
вот такая страничка.
Нужно, чтобы
красный DIV был 200px, а
зеленый - на всю остальную ширину. Оба DIV в один ряд.
Вот код:
<div class="wrapper">
<div class="content left">
<div>asd
</div>
</div>
<div class="content right">
<div>asd
</div>
</div>
</div>
.wrapper {
text-align: center;
width:100%;
background:blue;
vertical-align:top;
}
.left {
width:200px;
display:block;
background:red;
height:200px;
}
.right {
width:80%;
display:block;
background:lime;
height:200px;
}
@media (min-width: 500px) {
.content {
display: inline-block;
}
}
Он более менее работает, но ширину я в % сам вписал отбалды. Как же сделать, чтобы он на всю ширину растягивался?
Кроме того при сужении браузера до 500px они становятся друг над другом, НО
.left остается 200px а .right опять же остается 80%, а нужно их растянуть во всю ширину.
Я пытался так:
.wrapper {
text-align: center;
width:100%;
background:blue;
vertical-align:top;
}
.left {
width:200px;
display:block;
background:red;
height:200px;
}
.right {
width:80%;
display:block;
background:lime;
height:200px;
}
@media (min-width: 500px) {
.content {
display: inline-block;
}
.left {
width:100%;
}
.right {
width:100%;
}
}
Но тогда 100%-ная ширина принимается почему-то сразу, еще до сужения браузера.
Средний
