Лучший способ структурирования моего желаемого, простого макета HTML

Question

На изображении ниже показана простая структура, на которую я надеюсь выполнить. Проблема, с которой я сталкиваюсь, заключается в том, что мне интересно, какой лучший способ структурировать вторую строку - я хочу иметь цвет фона, охватывающий всю ширину страницы, но я хочу разбить эту строку на два столбца, которые находятся в центре документа, и которые останутся в центре, а вы измените размер веб-страницы. Как я могу это сделать?

Я предполагаю, что я смогу затем нанести на изображение маржу.

Вот моя попытка до сих пор:

<div id="wrapper"> 
     <div id="logo"> 
      <img src="webpageLogo.png" alt="imageOfLogo" width="125" height="125"/> 
     </div> 
     <div id="twoCol"> 
      <div id="left"> 
       <p>TextBox Here.</p> 
      </div> 
      <div id="right"> 
       <img src="images/laptop.png" alt="An image of a laptop" /> 
      </div> 
     </div> 
     <div id="content"> 

</div> 

CSS:

#wrapper 
{ 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
} 

#twoCol 
{ 
    height : 400px; 
    text-align: center; 
    background: red; 
} 

#left 
{ 
    float:left; 
    text-align:right; 
} 

#right 
{ 
    float:right; 
    text-align:left; 
} 

#twoCol{ 
    margin-left:auto; 
    margin-right:auto; 
    } 

Однако вторая строка здесь не отображается, как я хочу, и не изменение размера для меня , Как я могу это исправить ?

Answer 1

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

http://jsfiddle.net/SAYtS/

Вместо оберточной всю страницу в содержащей DIV, сделать каждый раздел страницы по отдельности, а затем добавить общую .page DIV внутри каждого, чтобы установить ширину и центральное выравнивание последовательно в документе. Тогда вы можете нас найти display:inline-block, чтобы получить два столбца. Вы также можете поплавать с двумя div, но вам, вероятно, придется использовать исправление clearfloat (http://www.webtoolkit.info/css-clearfix.html), чтобы предотвратить слияние обертки div.

Answer 2

Я предлагаю вам взглянуть на использование сетки, такой как сетка бутстрапа.

Это делает жизнь намного проще во многих отношениях, чтобы сделать именно то, что вы пытаетесь сделать, плюс он может изменять размер и даже настроить мобильный ..

Возьмите 10-15 минут, чтобы понять, как используйте его, он экономит несколько часов спустя, пытаясь взломать код css, чтобы заставить все работать.

http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-the-grid/

http://www.revillwebdesign.com/twitter-bootstrap-tutorial/