Inline-block elements are cascading downwards following the initial sibling div

I have encountered an issue that I am struggling to identify the root cause of. Initially, I had three boxes aligned in a horizontal line as intended. However, upon adding titles and descriptions inside the boxes, they now appear staggered. What could be causing this unexpected effect?

You can observe the issue in the code snippet provided below.

#home-img-block-wording-container {
  width: 100%;
  height: 400px;
  border: 1px solid black;
}
.home-img-wording-blocks {
  width: 33%;
  height: 100%;
  text-align: center;
  border: 1px solid black;
  display: inline-block;
}
.home-img-wording-block-title {
  padding-top: 20px;
  font-size: 2em;
}
.home-img-wording-block-description {
  padding: 25px 20px 0 20px;
  font-size: 1.2em;
  color: #adadad;
}
<div id="home-img-block-wording-container">
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">WEB DESIGN</div>
    <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">ECOMMERCE</div>
    <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
    <div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
  </div>
</div>

htmlcss

Answer №1

The issue lies in the alignment of text within each inline-block .home-img-wording-blocks element, as it is being aligned to the baseline of the preceding box.

Referencing the relevant specification:

10.8 Line height calculations: the line-height and vertical-align properties

The baseline of an inline-block is established as the baseline of its final line box in the normal flow, except if there are no in-flow line boxes or if the overflow property has a value other than visible, in which case the baseline becomes the bottom margin edge.

It's important to note that the default setting for the vertical-align property is baseline. To resolve this issue, you can align the element to the top by including vertical-align: top:

#home-img-block-wording-container {
  width: 100%;
  height: 400px;
  border: 1px solid black;
}
.home-img-wording-blocks {
  width: 33%;
  height: 100%;
  text-align: center;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}
.home-img-wording-block-title {
  padding-top: 20px;
  font-size: 2em;
}
.home-img-wording-block-description {
  padding: 25px 20px 0 20px;
  font-size: 1.2em;
  color: #adadad;
}
<div id="home-img-block-wording-container">
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">WEB DESIGN</div>
    <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">ECOMMERCE</div>
    <div class="home-img-wording-block-description">Custom built solutions catered towards your end goal.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
    <div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
  </div>
</div>

Answer №2

To align the content at the top, apply the CSS property vertical-align: top; to the element with the class .home-img-wording-blocks

Answer №3

To resolve the issue of overflow in your divs and ensure no unintended margins or padding are affecting your layout, consider this solution:

* {
  margin:0;
  padding:0;
}
#home-img-block-wording-container {
    width: 100%;
height: 400px;
border: 1px solid black;
}
.home-img-wording-blocks {
    width: 33%;
height: 100%;
text-align: center;
border: 1px solid black;
display: inline-block;
    overflow:hidden;
}
.home-img-wording-block-title {
padding-top: 20px;
font-size: 2em;
}
.home-img-wording-block-description {
padding: 25px 20px 0 20px;
font-size: 1.2em;
color: #adadad;
}
<div id="home-img-block-wording-container">
            <div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div><div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
</div><div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
</div>
        </div>

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

Stop scrolling on the body of the webpage

I am struggling to find a solution to completely disable scrolling on the HTML body. I have experimented with different options, but none seem to work as desired: overflow: hidden; did not disable scrolling, only hid the scrollbar. position: fixed; w ...

htmlcssscroll

Verification of postal codes on websites for cities and countries

Currently exploring options for adding a postcode/zip code verification feature to the "contact us" page. The idea is for users to choose a country and/or city, with the system then displaying or confirming the appropriate post/zip codes based on valid o ...

javascriptjqueryhtmljquery-plugins

Saving HTML elements within an XML file

