The alignment of inline divs is off and they are not forming a straight row

Question

The alignment of inline divs is off and they are not forming a straight row

From my understanding, adding display:inline to divs with a relative position should align them (left to right) similar to float:left. I attempted both methods but with no success.

Below is an example of my latest try with inline displaying. My goal is to have all three segments aligned from left to right, but they appear unstyled like regular 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>

javascript html css

Answer 1

Answer №1

Consider using inline-block over inline for better control. I opted for a width of 33%-2px to avoid overflow caused by browser rounding. The 5px margins were also contributing to the issue.

function displayProfile() {
  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 contains basic information about the person you clicked on.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    This showcases a tag line from the individual you clicked on.
  </div>
</div>

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

Answer 2

Consider using inline-block over inline for better control. I opted for a width of 33%-2px to avoid overflow caused by browser rounding. The 5px margins were also contributing to the issue.

function displayProfile() {
  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 contains basic information about the person you clicked on.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    This showcases a tag line from the individual you clicked on.
  </div>
</div>

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

Answer 3

Answer №2

Utilize CSS to target the IDs and apply the float:left property for alignment. Check out this example:

.account {
  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="account" id="useraccount">
  <div class="miniBioSegment">
    <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Account+image">
  </div>
  <div id="miniBio" class="miniBioSegment">
    This section contains basic information about the selected user.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    Here is a quote from the selected user.
  </div>
</div>

Answer 4

Utilize CSS to target the IDs and apply the float:left property for alignment. Check out this example:

.account {
  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="account" id="useraccount">
  <div class="miniBioSegment">
    <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Account+image">
  </div>
  <div id="miniBio" class="miniBioSegment">
    This section contains basic information about the selected user.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    Here is a quote from the selected user.
  </div>
</div>

Answer 5

Answer №3

I find myself wondering, what's the purpose of having position:absolute; in this case?

In order to achieve the desired layout, I decided to incorporate

display: flex; justify-content: space-between;

into the .profile class.

If you remove the absolute positioning and implement these two lines of code, the design should come together more effectively.

You can take a look at an example here:

Answer 6

I find myself wondering, what's the purpose of having position:absolute; in this case?

In order to achieve the desired layout, I decided to incorporate

display: flex; justify-content: space-between;

into the .profile class.

If you remove the absolute positioning and implement these two lines of code, the design should come together more effectively.

You can take a look at an example here:

Answer 7

Answer №4

When the divs are configured with display: inline;, they will align horizontally only if their combined width does not exceed the container's width.

Additionally, when using width and height on inline elements, these properties are disregarded, and it is recommended to utilize display: inline-block; instead. The wrapping behavior remains the same in this case.

Moreover, browsers render whitespace between inline* elements, typically around 4px. For more insights on eliminating this space, refer to How to remove the space between inline-block elements?.

In the provided scenario of having 3 divs, aiming for equal widths can be achieved through:

.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%;
}

If you prefer the first div with an image object set at 100px to have the same width as well, allocating each remaining div to take 50% of the available space can be done. Example implementations include:

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;
}

Answer 8

When the divs are configured with display: inline;, they will align horizontally only if their combined width does not exceed the container's width.

Additionally, when using width and height on inline elements, these properties are disregarded, and it is recommended to utilize display: inline-block; instead. The wrapping behavior remains the same in this case.

Moreover, browsers render whitespace between inline* elements, typically around 4px. For more insights on eliminating this space, refer to How to remove the space between inline-block elements?.

In the provided scenario of having 3 divs, aiming for equal widths can be achieved through:

.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%;
}

If you prefer the first div with an image object set at 100px to have the same width as well, allocating each remaining div to take 50% of the available space can be done. Example implementations include:

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;
}

The alignment of inline divs is off and they are not forming a straight row

Answer №1

Answer №2

Answer №3

Answer №4

1. Inline block

2. Float

3. CSS table

4. Flexbox

Similar questions

Array containing HTML code for Ionic framework

Tips for preventing multiple requests in your JavaScript search autocomplete feature

How to position text in the center of a video using CSS

Discovering the oldest date in an array with JavaScript

Update the logo for mobile, desktop, and tablet display using Bootstrap 4alpha

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

An Angular directive utilizing dual aliases

Converting HTML to PDF on iOS devices

What is the best way to utilize variable fonts with Google Fonts?

Tips for employing e.preventDefault within the onChange event handler for a select element

Placing 2 elements next to each other - Where the left element remains static and the right element's width increases as the page expands

Observing nested objects in Vue while utilizing deep watching功能

Output the contents of a nested object

Personalized cursor image using jQuery.css()

Why would someone use the `catch` method in Angular $http service when the `then` method already takes two arguments (success and error callbacks)?

How can I showcase CSV data as clickable links and images on a website using HTML?

Exploring the asynchronous for loop functionality in the express.js framework

Using a snippet of HTML code from one Angular component in another component

Utilize Bootstrap 3 Datepicker version 4 to easily set the date using Moment.js or Date objects

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?