, как «стабилизировать» а ДИВ

Question

У меня есть DIV в правой части страницы и заголовок сверху, например:

Так у меня есть DIV в меню, и я завернул в другом div, устанавливая его для плавания вправо, дополнительно, перед разделом меню div у меня есть верхний div заголовка. То, что я пытаюсь сделать, это сделать еще 2 раздела, один из них должен быть iFrame (не стреляйте в меня),

всякий раз, когда я пытаюсь добавить другие div, либо меню становится поверх них или они просто помещены под конец меню. Я хочу, чтобы это было так:

это часть кода:

<div id="header"> 
    <h1>Pre-Test</h1> 
</div> 


<div id="wrap" style="right: 0;height: 100%; width: 100%; position: absolute; overflow-y: scroll;"> 
     <div id='cssmenu'> 
     <ul> 
     <li class='active'><a href='#'><span>Home</span></a></li> 
     <li class='has-sub'><a href='#'><span>Products</span></a> 
      <ul> 
      <li><a href='#'><span>Product 1</span></a></li> 
      <li><a href='#'><span>Product 2</span></a></li> 
      <li><a href='#'><span>Product 3</span></a></li> 
      </ul> 
     </li> 
    ... 
    </div> 
</div> 
<div class="two_main_frames"> 
    <div class="main_right_frame"> 
     <iframe src="http://www.amazon.com"> 
     </iframe> 
    </div> 
</div> 

и CSS:

.two_main_frames { 
    direction: rtl; 
    width: 80%; 
    /*height: 100%;*/ 

} 

.main_right_frame { 
    width: 50%; 
    height: 100%; 
    overflow-y: scroll; 
    font-size: 14px; 
    float: right; 
    direction: rtl; 
    clear: both; 
} 

Вы можете проверить код здесь: http://jsfiddle.net/xQgSm/124/

ps: Я не знаю, имеет ли это какое-либо отношение к этому, но когда я открываю он в мобильном телефоне показывает, что он довольно запутанный. есть ли способ исправить это? спасибо.

Answer 1

Для перепутанного мобильного дисплея это b/c, вы не закодировали свой сайт как responsive. Просто, используя рамки CSS, такие как bootstrap или HTML5 Boilerplate, вы позаботитесь об этом.

Answer 2

следующих правила CSS плавучих элемент должны прийти первые в DOM дереве:

<div class="header"></div> 
<div class="content"> 
    <div class="menu"></div> 
    <div class="iframe"></div> 
    <div class="anything-else"></div> 
</div> 

Не имеет значения, если вы хотите, чтобы меню ФЛОТА влево или вправо. Для Вашего макета это будет что-то вроде this fiddle:

HTML:

<div class="header">Header</div> 
<div class="content"> 
    <div class="menu">Menu</div> 
    <div class="iframe">Iframe</div> 
    <div class="anything-else">All the rest content</div> 
</div> 

CSS: требуется

.header { 
    height: 200px; 
    background: #000; 
    color: #fff; 
} 

.content { 
    overflow: auto; 
} 

.menu { 
    float: right; 
    background: lime; 
    width: 33vw; 
    height: 300px; 
} 

.iframe { 
    float: right; 
    background: red; 
    width: 33vw; 
    height: 300px; 
} 

.anything-else { 
    float: none; /* we dont want to float last div */ 
    background: lightblue; 
    width: auto; 
    height: 300px; 
} 

Нет JavaScript тег :)