Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Bart Bruneel
Bart Bruneel
27,212 Points

Centering variable width and height divs

I have a quick question about a specific CSS-layout case which is probably very simple but I can't seem to figure it out.

The layout:

  • Three divs with a variable width, wrapped in an outerdiv.
  • The rightmost div has a variable width and heigth (shorter or longer text, bigger text than the other two divs)

What I would like to do:

  • Have the middle div in the centre of the outerdiv, irrespective of the width of the rightmost div.
  • Have the text on the same height.

Here is what I have so far.

  <div id="outerdiv">
  <div class="headerElement" id="firstdiv">
    firstTestCustomer
  </div>
  <div  class="headerElement" id="seconddiv">Usage:100 MB</div>
  <div class="headerElement" id="thirddiv"> Enddate: 10-1-2019</div>
</div>

#outerdiv {
  border: 1px solid red;
  width: 745px;
  height: 40px;
  padding: 10px;
  text-align: center; 
}

.headerElement {
  display: inline-block;
  border: 1px solid green;  
}

#firstdiv {
  font-size: 20px;
  float: left;
}

#seconddiv {
  font-size: 16px;
}

#thirddiv {
  font-size: 16px;
  float: right;
}

Thanks in advance.

3 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,741 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,741 Points

Hey, Bart!

Have you thought about using Flexbox? What (I think) you want is super achievable with a minimal amount of CSS. I'm not going to explain the workings, as there are many resources out there, but try this:

#outerdiv {
  border: 1px solid red;
  width: 745px;
  height: 40px;
  padding: 10px;
  text-align: center;

  /* Use the cascade */
  font-size: 16px;

  /* Flex properties */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headerElement {
  border: 1px solid green;  
}

#firstdiv {
  font-size: 20px;
}
Bart Bruneel
Bart Bruneel
27,212 Points
Bart Bruneel
Bart Bruneel
27,212 Points

Hey Rich,

Thank you for your quick answer. I thought about using Flexbox but I need a solution that works on all browsers, even IE9. Is this possible without flexbox?

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,741 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,741 Points

Dang! Even Microsoft stopped supporting this browser in January 2016! I feel for ya.

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,741 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,741 Points

If you're using "magic numbers" (40px height):

#outerdiv {
  border: 1px solid red;
  width: 745px;
  height: 40px;
  padding: 10px;
  text-align: center;

  /* Use the cascade */
  font-size: 16px;

  /* Set to height of outerdiv */
  line-height: 40px;
}

.headerElement {
  border: 1px solid green;
  display: inline-block;
}

#firstdiv {
  font-size: 20px;
  float: left;
}

#thirddiv {
  float: right;
}