What is the reason behind larger text causing content on the left to be pushed downward?

After creating four basic divs, I decided to modify the header div's properties.

Here is the HTML code:

   <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        <div class="header">Lorem Ipsum</div>
    </div>

This is the CSS code:

.third {
    width:500px;
    display:inline-block;
    border-right:1px solid black;
    height:400px;
}
.header {
    margin-left:16%;
    font-family:Arial;
    font-size:200%;
}

The third div looks good, but the first two divs get pushed down due to the larger text size. Is there a solution to prevent this alignment issue?

htmlcss

Answer №1

To solve your issue, simply add the CSS rule vertical-align: top.

Check out this Fiddle for a demonstration: http://jsfiddle.net/QX7FH/

If you're interested in understanding why this solution works, andyb provides an excellent explanation here: Why does this inline-block element have content that is not vertically aligned

Answer №2

If you switch to using floats instead of inline-block, you will also improve browser support (especially for older versions of Internet Explorer):

http://jsfiddle.net/bR5Jv/

.third {
    width:500px;
    display:block;
    border-right:1px solid black;
    height:400px;
    float: left;
}

Additionally, I included a container around all the divs to properly clear the floats.

Answer №3

When using div elements in your HTML, keep in mind that they are block-level elements by default. This means that they will automatically create a line break. To prevent this behavior and have them display inline, you can add the CSS property display:inline-block; to your .header class.

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

Aligning msform using CSS

Can someone assist me with centering the form (#msform, #msform fieldset) on all browsers while also keeping the image within the border and ensuring that the form does not extend beyond the right border? JSFiddle #msform { width: 1200px; margin: ...

javascripthtmlcss

Obtain the index when clicked using jquery

I am currently working on creating a 2 player checkers game for my college project. However, I have hit a roadblock in determining the index of the 2D array when I click on a game piece. The HTML code structure I have divided into: table - representing ...

javascriptjqueryhtmlcssarrays

Creating an Android application that integrates HTML styling efficiently

I currently have a social networking site with a mobile web version, and my goal is to package that view into an Android app and potentially enhance it with a custom splash screen. Essentially creating a branded browser window. If you have any tips or adv ...

jqueryandroidhtmlcssweb

Enter the website address into the designated text field, then simply click on the GO button to be redirected to the destination website within

I'm looking for a basic HTML code that allows users to input a website URL in a text field on my website, hit "GO," and be redirected to the entered site. It seems like this feature is hard to come by as I haven't found any websites with similar ...

htmlhttp-redirect

Using jQuery to replace the dynamic keyword in HTML content

<div class="fotorama__stage__frame magnify-wheel-loaded fotorama_vertical_ratio fotorama__loaded fotorama__loaded--img fotorama__active" aria-hidden="false" data-active="true" style="left: 0px;" href="https://static.domain.com/media/catalog/product/cach ...

javascriptjqueryhtmlimage

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, th ...

javascripthtmlcsstwitter-bootstraphtml5-video

Leveraging jQuery for dynamically populating <select> elements within an HTML document using JSON data

My goal is to populate my <select> element with country names from a JSON file using jQuery/ajax. <div id="navbar"> <label for="countrySelect">Select a country from the list:</label> <select id="count ...

htmljqueryjsonajaxcurl

What is the best way to leverage environment variables in my CSS within the context of Next.js for defining the primary color scheme?

Is there a way to use an environment variable to specify the base color in my CSS? I am working with NEXTJS. All of my colors are defined as variables in my globals.css: @layer base { :root { ... --primary: #0096d0; --primary-bright: ...

cssnext.jscolorsenvironment-variablescss-variables

Adjust the ribbon's width without altering its placement in order to make it fit snugly inside the box

Is there a way to decrease the width of the ribbon while keeping its position intact? I need some guidance on what I might be doing wrong. .ribbon-content { position: relative; } .ribbon-content>[class*=ribbon] { position: absolute; z-index: ...

htmlcss

Utilizing Bootstrap results in the font size being dynamically adjusted

Initially, I created a CSS file for my website. However, in the middle of development, I decided to incorporate Bootstrap by including the Bootstrap CDN in the HTML file. Unfortunately, this change ended up reducing the font size of the entire project. BE ...

htmlcssbootstrap-4

What is preventing Google Chrome from automatically breaking?

I seem to have made a mistake in this document, but I can't quite pinpoint what it is. There isn't much content in here yet as I am still in the process of building it for a WB. Interestingly, it works in Internet Explorer but not in Google Chrom ...

cssgoogle-chromehtmlpre

Ways to access data stored in the browser's local storage

I have a unique reminder app that stores user inputs in local storage and then displays them on a different page within the app. The process of storing these values in local storage is done through this code snippet: <h2 style="text-align:center;margin ...

javascripthtmllocal-storage

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...

htmlcssjsp

Refresh a page automatically upon pressing the back button in Angular

I am currently working on an Angular 8 application with over 100 pages (components) that is specifically designed for the Chrome browser. However, I have encountered an issue where the CSS randomly gets distorted when I click the browser's back button ...

javascripthtmlangulartypescript

The appearance of Bootstrap 4 post cards on my website appear to be distinct

I came across a Bootstrap 4 card snippet that I wanted to integrate into my WordPress plugin. However, after integrating it, the display seemed different from the original form. My goal is to showcase posts in a 3-column layout. I noticed that some post ...

phpcsswordpressbootstrap-4

reduce input to 2 characters using jQuery

Is there a way to trim the input text down to just the first two characters when a button is clicked? For example, if I enter "BT2J43" into the input field, can it be automatically shortened to "BT" upon clicking the button? I'm new to learning jQue ...

javascriptjqueryhtmlcsstrim

Issue encountered when attempting to activate a Vue function in order to update a specific component's field

Let me preface this by saying that I am new to Vue.js and still learning the ropes. Here's what I'm trying to achieve: I have a label and a button. The behavior I want is that when the label is not visible, the button should display "Show Label" ...

javascripthtmlvue.js

The foundation CLI encountered an error due to primordials not being defined in the CSS

While running sudo npm install --global foundation-cli, I encountered an issue while trying to create a Foundation Zurb project. Here is the error message I received: https://i.sstatic.net/UWSIm.png ...

cssnpmzurb-foundation

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

javascriptcssreactjs

The issue with using the jQuery blur() event on a Div element

I am facing an issue with hiding specific popups that are based on divs. When I click outside those divs, they do not hide. Here is a sample code of what I am currently attempting: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

jqueryhtmlonblur