Adjustable widths

Why are my three divs not lining up properly when I try to make them take up a third of the width each (33%)? They seem to jump around and get misaligned when I resize the window. What am I missing?

HTML

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

CSS

.step{
  width:33%;
  height:200px;
  display:inline-block;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}
htmlcss

Answer №1

To achieve the desired layout, utilize float:left; and eliminate display:inline-block; Revise your .step styling with the code provided below:

.step{width:33%; height:200px; float:left;}

The implementation of the float property is widespread. However, some may find it slightly challenging to grasp initially.

Answer №2

The issue arises from the whitespace between the div elements consuming space (due to their display:inline-block property).

Resolution 1: Eradicate the whitespace

To eliminate the whitespace, utilize HTML comments (also include vertical-align:top for top alignment when heights differ)

.step{
  width:33%;
  height:200px;
  display:inline-block;
  vertical-align:top;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}
<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div><<!--
--><div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><<!--
--><div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

Resolution 2: Implement float:left

.step{
  width:33%;
  height:200px;
  float:left;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}
<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

Resolution 3: Utilize flexbox (a more contemporary and suitable approach nowadays)

This requires a wrapping element.

.steps{display:flex}
.step {
  height: 200px;
  flex: 0 0 1;
}
.fa {
  color: darkgray;
  width: 100%;
  margin-top: 5%;
}
i {
  text-align: center;
}
.step p {
  padding: 5%;
  text-align: center;
}
<div class="steps">
  <div class="step">
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
    <p>Bookmark this page in your browser and check back on the first of each month</p>
  </div>
  <div class="step">
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
  </div>
  <div class="step">
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
    <p>Look out for links and prompts in our emails and newsletters</p>
  </div>
</div>

Answer №3

One consequence of opting for display: inline-block; rather than float is the treatment of line breaks as spaces by your browser.

When inline-block is used, the rendering results in:

div   (space)   div   (space)   div

To address this issue, you can eliminate the line breaks between divs in your code. Alternatively, employing float: left; along with a clearing element can also solve it.

Removing the line breaks: https://jsfiddle.net/qzdxtwhx/

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div><div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

Using float: https://jsfiddle.net/qzdxtwhx/1/

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>
<div class="clear"></div>

.step{
  width:33%;
  height:200px;
  float: left; /*Replace display: inline-block; */
}

.clear {  /*Add a 'clear' element to preserve natural layout*/
  clear: both;
}

Answer №4

To eliminate line breaks that are disrupting the display of steps on separate rows, wrap them in a parent div and set the font-size of that div to 0. While using floats as suggested by Santi is an option, personally I find working with inline-block to be more reliable as floats require clearing and cannot be vertically aligned.

<div class="parent">
  <div class="step">
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
    <p>Bookmark this page in your browser and check back on the first of each month</p>
  </div>
  <div class="step">
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
  </div>
  <div class="step">
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
    <p>Look out for links and prompts in our emails and newsletters</p>
  </div>
</div>

CSS:

