Align Divs in HTML + CSS

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;
}

You got a border-width (a total) of 18px, and 100% width for your divs. (25% + 25% + 50% + 18px) is more than 100%, which is why your divs won't align next to eachother. — JiFus, Oct 15 '14 at 18:29

Lal · Answer 1 · 2014-10-15T18:39:47.777

1

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..

edited Oct 15 '14 at 18:39

answered Oct 15 '14 at 18:34

Lal

14,726
4
45
70

http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Lipis Oct 15 '14 at 18:51

score 1 · Answer 2 · answered Oct 15 '14 at 18:37

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>

Nothing new compare to other answers but I was dealing with the code snippet thingy :) — Lipis, Oct 15 '14 at 18:38

score 1 · Accepted Answer · answered Oct 15 '14 at 18:43

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;
}

answered Oct 15 '14 at 18:43

Sai

1,889
5
18
26

Next time instead of JSFiddle use the build in: http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Lipis Oct 15 '14 at 18:50
@Lipis wow good to know... is this a new feature? thats really helpful – Sai Oct 15 '14 at 18:53
Well you can see that it was posted a month ago.. so yes.. new feature :) – Lipis Oct 15 '14 at 18:55
@nhoughto just place the "welcome" div in your HTML code inbetween the other divs. http://jsfiddle.net/gpgt7apa/ – Sai Oct 15 '14 at 19:06

score 0 · Answer 4 · edited Oct 15 '14 at 18:37

0

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.

edited Oct 15 '14 at 18:37

starvator

989
1
11
26

answered Oct 15 '14 at 18:31

Filip Jesiolowski

21
2

score 0 · Answer 5 · answered Oct 15 '14 at 18:33

<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/

Align Divs in HTML + CSS

5 Answers5

Check this fiddle