How to align a div to the top of its parent but keeping its inline-block behaviour?
CssHtmlCss Problem Overview
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 : https://stackoverflow.com/questions/5343778/getting-a-css-element-to-automatically-resize-to-content-width-and-at-the-same-t/5685908#5685908
Css Solutions
Solution 1 - Css
Try the [vertical-align
][1] CSS property.
#box1 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
vertical-align: top; /* here */
}
Apply it to #box3
too.
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align "vertical-align"
Solution 2 - Css
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 ;)
here
Example:Solution 3 - Css
You can add float: left; for each of the boxes (box1, box2, box3).
Solution 4 - Css
Use vertical-align:top; for the element you want at the top, as I have demonstrated on your jsfiddle.
Solution 5 - Css
Or you could just add some content to the div and use inline-table