Why does the first box fall off

Question

Don't know how to describe, Please check it in codepen.

<div class="container">
<h1></h1>
<div class="box">
<div class="sharePanel">
  <div>content</div>
</div>
<div class="sharePanel">  
</div>
</div>
</div>



body 
{
    font: 15px / 1.8em "Microsoft YaHei";
    line - height: 40px;
}

.container {
    width: 960px;
    margin: 20px auto;
    border: solid 1px;
}

.container h1 {
    text - align: center; /*center the inline-block*/
}

.container.box {

    text - align: center;
}

.container.sharePanel {
    display: inline - block;
    height: 100px;
    width: 100px;
    border: solid 1px;
    border - radius: 5px;
    margin - right: 10px;

}

If you can't even describe it, how to you expect us to solve it? — takendarkk, Jan 03 '14 at 06:57
When I add something to the second div, even an , both divs are aligned correctly — Njol, Jan 03 '14 at 06:57
You need `vertical-align:top`. If you want to know why, see http://stackoverflow.com/questions/12950479/display-inline-block-elements-vertical-aligns-inproperly/12950536#12950536. I am voting to close as duplicate, since this is just another vertical alignment question and none of the answers so far explain what the problem actually is. — andyb, Jan 03 '14 at 06:58

score 1 · Answer 1 · answered Jan 03 '14 at 07:00

1

Use vertical-align: top; default vertical-align value is baseline

.container .sharePanel {
 vertical-align: top;
}

answered Jan 03 '14 at 07:00

Harshit Tailor

3,261
6
27
40

score 1 · Answer 2 · answered Jan 03 '14 at 07:15

You need to apply vertical-align:top to your div , because default property for inline elements is vertical-align:baseline

CSS:

.container .sharePanel {
 vertical-align: top;
}

Refer the below link for better understanding of your problem:

Cross-browser-inline-block

score 0 · Accepted Answer · answered Jan 03 '14 at 07:00

Try something Like below

CSS

p{

}
body{
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUQAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBAQEBAQEBAYEBQUFBQQGBgcHBwcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAECAwMFBAUJBgYJDQoICg0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAIAAgAwERAAIRAQMRAf/EAGYAAAMBAQAAAAAAAAAAAAAAAAABAgMJAQEBAQAAAAAAAAAAAAAAAAAAAQQQAAICAQQABAUFAAAAAAAAAAECEQMSITEiE0FRoeHwYYEjQ3GR8UJiEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDslWRjUuWRIQAq289cGWsPnMyZHnPLWworsR2qbu2QK2LyBl0kflO86b7+M8yrVyvS1ZDK5Rcsg3jUP7WySQTHvDBNTFhXDyjhCLc8lIis6fdO/wATPIGGUCoC9YbEdhchWk0qIysO523+s8iLraBmGUo5Q5ZSoP2gNDYfP18zyBVs4SpsmORQK2TSC/UNSbTJ+NZ5FMFWxPdAdkjm0ETVOnZqTIifWeQCkKlSdhZ7ArFcgdusH8p1131+s8gEsVoUkMzMrABgCI6ziYsPifD9NZ5A1dlwTOcsYsL6EHr2mz/XzP78gVbMwULaIVlbUyJittjYdwfXxnkBXLdbhmE4MhNhM8aogdh9/nPIEs2EObAzKUAAs0Aio642wd/5nkGgcFqwz4zDYlpnWsmfuGdxrr68gK2IbDsV4gGCI1WsajsPnPueQf/Z);

  font: 15px/1.8em "Microsoft YaHei";
  line-height: 40px;

}

.container{
  width :960px;
  margin: 20px auto;
  border: solid 1px;
}

.container h1{
  text-align: center; /*center the inline-block*/
}

.container .box{

  text-align: center;
}

.container .sharePanel{
   display: inline-block;
   height: 100px;
  width: 100px;
  border: solid 1px;
  border-radius: 5px;
  margin-right: 10px;
  text-align: center;
   vertical-align: top;
}

HTML

<!-- container layout  -->
<div class="container">

  <h1></h1>
  <div class="box">
    <div class="sharePanel">
      content
    </div>
    <div class="sharePanel">

    </div>


  </div>
  <p></p>
</div>

Use vertical-align: top; ti aligh correctly. Here is Fiddle

score 0 · Answer 4 · answered Jan 03 '14 at 07:01

try something like this

 <div class="sharePanel"> content </div>
 <div class="sharePanel">&nbsp; </div>

ALTERNATIVE

.container .sharePanel {
  border: 1px solid;
  border-radius: 5px;
  display: inline-block;
  height: 100px;
  margin-right: 10px;
  text-align: center;
  vertical-align: top;
  width: 100px;
}

Why does the first box fall off

4 Answers4