how to evenly space 3 divs in an outer div

Hello

Please could you advise how I would evenly space 3 divs in a row in an outer div.

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>

</div>

I looked online and found lots of complicated solutions but I just need something quick and easy. I also dont have control over the width of the outer container to set its width. The solutions i found seemed to need a set width

thanks
andiejeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I used border and height for show

sample:http://jsbin.com/UmOcETI/1/

div#container{border-color:red;border-width:1px;border-style:solid;height:100px;text-align:center;}
#container > div{
  width:32%;
  border-color:blue;border-width:1px;border-style:solid;
  display:inline-block;
  margin:2%;
  margin-left:auto;
  margin-right:auto;
    
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
There are many ways to skin a cat.

Building on Padas post - there are two ways of aranging block elements in a row.

1. display; inline-block as padas has done
Some issues on older browsers and because you are changing block elements into inline elements you have the problem of inter-element spacing creating gaps between elements. In other words
<div>x</div>
<div>y</div>

Open in new window

Displayed inline block will create two blocks side by side but with a small gap in between.

This is because the browser will interpret the line feed between the two <div>'s as a space - which is rendered as such for inline elements.

Two ways to fix this
a. put the opening div tag of the next element on the same line as the previous
<div>x</div><div>
y</div>

Open in new window


b. You can set the font-size of the outer container to 0px - remember to set font-size to required size in inner divs
<div id="container" style="font-size: 0">
    <div>x</div>
    <div>y</div>
    <div>z</div>
</div>

Open in new window


2. You can float the elements - which is more widely supported but requies a clearfix after the last element.

The next consideration is spacing between elements and internal padding.

You can set the width of the elements to 33.33333% and they will exactly fill the container 1/3 of the width each. If you want a margin between them them you will need to take this into consideration.

If implementing a margin you need to apply it to 2 out of the three elements or only the middle element or else you will add a margin on the end that does not need it.

Two approaches again
// Target the middle div
#container div {
    width: 32%;
    float: left;
    margin: 0;
}
#container div:first-child + div {
    margin: 0 2% 0 2%;
}
#container:after {
    content: " ";
    clear: both;
    display: table;
}

Open in new window

Second approach - target all divs then undo the first child

#container div {
    margin-left: 2%;
}
// undo the margin on the first element
#container div:first-child {
    margin-left: 0;
}

Open in new window

The next consideration is padding - if you want your div's padded you will have a problem using the % width unless you make your padding a % - but if you want a fixed padding the best way to do this is to put a div inside the block div's and give them a padding

<div id="container">
    <div> <div class="box"> x </div> </div>
    <div> <div class="box"> y </div> </div>
    <div> <div class="box"> z </div> </div>
</div>

You can then give class=box a padding

#container div.box {
     padding: 10px;
}

Open in new window


This will padd the internal boxes without affecting the width of their parent.

Putting it all together (inline block)
<!doctype html>
<html>
<head>
<title>28243530</title>
<style type="text/css">
#container {
	font-size: 0px;

}
#container > div {
	width: 33.3333%;
	display: inline-block;
	background: #eee;
}
#container div.box {
	padding: 10px;
	font-size: 12px;
}
</style>
</head>
<body>
<div id="container">
	<div><div class="box">Box 1</div></div>
	<div><div class="box">Box 2</div></div>
	<div><div class="box">Box 3</div></div>
</div>
</body>
</html>

Open in new window

Using float
<!doctype html>
<html>
<head>
<title>28243530</title>
<style type="text/css">
#container div {
    width: 32%;
    float: left;
    margin-left: 2%;
    background: #eee;
}
#container div:first-child {
    margin: 0;
}
#container div.box {
    padding: 10px;
}
#container:after {
    content: "";
    clear: both;
    display: table;
}
</style>
</head>
<body>
<div id="container">
    <div><div class="box">Box 1</div></div>
    <div><div class="box">Box 2</div></div>
    <div><div class="box">Box 3</div></div>
</div>
</body>
</html>

Open in new window

0
Tom BeckCommented:
Something quick and easy and not yet suggested. Use display:table and display:table-cell to get the divs to behave like table cells which naturally divide the available space evenly. One caveat is that in this example the divs are empty so they are exactly the same size. The actual width can vary if the amount of content in each cell varies just like any html table.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#container { width: 100%; height: 202px; display: table }
#container div { height: 200px; border: 1px solid blue; display: table-cell }
</style>
</head>
<body>
<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
</div>
</body>
</html>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Kiran Paul VJComputer EngineerCommented:
Andieje,

This should work

HTML

<div id="container">
     <div class="box"> x </div>
     <div class="box"> y </div>
     <div class="box"> z </div>
</div>

Open in new window


CSS
#container {
    display: table;
    width:100%;
}
.box {
    display:table-cell;
    border:1px solid red;
    width:33%;
    text-align:center;
}

Open in new window


See it in action here : http://jsfiddle.net/pySwu/1/
0
andiejeAuthor Commented:
excellent answers from everyone. Very much appreciated
0
Kiran Paul VJComputer EngineerCommented:
Andie, good to know the answers helped.

-kiranvj
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.