Здравствуйте. У меня такой вот вопрос.
Есть два дива:
[code].menuLeft {
background: #2980b9;
padding: 15px;
width: 210px;
margin-top: 5px;
margin-left: 5px;
float: left;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
color: #fff;
}[/code]
и
[code].menuRight {
background: #3498db;
padding: 15px;
width: 1075px;
margin-top: 5px;
margin-right: 5px;
float: right;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
color: #fff;
}[/code]
как вы уже поняли, это два блока, один выводиться слева другой справа.
Вывожу я их просто:
echo '<div class="menuLeft">Левое меню</div>';
echo '<div class="menuRight">Правое меню</div>';
Так вот, мне нужно чтобы был небольшой блок слева, длинный по центру и небольшой справа.
Готов заплатить если сверстаете подобное, добавив под блоки ссылки, оформление дивов ссылки не важно, так как я все равно их изменю.
Важно!
нужно чтоб блоки и ссылки под ними были "резиновые", а именно, если у пользователя монитор меньше - то чтоб блоки не ложились друг на друга или же чтоб не съезжали.
Добавлено 26.07.15 в 21:35:10:
Вот то что есть на данный момент. На шапку внимание не обращаем
пытался. все равно при изменении масштаба съезжает
мне нужно чтоб левый блок был меньше правого
я думал об этом. мне кажется это не лучший вариат
…iKey™…, зайди в майл ру через хром, смотри кода оттуда
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content:after{
clear: both;
}
.content .left{
width: 30%;
float: left;
}
.content .right{
width: 70%;
float: right;
}
.content .menu{
padding: 15px;
margin-top: 5px;
margin-left: 5px;
border-radius: 5px 5px 0 0;
font-weight: bold;
color: #fff;
}
.content .right .menu {
background: #3498db;
}
.content .left .menu {
background: #2980b9;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<div class="menu">asd</div>
</div>
<div class="right">
<div class="menu">das</div>
</div>
</div>
</body>
</html>
==================
http://prntscr.com/7x9tpz без увеличения
http://prntscr.com/7x9u8c с увеличением