Justify divs within a div HTML/CSS

Question

I've played around for a while with float, display, inline-block, inline, block, and can't seem to find the right way to "justify" the divs with in the div. Here is the HTML portion of it:

<body>
<div id="container">
<div align="center" id="header">
    <h1>This is my header area</h1>
</div>

<nav>
  HOME |
  COC |
  ID CARDS |
  SCHEDULE |
  FORMS |
  CFS |
  MEDIA |
  LINKS |
  CONTACT US
</nav>

<div class="boxes">

<div id="box1">
Content box 1
</div>

<div id="box2">
Content box 2
</div>

<div id="box3">
Content box 3
</div>
</div>

<div id="main">
    <h1>This is the main Div</h1>
    <p>This is my paragraph Area</p>
</div>

<div align="center" id="footer">
    <h3>(This is my footer area)<br>
        Copyright 2012-2013 blah blah blah  </h3>
</div>
</div>
</body>

This is my CSS:

body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;


}
nav {
padding:10px;
}

#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;

}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;

}

#box1 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

#box2 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

 #box3 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

#main {
clear:both;
}

I've researched it but I can't really seem to get it right.

I want box 1 2 and 3 to even space throughout the width of the Any suggestions?

Answer 1

You can give each of your 3 boxes a 25% of width to fit the parent div.

#box1 {
  width: 25%;
}

#box2 {
  width: 25%;
}
...

http://jsfiddle.net/4chjf/1/

Answer 2

replace your css with below--

body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;


}
nav {
padding:10px;
}

#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;

}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;

}

#box1 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
margin-left:60px;
 }

#box2 {
width: 25%;
height: 150px;

border:1px;
border-style:dashed;
float:left;
padding-left:25px;
margin:10px;
padding:10px;
 }

 #box3 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

#main {
clear:both;
}

Best of luck !

Justify divs within a div HTML/CSS

Question

2 answers

solution1
0 2012-12-21 21:36:07

solution2
0 ACCPTED 2013-02-09 09:46:54

Justify divs within a div HTML/CSS

Question

2 answers

solution1 0 2012-12-21 21:36:07

solution2 0 ACCPTED 2013-02-09 09:46:54

solution1
0 2012-12-21 21:36:07

solution2
0 ACCPTED 2013-02-09 09:46:54