CSS: aligning elements inside a div

Question

I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right.

So, I have something like:

#left-element {
    margin-left: 9px;
    margin-top: 3px;
    float:left;
    width: 13px;
}

#middle-element {
    margin:0 auto;
    text-align: center;
    width: 300px;
}

#right-element {
    float:right;
    width: 100px;
}

My html looks like this:

   <div id="container-div">
        <div id="left-element">
            <img src="images/left_element.png" alt="left"/>
        </div>
        <div id="middle-element">
            I am the text inside the middle element
        </div>
        <div id="right-element">
            I am the text in right element
        </div>
    </div>

Any ideas?

Thanks!

Answer 1

You haven't included css for your container div, but whenever it contains floating elements you should hide overflow like so:

#container {
  overflow: hidden;
  width: 100%; /* for good measure */
}

When you position the middle div you are setting margins that span the entire container, so any further elements are getting positioned on the line below. Note, at least for most modern browsers, further. If you reorder your elements, like so:

<div id="container">
    <div id="left-element">
        <img src="images/left_element.png" alt="left"/>
    </div>
    <div id="right-element">
        I am the text in right element
    </div>
    <div id="middle-element">
        I am the text inside the middle element
    </div>
</div>

You should find it works. Better method, as I'm not quite sure whether that is supposed to work, would be to use css positioning. Apply the following css:

#container {
  overflow: hidden;
  width: 100%;
  min-height: 36px; /* Remember absolute positioning is outside the page flow! */
  position: relative;
}
#left-element {
  position: absolute;
  left: 9px;
  top: 3px;
  width: 13px;
}
#middle-element {
  margin: 0 auto;
  text-align: center;
  width: 300px;
}
#right-element {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
}

Answer 2

I think you problem is that you floated the left and right element but not the center one. Try something like this:

CSS:

<style>
    #container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
        #left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
        #middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
        #right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>

HTML:

<div id="container">
    <div id="left-element">Left Element</div>
    <div id="middle-element">Middle Element</div>
    <div id="right-element">Right Element</div>
</div>

Answer 3

The problem is specifically that the middle div has a width set but is not floated, meaning it is still a block level element. Even though the div itself does not go the entire width of the container, it is still treated as such. You need to do 2 things - float the middle div, then clear the floats so the container grows with the height of the child divs. The clearfix method is preferred since it does not cause issues with CSS3 properties that naturally extend outside the bounds of the element they are applied to (box-shadow, text-shadow, etc).

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

Answer 4

I had the exact same issue. I used this approach. I made the center element display inline-block. That way I didn't have to give the elements specific width or the main container a specific height. The blocks only took up as much space as the content inside. Hope this helps.

.main-nav {
  text-align: center;
  padding: 2em 3em;
  background: #f4f4f4;
}

#logo {
  margin: 0;
  width: 50px;
  float: left;
  margin-top: 18px;
}

#logo-link {
  float: left;
  display: inline-block;
}

.name {
  display: inline-block;
}

.nav {
  float: right;
  margin-top: 18px;
}
.nav li {
  float: left;
  margin-right: 15px;
  margin-top: 5px;
}

.nav li:last-child {
  margin-right: 0;
}

<header class="clearfix">
      <div class="main-nav">
        <a href="index.html" id="logo-link" class="clearfix"><img src="img/site-logo.svg" alt="Munchies" id="logo"></a>

          <div class="name">
            <h1>The Munchies Family Site</h1>
            <h2>Designer</h2>
          </div>

        <nav class="nav clearfix">
          <ul>
            <li><a href="index.html">Gallery</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

strong text