Align Divs in HTML + CSS -

Align Divs in HTML + CSS -

i trying align 3 divs within of 4th div create similar see on page: http://www.thedistillerydistrict.com/

i can't seem within divs (#entertainment, #community, #welcome) align side side within #homemain div

this html

<div id = "homemain"> <div id="welcome"> <p>finest booze around, come taste home many of toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking fine art galleries, performance venues , award-winning restaurants, distillery district place see , seen. internationally acclaimed pedestrian-only village, distillery features more 70 ground-floor cultural , retail establishments in restored reddish brick, victorian-era buildings of renowned gooderham & worts whiskey distillery. 1 of canada's hottest tourist attractions, centrally-located , short walk downtown toronto there happening @ 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 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; }

check fiddle link http://jsfiddle.net/hek7fly2/

all have done utilize box-sizing css property accomplish desired result. assume want images in 2 smaller divs centered, takes care of that.

i have not changed html code tweaked little bit of css code including 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; }

html css