CODEWITHSUNDEEP
csshtml
tur130
tur130

Reputation: 2093

How to align a div to the top of its parent but keeping its inline-block behaviour?

See: http://jsfiddle.net/b2BpB/1/

Q: How can you make box1 and box3 align to the top of the parent div boxContainer?

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

Help much appreciated...

Acknowledgement: This question is forked from an answer previously given by https://stackoverflow.com/users/20578/paul-d-waite : Getting a CSS element to automatically resize to content width, and at the same time be centered

Upvotes: 200

Views: 335967

Answers (5)

clairesuzy
clairesuzy

Reputation: 27624

As others have said, vertical-align: top is your friend.

As a bonus here is a forked fiddle with added enhancements that make it work in Internet Explorer 6 and Internet Explorer 7 too ;)

Example: here

Upvotes: 41

rhino
rhino

Reputation: 13881

Try the vertical-align CSS property.

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

Apply it to #box3 too.

Upvotes: 415

Robert Went
Robert Went

Reputation: 3072

Or you could just add some content to the div and use inline-table

Upvotes: -1

Alex Emilov
Alex Emilov

Reputation: 1271

You can add float: left; for each of the boxes (box1, box2, box3).

http://jsfiddle.net/Wa4ma/

Upvotes: 9

ninjagecko
ninjagecko

Reputation: 91094

Use vertical-align:top; for the element you want at the top, as I have demonstrated on your jsfiddle.

http://www.brunildo.org/test/inline-block.html

Upvotes: 6

Related Questions