Div排列HTML / CSS

我正在尝试安排我的主页的布局。我希望我的div #welcome成为中心，其他4个div分别位于2＆2一侧。这个网站有一个很好的例子，说明我要做什么。我现在拥有的是5个div，它们的工作和拟合相对较好，只是它们的排列不正确。我知道在HTML中调用div的顺序会改变它们的显示顺序，但是当我重新排列它们时，它们会变得混乱。

当我拥有这样的HTML时，我在#welcome的左侧获得了一个，而在右侧则获得了3个（如下图所示）：

<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时，我在右方会看到#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;
}