Расположение div HTML/CSS

Question

Я пытаюсь организовать макет моей домашней страницы. То, что я хотел бы, это мой div #welcome, чтобы быть центром с четырьмя другими divs, охватывающими обе стороны. 2 & 2. На этом веб-сайте есть хороший пример того, что я снимаю. То, что у меня есть сейчас, - это 5 разделов, работающих и подходящих относительно хорошо, за исключением того, что они не устроены должным образом. Я знаю, что порядок, который я называю divs в HTML, изменит порядок, который они отображают, но когда я его переустанавливаю, они становятся беспорядочными.

Когда у меня есть HTML, как это я получаю один слева от #welcome и три на правой (рис ниже):

<div id = "HomeMain"> 
     <div id = "Entertainment"> 
      <img src="images/Entertainment1.jpg" id="EntSlide" width=185 height=95/> 
     </div> 
     <div id="welcome"> 
      <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p> 
      <div class = "Oldman"></div> 
     </div> 
     <div id = "Community"> 
      <img src="images/Victoria1.jpg" id="ComSlide" width=185 height=95/> 
     </div> 
     <div id = "Events"> 
      <img src="images/Events1.jpg" id="EventSlide" width=185 height=95/> 
     </div> 
     <div id = "Distillery"> 
      <img src="images/Distillery1.jpg" id="DistSlide" width=185 height=95/> 
     </div> 
</div> 

Когда я положил HTML как этот I получить #welcome справа, а остальные четыре на левой (рис ниже)

<div id = "HomeMain"> 
     <div id = "Entertainment"> 
      <img src="images/Entertainment1.jpg" id="EntSlide" width=185 height=95/> 
     </div> 
     <div id = "Community"> 
      <img src="images/Victoria1.jpg" id="ComSlide" width=185 height=95/> 
     </div> 
     <div id="welcome"> 
      <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p> 
      <div class = "Oldman"></div> 
     </div> 
     <div id = "Events"> 
      <img src="images/Events1.jpg" id="EventSlide" width=185 height=95/> 
     </div> 
     <div id = "Distillery"> 
      <img src="images/Distillery1.jpg" id="DistSlide" width=185 height=95/> 
     </div> 

Вот CSS-код

#HomeMain{ 
width: 100%; 
float: left; 
overflow:hidden; 
margin:auto auto; 
padding:10px; 
border-style: groove; 
border-width: 3px; 
border-colour: white; 
border-radius: 5px 5px 5px 5px; 
box-sizing:border-box; 
} 

#Entertainment, #Community, #Events, #Distillery{ 
float: left; 
width: 26%; 
height: 190px; 
margin: 1px; 
border-style: groove; 
border-width: 3px; 
border-colour: white; 
border-radius: 5px 5px 5px 5px; 
box-sizing:border-box; 
} 
#welcome{ 
float: left; 
width:45%; 
border-style: groove; 
border-width: 3px; 
border-color: white; 
border-radius: 5px 5px 5px 5px; 
font-weight: bold; 
box-sizing:border-box; 
} 
img{ 
display:block; 
margin: 0 auto; 
} 

Answer 1

Вот проблема. Вам нужно обернуть два из меньших ящиков в div, а затем float эти div. Смотрите этот HTML:

<div id = "HomeMain"> 
     <div id="left-col"> 
      <div id="Entertainment"></div> 
      <div id="Community"></div> 
     </div><!-- #left-col--> 
     <div id="welcome"> 
      <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p> 
     <div class = "Oldman"></div> 
     </div><!-- #welcome--> 

    <div id="right-col"> 
     <div id = "Events"></div> 
     <div id = "Distillery"></div> 
    </div><!-- #right-col"--> 
</div> 

И вот CSS

#HomeMain{ 
    width: 100%; 
    overflow:hidden; 
    margin:auto auto; 
    padding:10px; 
    border-style: groove; 
    border-width: 3px; 
    border-colour: white; 
    border-radius: 5px; 
    box-sizing:border-box; 
    } 

    #left-col, #right-col { 
     width:26%; 
     float:left; 
    } 

    #right-col { 
     float:right; 
    } 

    #Entertainment, #Community, #Events, #Distillery{ 
    width: 100%; 
    height: 190px; 
    margin: 1px; 
    border-style: groove; 
    border-width: 3px; 
    border-colour: white; 
    border-radius: 5px; 
    box-sizing:border-box; 
    background-color:yellow; 
    } 
    #welcome{ 
    float: left; 
    width:45%; 
    border-style: groove; 
    border-width: 3px; 
    border-color: white; 
    border-radius: 5px; 
    font-weight: bold; 
    box-sizing:border-box; 
    } 
    img{ 
    display:block; 
    margin: 0 auto; 
} 

И скрипку: http://jsfiddle.net/67oqxe9f/1/

Answer 2

EDIT:

К сожалению, не понять ваши требования должным образом ранее (так удалены, что ответ): здесь есть демо, что вам нужно http://jsfiddle.net/j4nrn2sb/

HTML :

<div id = "HomeMain"> 
    <div id="left_div"> 
     <div id = "Entertainment"> 
      <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="EntSlide" width="185" height="95"/> 
     </div> 
     <div id = "Community"> 
      <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="ComSlide" width="185" height="95"/> 
     </div> 
    </div> 
    <div id="center_div"> 
     <div id="welcome"> 
      <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p> 
      <div class = "Oldman"></div> 
     </div> 
    </div> 
    <div id="right_div"> 
     <div id = "Events"> 
      <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="EventSlide" width="185" height="95"/> 
     </div> 
     <div id = "Distillery"> 
      <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="DistSlide" width="185" height="95"/> 
     </div> 
    </div> 
</div> 

CSS:

#HomeMain{ 
width: 100%; 
float: left; 
overflow:hidden; 
margin:auto auto; 
padding:10px; 
border-style: groove; 
border-width: 3px; 
border-colour: white; 
border-radius: 5px 5px 5px 5px; 
box-sizing:border-box; 
} 

#Entertainment, #Community, #Events, #Distillery{ 
float: left; 
width: 100%; 
height: 190px; 
margin: 1px; 
border-style: groove; 
border-width: 3px; 
border-colour: white; 
border-radius: 5px 5px 5px 5px; 
box-sizing:border-box; 
} 
#welcome{ 
float: left; 
width:100%; 
border-style: groove; 
border-width: 3px; 
border-color: white; 
border-radius: 5px 5px 5px 5px; 
font-weight: bold; 
box-sizing:border-box; 
} 
img{ 
display:block; 
margin: 0 auto; 
} 

#left_div, #right_div 
{ 
    width:26%; 
    float:left; 
    border:solid 1px red; 
} 

#center_div 
{ 
    width:45%; 
    float:left; 
    border:solid 1px blue; 
}