2

I have an extremely basic side by side layout which I'm trying to achieve however it seems to be pushing the element down.

JSFiddle - https://jsfiddle.net/ca616067/1/

.whitebox {            
    background-color: #fff;            
    height: 200px;   
    display: inline-block;        
}

I have fixed it by using;

Display:inline-block;
position:relative;
top:-185px;

Is there a better way to fix this problem?

Matt Hammond
  • 765
  • 1
  • 7
  • 25

4 Answers4

5

You can use vertical-align on your block level elements to bring them in alignment with each other.

You can view this in this fiddle

MrDeveloper
  • 1,041
  • 12
  • 35
2

Both the image and .whitebox are inline-level boxes in the same line box.

Therefore, their vertical alignment is specified by the vertical-align property:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

By default, its value is baseline:

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

Since the image does not have a baseline, its bottom margin edge will be aligned with the baseline of .whitebox. That baseline is calculated according to

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

Therefore, you can

  • Change the vertical alignment of the image and .whitebox, e.g. 

    img, .whitebox {
  vertical-align: middle;
}


    body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
img, .whitebox {
  vertical-align: middle;
}
    <h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>

  • Make sure .whitebox has no in-flow line box, so that the baseline of .whitebox will be its bottom margin edge. That is, the contents should be out of flow:

    An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow.

    So for example you can use float: left:

    .whitebox > * {
  float: left;
}


    body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
.whitebox > * {
  float: left;
}
    <h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>

  • Set the overflow of .whitebox to something different than visible, so that the baseline of .whitebox will be its bottom margin edge.

    For example, overflow: hidden:

    .whitebox {
  overflow: hidden;
}


    body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
.whitebox {
  overflow: hidden;
}
    <h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
1

Sure! In this case, you can use CSS float: left; as below and in this updated fiddle:

.inline {
    display: inline;    
    position: relative;
    float:left;
}
sqsinger
  • 500
  • 1
  • 3
  • 13
  • 1
    haha, that seemed simple :) thank you, I will mark it as answered in 7mins when I can. TY – Matt Hammond Jun 25 '15 at 17:03
  • No problem :) depending on how you use the class `.inline`, you might want to separate out `float: left;` into another class. – sqsinger Jun 25 '15 at 17:04
  • 1
    `display: inline` is useless when using float, it will be blockified to `display: block`. – Oriol Jun 25 '15 at 17:07
0

Not sure what it is but it seems to fix itself once you remove all the paragraphs with class of inline.

<div class="whitebox box1"></div>

http://codepen.io/anon/pen/MwORMe

deleted
  • 772
  • 1
  • 6
  • 19
  • I believe its because the

    have inline assigned to them which I need, but the vertical alignment worked great, thank you anyway.

     – Matt Hammond Jun 25 '15 at 17:11