Позиционирование в css3

[ottawa1]

Здравствуйте.Подскажите.Создал объекты с закругленными углами.Один с фиксированной высотой и шириной внутри другого у которого ширина и высота 90%.Как этот внутренний объект двигать? И как внутрь еще добавить объекты.В конечном итоге это будет страница сайта большой объект у которого 90% ширина и высота и несколько маленьких меню и содержание в которых будут размещаться.Код

<style type="text/css">
div {
margin: 0 auto;
}
.bord
{
background: #EBECDF; 
width:90%; 
height:90%; 
border:2px solid #B0B384; 
border-radius:30px; 
-webkit-border-radius:30px; 
-moz-border-radius:30px;
}
.mord
{
background: #EBECDF; 
width:600px; 
height:400px; 
border:2px solid #B0B384; 
border-radius:30px; 
-webkit-border-radius:30px; 
-moz-border-radius:30px;
}
</style>
<div class="bord">
<div class="mord">
</div>
</div>

изображение

[wwt]

Можно с помощью position:absolute и top,right,bottom,left.

Можно с помощью float и margin.

[ottawa1]

Получилось.

<style type="text/css">
.bord
{
margin: 0 auto;
background: #EBECDF; 
width:90%; 
height:90%; 
border:2px solid #B0B384; 
border-radius:20px; 
-webkit-border-radius:20px; 
-moz-border-radius:20px;
}
.mord
{
position:relative; /* относительное */
top:8px;  
left: 10px; /* Положение от правого края */
background: #EBECDF; 
width:240px; 
height:30px; 
border:2px solid #B0B384; 
border-radius:10px; 
-webkit-border-radius:10px; 
-moz-border-radius:10px;
}
.maxc
{
position:relative; /* относительное */
top:18px;  
left:-3px; /* Положение от правого края */
background: #EBECDF; 
width:240px; 
height:200px; 
border:2px solid #B0B384; 
border-radius:10px; 
-webkit-border-radius:10px; 
-moz-border-radius:10px;
}
</style>
<div class="bord">

<div class="mord">
второй
<div class="maxc">
третий
</div>
</div>
</div>

во всех браузерах нормально.Только в IE7 нет то что вместо закругленных прямоугольники это понятно.Но есть еще искажения.Может какой хак есть для IE7

[Radiocity]

Посмотрите здесь: http://css3pie.com/

Но, если честно, это еще те костыли

Edited September 6, 2012 by Radiocity

[ottawa1]

Приветствую.Для IE- создам отдельную страничку,если кто зайдет с IE - получит страницу где в <table> увидит квадраты.Пока что я поместил два блока слева это заголовок меню и меню.Теперь если у кого есть желание и время подскажите как справа разместить резиновый блок в который я помещу контент.Приведу код и рисунок что у меня получилось