.parent{
  font-size: 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?

After manipulating the DOM and injecting AJAX content, I often find myself filling in the new content into a copied HTML fragment, then populating it with the updated information before using $().html() to insert the modified code back into the DOM. The ex ...

javascripthtmlajaxdom

Utilize the controller data to display information on a day-by-day basis

In my attempt to design a weekly calendar using AngularJS, I am facing challenges when it comes to inserting events into the 7 boxes representing each day of the week on the calendar. The current HTML structure is as follows: <div class="week"> ...

javascripthtmlcssangularjs

Ways to stop display: flex from eliminating white spaces within the text

span { background-color: red; } .only-whitespace { display: inline-flex; white-space: pre; } .trailing-whitespace { display: inline-flex; white-space: pre; } only whitespace: <span class="only-whitespace"> </span> <br/> trail ...

htmlcssflexbox

Trouble with activating Bootstrap panel

I have integrated bootstrap with Angular, but I am facing an issue with the panels not displaying correctly. After verifying that the files are in the correct locations,here is a screenshot of how it currently looks and this is the expected result. While ...

cssbootstrap-4

Adjusting the sidebar's position in alignment with the left content dynamically

I have a CSS setup to showcase image content on the left with a sidebar on the right. The size and orientation of the image can vary, so I want the details sidebar to be relatively positioned next to the image. Here is a snapshot: The CSS code looks like ...

css

Tips for effectively utilizing an if/else structure to animate fresh content from the right while smoothly removing old content by sliding it to the left

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

javascriptjqueryhtmlcss

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...

javascriptcssreactjstypescriptstyled-components

Utilizing multi-layered arrays for enhancing bootstrap tables

My challenge involved handling a multidimensional array with varying elements in each subarray. I attempted to construct a Bootstrap table by parsing this array. Essentially, my goal was to create a 4-column table using mdArray[0], mdArray[1], mdArray[2], ...

javascripthtmlbootstrap-4

What are the steps to creating a gradient for the bottom border?

SAMPLE TEXT: Hi there, I am looking for assistance in designing a bottom border with a gradient and transparent edges. Any suggestions on how I can achieve this effect? ...

htmlcssbordergradient

Is it time to switch up your header text?

I'm currently facing an issue with the following code: HTML: <button id='ro' class='ro'></button> <button id='eng' class='eng'></button> JAVASCRIPT: $('#ro').click ...

javascriptjqueryhtml

The CSS on the maps infobox is not rendering properly when an icon is clicked

Hey everyone, I'm in the process of creating a travel blog on WordPress and have encountered some issues with the CSS on my site. I've included maps and tables that look fine in my fiddle, but when I transfer them to my website, they appear disto ...

cssweb

What steps can I take to align elements using justify-content-between?

I am trying to arrange two elements, one on the most right and the other on the most left side. I have attempted to use justify-content-between but it doesn't seem to be working and I'm not sure why. HTML <div class="post-left d-sm-flex ...

htmlcssbootstrap-4html-lists

Confirming the authenticity of a newly added user input with the help of jQuery

Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...

jqueryhtmlcssvalidation

What is the best way to ensure that the buttons remain in place once they have been clicked to reveal a drop-down menu?

Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you! Here is the code ...

javascriptjqueryhtmlcss

A Guide to Connecting a JavaScript File to an HTML Page with Express and Node.js

Struggling with integrating my JavaScript file into my simple NodeJS app. Traditional methods like placing the script in the header doesn't seem to work with Node. I've attempted using sendFile and other approaches, but none have been successful ...

javascripthtmlnode.js

Setting objects in parallel in HTML involves using the display property along with the value

Creating two sign-up forms using HTML and CSS Bootstrap. Want them to be parallel, tried using the position tag but there is unwanted space created between the forms. View the output How can I prevent this circle of space from being generated? <main cl ...

htmlcsstwitter-bootstrap

Tips for evenly spacing Navbar items in Bootstrap 4

Designing a navigation system using Bootstrap for my website. I'm struggling to figure out the best way to space out the navigation link elements on my navbar so that it looks good on both desktop and mobile screens. This is my current navbar code: ...

csswordpresstwitter-bootstrapbootstrap-4

Modify the display of multiple divs within a main div

I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...

htmlcssangularangular6position

Interested in providing placeholder with 2 distinct colors?

Is it possible to change the color of a placeholder text to two different colors? Let's take a look at the code: <input type="text" class="form-control setting-form" id="inputDefault2" placeholder="http://blabbr.im/#itsmyne ...

htmlcssplaceholder

Photo captured by camera is not stored in photo gallery

I am currently working on a basic image upload form that allows users to take photos using their phone camera and upload them. However, I have noticed that the pictures taken this way are not being saved to the gallery. Is there something missing in the H ...

javascriptangularhtmlandroid-cameramedia