Inline divs are not lining up in a row

Question

It's my understanding that simply adding display:inline to divs with a relative position will line them up (left to right), somewhat like float:left. I've tried both approaches but they haven't worked.

Below is an example of my last attempt, using inline displaying. I want all three segments to line up from left to right, but they're displaying just like unstyled divs.

function showProfile() {
  var profile = document.getElementById('userprofile');
  profile.style.opacity = 0.8;
  var profileImage = document.getElementById('userimage');
  profileImage.style.opacity = 0.8;
}

.profile {
  top: 68px;
  background-color: #424755;
  color: #dddddd;
  width: 100%;
  min-height: 50px;
  opacity: 0;
  position: fixed;
  font: 16px"Tahoma";
}
.miniProfileImage {
  opacity: 0;
  width: 100px;
  height: 100px;
}
.miniBioSegment {
  display: inline;
  margin-right: 5px;
  width: 33%;
}

<div class="profile" id="userprofile">
  <div class="miniBioSegment">
    <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
  </div>
  <div id="miniBio" class="miniBioSegment">
    This is basic information about this person that you clicked.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    This is a tag line from the person that you clicked.
  </div>
</div>

<button onclick="showProfile()">View Profile</button>

score 1 · Answer 1 · answered Jul 05 '16 at 21:54

CSS should target the ID's and use float:left. See example

    .profile {
      top: 68px;
      background-color: #424755;
      color: #dddddd;
      width: 100%;
      min-height: 50px;
      position: fixed;
      font: 16px"Tahoma";
      
    }
    .miniProfileImage {
      float:left;
      max-width: 33%;
      height: 100px;
    }
    #miniBio {
      float:left;
      margin-right: 5px;
      width: 33%;
    }
    #miniQuote {
      float:left;
      margin-right: 5px;
      width: 33%;
    }

    <div class="profile" id="userprofile">
      <div class="miniBioSegment">
        <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
      </div>
      <div id="miniBio" class="miniBioSegment">
        This is basic information about this person that you clicked.
      </div>
      <div id="miniQuote" class="miniBioSegment">
        This is a tag line from the person that you clicked.
      </div>
    </div>

Thanks, Ron. That worked, great, but it's a shame that the alignment can't happen at the class level. — Victor Stoddard, Jul 05 '16 at 22:42

score 1 · Answer 2 · answered Jul 05 '16 at 21:57

1

I'm asking myself, why do you have position:absolute;?

To make it work, I have just added display: flex; justify-content: space-between; to the .profileclass.

Remove the position, and try adding the last two lines.

See example here: http://sandbox.clickadelic.de/demos/lineup.html

answered Jul 05 '16 at 21:57

I don't see any absolute positioning in my CSS, unless you mean fixed? I need it to be fixed because I want it to stay near the top of a page. – Victor Stoddard Jul 05 '16 at 22:36
Yes, sorry - I ment fixed. mybad. ok - it should work the way I suggested either way. – Jul 05 '16 at 22:41
No worries, I think they're very similar anyway. @Ron Royston's solution worked well, but I might try flex because I want a fixed-flex-flex pattern (the leftmost div is fixed) – Victor Stoddard Jul 05 '16 at 22:45

score 1 · Accepted Answer · answered Jul 05 '16 at 22:03

You should use inline-block instead of inline for more control. I used a width of 33%-2px because the browser rounds the div's size up therefore leading to overflowing. Your 5px margins weren't helping with the sum either.

function showProfile() {
  var profile = document.getElementById('userprofile');
  profile.style.opacity = 0.8;
  var profileImage = document.getElementById('userimage');
  profileImage.style.opacity = 0.8;
}

.profile {
  top: 68px;
  background-color: #424755;
  color: #dddddd;
  width: 100%;
  min-height: 50px;
  opacity: 0;
  position: fixed;
  font: 16px"Tahoma";
}
.miniProfileImage {
  opacity: 0;
  width: 100px;
  height: 100px;
  display:inline-block;
}
.miniBioSegment{
  display: inline-block;
  width: calc(33% - 2px);
  vertical-align:middle;
}

<div class="profile" id="userprofile">
  <div class="miniBioSegment">
    <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
  </div>
  <div id="miniBio" class="miniBioSegment">
    This is basic information about this person that you clicked.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    This is a tag line from the person that you clicked.
  </div>
</div>

<button onclick="showProfile()">View Profile</button>

Is CSS calc() widely supported? I am taking your advice and using padding rather than margins. — Victor Stoddard, Jul 05 '16 at 22:48
It's supported in IE10+ and major browsers. You can use width 32% instead if you'd like to avoid using calc. — Paul Ghiran, Jul 05 '16 at 22:55
I'm not sure why I can't use 50% instead of 42% but this works for me: #divLeft{display:inline-block;width:104px;} #divMiddle{display:inline-block;width: calc(42% - 52px);} #divRight{display: inline-block;width:calc(42% - 52px);} — Victor Stoddard, Jul 05 '16 at 23:34

score 1 · Answer 4 · edited May 23 '17 at 12:22

With the divs set to display: inline; they will only line up horizontally if the total length of the divs does not exceed the container's width.

And width, height of inline elements is ignored, you should use display: inline-block; instead. The wrapping behavior is the same as above.

Also browser renders whitespace among inline* elements, which is about 4px, see How to remove the space between inline-block elements? for more details.

In your example, there are 3 divs, if you want them to be equal width, you can do:

.profile {
  font-size: 0; /*remove whitespace*/
  background: silver;
}
.miniBioSegment {
  font-size: 16px; /*reset font-size*/
  display: inline-block;
  vertical-align: top; /*vertical alignment*/
  width: 33.3333%;
}

However, the image object in the first div is set to 100px, I think you would prefer that div to be the same width too, and each one takes 50% of the rest space for other two divs. Examples:

1. Inline block

jsFiddle

.profile {
  font-size: 0;
  background: silver;
}
.miniBioSegment {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  border: 1px dotted red;
  box-sizing: border-box;
  width: 100px;
}
#miniBio, #miniQuote {
  width: calc((100% - 100px) / 2);
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

2. Float

jsFiddle

.profile {
  background: silver;
}
.profile:after {
  content: "";
  display: table;
  clear: both;
}
.miniBioSegment {
  float: left;
  border: 1px dotted red;
  box-sizing: border-box;
  width: 100px;
}
#miniBio, #miniQuote {
  width: calc((100% - 100px) / 2);
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

3. CSS table

jsFiddle

.profile {
  background: silver;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.miniBioSegment {
  display: table-cell;
  vertical-align: top;
  border: 1px dotted red;
}
#miniBio, #miniQuote {
  width: 50%;
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

4. Flexbox

jsFiddle

.profile {
  background: silver;
  display: flex;
}
.miniBioSegment {
  border: 1px dotted red;
}
#miniBio, #miniQuote {
  flex: 1;
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

Inline divs are not lining up in a row

4 Answers4

1. Inline block

2. Float

3. CSS table

4. Flexbox