How do I put 3 div's side by side and center the content in each one

Question

I'm new to css so please explain in easy terms. I want 3 divs the same size as each other beside each other with the content in each div to be centered. What I have is a center div with a rotating image and my left and right divs each contain 3 links. I've tried everything from setting the width for each div to floating the left left and right right and centering the middle. I've looked at some other questions like this one on this site but I don't understand any of the answers. If it helps I'm using the following names for my divs:

topleftnav

topcenter

toprightnav

Code:

<div id="top">
  <div id="topleftnav">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
    </ul>
  </div>
  <div id="centerright">
   <div id="topcenter">
       <layer id="placeholderlayer"></layer><div id="placeholderdiv"><a href="link.htm"><img alt="image2 (9K)" src="images/image2.jpg" border="0"></a></div>
   </div>
   <div id="toprightnav">
     <ul>
       <li><a href="resources.html">Resources</a></li>
       <li><a href="contact.html">Contact</a></li>
       <li><a href="events.html">Events</a></li>
     </ul>
   </div>
 </div>
</div>

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: [Stack Overflow question checklist](http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist) — Itay, Sep 28 '13 at 18:51
If it helps the site as is is located at http://www.joekellywebdesign.com/churchsample/home.html — Joe Elmore, Sep 28 '13 at 19:00
If you put `text-align="center"` on your `placeholderdiv` it should center the link for you. — Jeremy, Sep 28 '13 at 19:07
Are you sure you want to support browsers more than 13 years old? Remove the layer tag and change function rotater() { document.getElementById("placeholderdiv").innerHTML=items[current]; current = (current==items.length-1) ? 0 : current + 1; setTimeout(rotater,howOften*1000); } — mplungjan, Sep 28 '13 at 19:17

score 1 · Answer 1 · answered Sep 28 '13 at 18:58

1

CSS

#1 { width: 33%; display: inline text-align: center; '#2 { width: 33%; display: inline text-align: center;'#3 { width: 33%; display: inline text-align: center;

answered Sep 28 '13 at 18:58

Adam 'Sacki' Sackfield

594
1
4
19

add a float:left; if not going inline. if using html5 change divs to
. Vote up
– Adam 'Sacki' Sackfield Sep 28 '13 at 19:06

score 1 · Answer 2 · answered Sep 28 '13 at 19:02

<style>
.yourDivStyle {
float: left;
width: 50px;
height: 50px;
border-style:solid;
border-width:5px;

}
.insideDiv {
 text-align: center;   
}

</style>

<div class="yourDivStyle"><p class="insideDiv">div 1</p></div>
<div class="yourDivStyle"><p class="insideDiv">div 2</p></div>
<div class="yourDivStyle"><p class="insideDiv">div 2</p></div>

http://jsfiddle.net/Hg6DK/

score 0 · Answer 3 · answered Sep 28 '13 at 19:02

How about this:

<HTML>
    <BODY>
        <DIV id="container" style="margin-left: auto; margin-right: auto;">
            <DIV id="topleftnav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the left
            </DIV>
            <DIV id="centerNav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the middle
            </DIV>
            <DIV id="rightNav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the right
            </DIV>
        </DIV>
    </BODY>
</HTML>

score 0 · Answer 4 · answered Sep 28 '13 at 19:06

This should be the solution. adjust the width values to your needs.

<html>

<head>
<style type="text/css">
    #container 
    {
        width:600px;
    }
    #centernav 
    {
        width:200px;
        float:left;
    }
    #topleftnav 
    {
        width:200px;
        float:left;
    }
    #toprightnav 
    {
        width:200px;
        float:left;
    }
    .center 
    {
        width:150px;
        margin:auto;
    }
</style>
</head>
<body>
    <div id="container">

        <div id="topleftnav">
            <div class="center">
                LEFTNAV
            </div>
        </div>

        <div id="centernav">
            <d iv class="center">
                CENTER
            </div>

        <div id="toprightnav">
            <div class="center">
                RIGHTNAV
            </div>
        </div>

    </div>
</body>

</html>

score 0 · Answer 5 · answered Sep 28 '13 at 19:18

0

Try something like this:

#top div{
    display:inline-block;
    width:33%;
    text-align:center;
}

answered Sep 28 '13 at 19:18

service-paradis

3,333
4
34
43

How do I put 3 div's side by side and center the content in each one

5 Answers5

Linked