Victor Stoddard Victor Stoddard - 5 months ago 8
CSS Question

Inline divs are not lining up in a row

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>




Answer

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>