I am dealing with a String that has an html format containing various html tags. My goal is to enclose this string within xml tags while preserving the html tags, for example: public class XMLfunctions { public final static Document XMLfromString(Str ...

javahtmlxml

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: ht ...

htmltwitter-bootstrapcss

The navigation bar is showing my logo in a blurry and small format when viewed on a desktop

Currently, Twitter Bootstrap is being utilized on my website and a high-resolution logo has been successfully uploaded. The dimensions of the logo are 529 x 100 pixels, and here is the relevant CSS: .navbar-brand { float: left; padding: 12px 15p ...

csstwitter-bootstrap

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

javascripthtmlangularjs

Place the collapsible button on the right side of the navigation bar

Looking to position the collapsible button to the right of the navbar in Bootstrap v4, I attempted wrapping the button in: <div class='nav navbar-nav navbar-right'> I also tried adding the float-xs-right class without any luck. A sample ...

csstwitter-bootstraptwitter-bootstrap-4

Employ a distinct styling approach for Chrome and Mozilla with only utilizing a single style

This is the CSS style defined in a PHP file for an Element line-height: 120px; display: list-item; display: -moz-inline; list-style: none; If the browser is Chrome, I want it to show display: list-item, and if it's Mozilla, then display: inline. Th ...

htmlcss

Tips on avoiding blurring when making an autocomplete selection

I am currently working on a project to develop an asset tracker that showcases assets in a table format. One of the features I am implementing is the ability for users to check out assets and have an input field populated with the name of the person author ...

javascriptjqueryhtml

Using Angular to swap out the component's selector with HTML code

Consider the following component: @Component({ selector: 'passport-cell', templateUrl: './passport-cell.component.html', styleUrls: ['./passport-cell.component.scss'] }) export class PassportCell { @Input() public la ...

javascripthtmlangularangular6

Organize unformatted information into separate columns for each line

I'm faced with unstructured data in a data.frame column, which looks like this: <a href="https://bitcoin.org/" target="_blank">Website</a> <a href="https://www.bitcoin.com/" target="_blank">Website 2</a> <a href="http://blo ...

htmlrstatistics

Increasing the margin-left automatically in Bootstrap 3.0.0

I am looking to automatically generate margin-left in the ".card" class "style" element every time a post is entered on a page. My jQuery version is 1.12.4 This is my idea: If the .card CSS style has a margin-left of 0 and width of 479px, set position to ...

javascripthtmlcsstwitter-bootstrap-3gsap

A div set to absolute positioning and a width of 100% will exceed the boundaries of a Bootstrap 4

I am attempting to position a div with 100 percent width within a Bootstrap 4.1 col using absolute positioning in order to attach it to the bottom. However, I am encountering an issue where it overflows on the right side of the screen. I have tried assigni ...

htmlcssbootstrap-4

The fixed navigation bar is obscured by the address bar in Chrome mobile

After starting a new project, I encountered an issue with my fixed navbar while testing it on Chrome on mobile iOS. Initially, I believed it to be a browser bug, but after reviewing previous projects, I realized that they functioned properly with the fixed ...

htmlgoogle-chromemobilescrollcss-position

How to insert a custom logo into a bootstrap navbar on a Ruby on Rails website

I have encountered a similar issue to this, but I haven't been able to resolve it. I am currently working on my first application using rails and bootstrap. I've successfully created a navbar with a name and two buttons (you can view the screensh ...

htmlcssruby-on-railsbootstrap-4navbar

What is the process for creating a fade out effect with JavaScript?

https://i.sstatic.net/1qgWt.png Is there a way to create a fade out effect in JavaScript? In the image provided, you can see that when you click on a day, a box slides down. If you click on another day, the previous box slides back up while a new box slid ...

javascripthtmlcss

Applying CSS to replicate the vintage iPhone app icon design

I've been searching online for days, but I can't seem to find any helpful resources on how to use CSS3 to style the old iPhone app icon. My goal is to apply a CSS3 style to this curved line, with a fallback option in case older browsers don&apos ...

htmlcsscss-shapes

Jquery Slidedown causing adjacent div to shift downward

Currently, I am attempting to position a div absolutely using CSS. I have two divs on which I am implementing jQuery slide down and slide up functionalities. The issue I am facing is that when one div slides down, the other div is also affected by the same ...

jquerycssslideup

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

pythonhtmlcssdjango

Issues arising from utilizing Twitter Bootstrap 3.1.x, the box-sizing property, and Revolution Slider

I'm currently working on a PyroCMS theme that is built with Twitter Bootstrap 3.1.x and includes Revolution Slider. However, I've encountered an issue where the property box-sizing: border-box; creates an unwanted grey border as shown in the imag ...

javascriptjqueryhtmlcsstwitter-bootstrap