<style type="text/css">
.bord
{
margin: 10px auto;
background: #FFFFFF;
width:90%;
height:90%;
border:2px solid #B0B384;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.mord
{
position:relative; /* относительное */
top:8px;
left: 10px; /* Положение от правого края */
background: #8E925A;
width:258px;
height:35px;
border:2px solid #B0B384;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
font-weight:600;
font-size:18px;
line-height:35px;
padding-left: 10px;
}
.maxc
{
position:relative; /* относительное */
top:10px;
left:-10px; /* Положение от правого края */
background: #E5E6D6;
width:265px;
height:222px;
border:2px solid #B0B384;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
text-align:left;
}
.menu
{
font-family:arial,sans-serif;
width:260px;
height:150px;
position:relative;
margin:0;
font-size:11px;
left:10px;
}
.menu ul li a, .menu ul li a:visited
{
display:block;
text-decoration:none;
color:#705e24;
width:254px;
height:43px;
border:1px solid #c4c7a3 ;
border-width:1px 1px 0 0;
background:#e5e6d6;
line-height:43px;
font-size:16px;
font-weight:600;
}
.menu ul
{
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li
{
float:left;
margin-right:1px;
position:relative;
}
.menu ul li ul
{
display: none;
}
.menu ul li:hover a
{
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul
{
display:block;
position:absolute;
top:0;
left:255px;
width:105px;
}
.menu ul li:hover ul li a.hide
{
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover a.hide
{
width:250px;
}
.menu ul li:hover ul li ul
{
display: none;
}
.menu ul li:hover ul li a
{
display:block;
background:#b3ab79;
color:#000;
width:150px;
}
.menu ul li:hover ul li a:hover
{
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul
{
display:block;
position:absolute;
left:151px; top:0;
color:#000;
}
.menu ul li:hover ul li:hover ul li a
{
display:block;
width:200px;
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul li a:hover
{background:#bd8d5e;
color:#fff;
}
</style>
<div class="bord">
<div class="mord">
<img src="075.gif">  Начинай отсюда
<div class="maxc">
<div class="menu">
<ul>
<li><a class="hide" href="#">Главная</a>
</li>
<li><a class="hide" href="#">Максим</a>
<ul>
<li><a href="#" title="Описание">№ 4 2012 год</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Поздравления</a>
<ul>
<li><a href="#" title="Описание">№ 2 2012 год</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Мир приключений</a>
<ul>
<li><a href="#" title="Описание">№ 23 2001 год</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Контакты</a>
</li>
</ul>
<div class="content">
</div>
</div>
</div>
</div>
</div>

Рисунок

Edited September 10, 2012 by ottawa1

[ottawa1]

Приветствую.Справился самостоятельно.Как говорил Остап Бендер:"Спасение утопающих дело рук самих утопающих".Выкладываю код,надеюсь кому нибудь пригодится.

<style type="text/css">
.bord
{
position:relative;
margin: 10px auto;
background: #FFFFFF;
width:90%;
height:90%;
border:2px solid #B0B384;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.content
{
position:absolute; 
top:10px;
left: 290px;
right:10px;
background: #EBECDF;
height:96%;
border:2px solid #B0B384;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
font-weight:600;
font-size:18px;
line-height:35px;
padding-left: 10px;
}
.mord
{
position:relative; 
top:-35px;
left: -290px; 
background: #8E925A;
width:258px;
height:35px;
border:2px solid #B0B384;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
font-weight:600;
font-size:18px;
line-height:35px;
padding-left: 10px;
}
.maxc
{
position:relative; 
top:10px;
left:-10px; 
background: #E5E6D6;
width:265px;
height:222px;
border:2px solid #B0B384;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
text-align:left;
}
.menu
{
font-family:arial,sans-serif;
width:260px;
height:150px;
position:relative;
margin:0;
font-size:11px;
left:10px;
}
.menu ul li a, .menu ul li a:visited
{
display:block;
text-decoration:none;
color:#705e24;
width:254px;
height:43px;
border:1px solid #c4c7a3 ;
border-width:1px 1px 0 0;
background:#e5e6d6;
line-height:43px;
font-size:16px;
font-weight:600;
}
.menu ul
{
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li
{
float:left;
margin-right:1px;
position:relative;
}
.menu ul li ul
{
display: none;
}
.menu ul li:hover a
{
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul
{
display:block;
position:absolute;
top:0;
left:255px;
width:105px;
}
.menu ul li:hover ul li a.hide
{
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover a.hide
{
width:250px;
}
.menu ul li:hover ul li ul
{
display: none;
}
.menu ul li:hover ul li a
{
display:block;
background:#b3ab79;
color:#000;
width:150px;
}
.menu ul li:hover ul li a:hover
{
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul
{
display:block;
position:absolute;
left:151px; top:0;
color:#000;
}
.menu ul li:hover ul li:hover ul li a
{
display:block;
width:200px;
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul li a:hover
{background:#bd8d5e;
color:#fff;
}
</style>
<div class="bord">
<div class="content">
контент
<div class="mord">
<img src='http://mysite.ru/images/075.gif'>  Начинай отсюда
<div class="maxc">
<div class="menu">
<ul>
<li><a class="hide" href="#">Главная</a>
</li>
<li><a class="hide" href="#">Максим</a>
<ul>
<li><a href="#" title="Описание">№ 4 2012 год</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Екатерина</a>
<ul>
<li><a href="#" title="Описание">№ 2 2012 год</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Некрасов</a>
<ul>
<li><a href="#" title="Описание">№ 23 2001 год</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Контакты</a>
</li>
</ul>
</div>
</div>
</div>
</div>