Выравнивание 2 div бок о бок

У меня проблема с получением двух разделов для выравнивания бок о бок. Из того, что я понимаю, использование «float: left» должно это сделать, но это не так - divs появляются друг на друга. Я, хотя это может быть браузер, но я пробовал его в FF, Opera и IE, и результат был таким же.Выравнивание 2 div бок о бок

вот мой код

<head> 
    <style> 
     div.container{ 
      position: relative; 
      width:800px; 
      height: 1000px; 
      background-color: red; 
      overflow: hidden; 
     } 

     div.banner{ 
      position: relative; 
      align:left; 
      width: 800px; 
      height: 100px; 
      float:left; 
      background-color: blue; 
      clear:both; 
     } 
     div.navBar{ 
      position: absolute; 
      width: 200px; 
      height: 300px; 
      float:left; 
      background-color: yellow; 
      clear: left; 
     } 

     div.content{ 
      position: absolute: 
      width: auto; 
      height: auto; 
      float:left; 
      background-color: orange; 
      clear: right; 
     } 
    </style> 
</head> 

<body> 
    <div name="banner" class="banner"> 
     This will be the banner 
    </div> 

    <div name="container" class="container"> 
     <div name="navBar" class="navBar"> 
      This will be the navbar 
     </div> 

     <div name="content" class="content"> 
      This will be the content 
     </div> 

    </div> 
</body>

Все дивы разные цвета, так его легче увидеть, что будет идти туда, где.

источник

2012-02-19 user1219387

, которые дивы появляются на верхней части друг друга? Какие из них вам нужны бок о бок? – mergesort

Хорошо работает здесь http://jsfiddle.net/7HDtU/ ли вы ограничили тело или окно браузера шириной менее 1000 пикселей? Это может привести к тому, что они будут выглядеть сложными, а не бок о бок? – JaredMcAteer

у вас есть ошибка на 'div.content {position: absolute: ...'. Это должно быть ';' вместо ':' –

position:absolute - это то, что заставляет их пересекаться.

Удалите абсолютное позиционирование, и оно должно работать нормально.

Смотрите здесь в действии: http://jsfiddle.net/5ULsG/

источник

2012-02-19 15:58:13 Nirmal

Вот полный макет, включая колонтитула, который, скорее всего, вы будете нуждаться. И да, абсолютно не беспорядок. :)

<div name="banner" class="banner"> 
This will be the banner 
</div> 

<div name="container" class="container"> 
<div name="navBar" class="navBar"> 
    This will be the navbar 
</div> 

<div name="content" class="content"> 
    This will be the content 
    </div> 
    <div name="footer" class="footer"> 
    Footer 
    </div>

 div.container{ 
     width:800px; 
     height: 1000px; 
     background-color: red; 
    } 

    div.banner{ 
     width: 800px; 
     height: 100px; 
     background-color: blue; 
    } 
    div.navBar{ 
     float:left; 
     width: 200px; 
     height: 300px; 
     background-color: yellow; 
    } 

    div.content{      
     float:left; 
     background-color: orange; 
    } 
    div.footer{      
     clear:both; 
     background-color: blueviolet; 
    }

http://jsfiddle.net/L4Zjh/1/

источник

2012-02-19 18:21:00

Выравнивание 2 div бок о бок

ответ

Смежные вопросы