Align Divs in HTML + CSS - html

Question

I am trying to align three divs inside of a fourth div to create something similar to what you see on this page: http://www.thedistillerydistrict.com/
I can't seem to get the inside divs (#Entertainment, #Community, #welcome) align side by side inside the #HomeMain div
This is from the html
<div id = "HomeMain">
<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 = "Entertainment">
<img src="images/Entertainment1.jpg" id="EntSlide" width=125 height=70 />
</div>
<div id = "Community">
<img src="images/Victoria1.jpg" id="ComSlide" width=125 height=70 />
</div>
</div>
Here is the CSS
#HomeMain{
width: 100%;
float: left;
overflow:hidden;
margin:0 auto;
padding:5px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
}
#Entertainment #Community{
float: left;
width: 25%;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
}
#welcome{
float: left;
width:50%;
position: relative;
border-style: groove;
border-width: 3px;
border-color: white;
border-radius: 5px 5px 5px 5px;
font-weight: bold;
padding:15px;
}

Answer 1

Check this fiddle link http://jsfiddle.net/hek7fLy2/
All i have done is use the box-sizing css property to achieve the desired result. Also I assume you would want the images in the 2 smaller divs to be centered, so this takes care of that.
I have not changed your HTML code but i tweaked just a little bit of css code including the typo..
#HomeMain{
width: 100%;
float: left;
overflow:hidden;
margin:0 auto;
padding:5px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
box-sizing:border-box;
}
#Entertainment, #Community{
float: left;
width: 25%;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
box-sizing:border-box;
}
#welcome{
float: left;
width:50%;
position: relative;
border-style: groove;
border-width: 3px;
border-color: white;
border-radius: 5px 5px 5px 5px;
font-weight: bold;
padding:15px;
box-sizing:border-box;
}
img{
display:block;
margin: 0 auto;
}

Answer 2

You forgot the the comma in the second rule and in order to make it right you have to use the box-sizing: border-box;.
#HomeMain {
width: 100%;
float: left;
overflow: hidden;
margin: 0 auto;
padding: 5px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px;
box-sizing: border-box;
}
#Entertainment,
#Community {
float: left;
width: 25%;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px;
box-sizing: border-box
}
#welcome {
float: left;
width: 50%;
position: relative;
border-style: groove;
border-width: 3px;
border-color: white;
border-radius: 5px;
font-weight: bold;
padding: 15px;
box-sizing: border-box
}
<div id="HomeMain">
<div id="welcome">
<p>
Finest Booze around...
</p>
<div class="Oldman"></div>
</div>
<div id="Entertainment">
<img src="http://dummyimage.com/125x70" id="EntSlide">
</div>
<div id="Community">
<img src="http://dummyimage.com/125x70" id="ComSlide">
</div>
</div>

Answer 3

Check this fiddle
First of all it should be
#Entertainment,#Community{
and not
#Entertainment #Community{
next, why your divs arent aligning is because you are specifying a border of 3px each for the 3 divs which makes the divs to jump to the next line.So, here i've used box-sizing: border-box property for each of the divs.
Try it..

Answer 4

<div id = "HomeMain">
<div id="welcome">
Finest Booze around
</div>
<div id = "Entertainment">
Finest Booze around,
</div>
<div id = "Community">
Finest Booze around,
</div>
</div>
css use display property
#HomeMain{
width: 100%;
float: left;
overflow:hidden;
margin:0 auto;
padding:5px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
display:block;
}
#Entertainment, #Community,#welcome{
width: auto;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
background:#ccc;
display:inline-block;
}
fiddle
http://jsfiddle.net/tnmzo1gc/

Answer 5

You have a typo in the CSS
#Entertainment #Community{
should be
#Entertainment, #Community{
I hope it solves your problem:) If not, please elaborate on a question.