What causes my divs to change position when using text <h1>?

When I have multiple divs grouped together inside another div, the placement of my h1 tag shifts downwards. How can I prevent this from happening and ensure that the text is added without any unwanted shifting? This issue only occurs when there are two or more divs next to each other within a parent div. Any guidance on how to fix this would be greatly appreciated. Check out the current layout here, and an example of how I want it to look like with the text included here.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <link href="positioningTrial.css" type="text/css" rel="stylesheet" />
        </head>
        <body>
            <div id="seperate">
                <div class="inside">
                    <h1>hello</h1>
                </div>
                <div class="inside">
                 
                </div>
            </div>
    
            <!--   -------------------------------------------------------------------------------------------  -->
            <div id="main-cont">
                <div class="row">
                    <div class="left">
                        <h1>hello</h1>
                    </div>
                    <div class="middle"></div>
                    <div class="right"></div>
                </div>
                <div class="row">
                    <div class="left"></div>
                    <div class="middle"></div>
                    <div class="right"></div>
                </div>
                <div class="row">
                    <div class="left"></div>
                    <div class="middle"></div>
                    <div class="right"></div>
                </div>
                <div class="row">
                    <div class="left"></div>
                    <div class="middle"></div>
                    <div class="right"></div>
                </div>
            </div>
        </body>
    </html>

    h1,
    p {
        padding: 0;
        margin: 0;
    }
    #seperate {
        border: 1px solid red;
        height: 10vw;
        width: 400px;
        text-align: center;
        margin-bottom: 5px;
    }
    .inside {
        display: inline-block;
        border: 1px solid red;
        height: 100%;
        width: 40%;
    }
    /*  ----------------------------------------------  */
    #main-cont {
        width: 100vw;
        height: 100vh;
        border: 3px solid blue;
        text-align: center;
    }
    .row {
        width: 100%;
        height: 20%;
        border: 3px solid #ff0000;
    }
    .left,
    .middle,
    .right {
        display: inline-block;
        width: 20%;
        height: 100%;
        border: 2px solid black;
    }
    .left {
    }
    .middle {
        width: 40%;
    }
    .right {
    }
    
    /* --------------------------------------------- */


  [1]: https://i.stack.imgur.com/nGHtm.jpg

Answer №1

It seems like there may be some confusion with the page layout functionality.

Could you create a simplified version in jsFiddle similar to this one: https://jsfiddle.net/sheriffderek/hupdmg3q/ or something along those lines?

It's difficult to discern your desired outcome from the provided image.

How can I prevent the divs from shifting when adding text?

All the block-level elements are essentially full-width containers:

<header>
  <h1>Example Heading</h1>
  
  <div>Sample content</div>
</header>

Therefore, their presence occupies space and causes them to push each other down the page.

Your CSS appears to contradict the natural flow of the page structure.

Consider these additional suggestions: https://jsfiddle.net/sheriffderek/7j3f2chw/

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

Challenges in using HAML5 Canvas for mathematical applications

Hey there! I'm currently working on utilizing the canvas element to form various shapes, but I've encountered a few challenges when it comes to the mathematical aspect. Issue 1: I need to calculate an angle that is relative to the preceding line ...

Align the button to the right within the form

Having difficulty aligning a button to the right using float: right; No matter what I try, the button with the "advanced-search-button" class refuses to move to the right. This issue is occurring in Bootstrap 4. HTML <link href="https://maxcdn. ...

JavaScript class name modifications are not functioning as expected

Testing a sprite sheet on a small web page I created. The code for each sprite in sprites.css is structured like this... .a320_0 { top: 0px; left: 0px; width: 60px; height: 64px; background: url("images/sprites.png") no-repeat -787 ...

Group HTML Tables According to Specific Attributes

Let's cut to the chase. My table is functioning well, printing all the necessary information without any issues. However, I'm facing a challenge when it comes to grouping the data rows under Program 1 together. Instead of having Program 1 print, ...

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

Executing Javascript without invoking the default behavior

Recently, I've been delving into the world of JavaScript and experimenting with the prevent default command for ajax pagination. Here's the code I've come up with: http://jsfiddle.net/6pqfH/2/ $('.pagination').click(function(e){ ...

Unable to retrieve angular HTML content from my standard HTML website

I have a basic HTML website and I am looking to redirect to an Angular website upon clicking a button on the HTML site. Both the HTML website and Angular build are hosted on the same server, Hostinger. The button in question is here: This is the simple HT ...

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

In my simple HTML table, I am trying to align the text in all columns to the right side in the second row. After exploring this question and this one, which suggest setting box-sizing: border-box;, I found that the desired result was not achieved. The widt ...

Utilizing HTML data retrieved from an ajax request

I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...

Steps for styling the header of an Antd Collapse Panel

I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code: <Collapse accordion defaultActiveKey={defaultOpenPanel}> <StyledCollapsePanel key="tasksAssignedToMe" header={ ...

Experiencing the Pause: A Fresh Take on

I'm currently using this slideshow for a project, and I need to understand if it's possible to resume its interval. The current issue is that when you hover over the slideshow, the progress bar stops. But once you remove the mouse, it continues f ...

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer? I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer. I came across this solution and attempted to implement it by cha ...

What is the best way to design an element that exceeds the size of my physical body

I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...

The top section of the page is not properly aligned with correct bootstrap spacing and margins, leading to a

Inspiration theme: Porto (The work items on the right are aligned with the top of the viewable portion of the page) when selecting 'view all' on the left menu. Website using the Porto template: DMMBlitz (The work items on the right are NOT alig ...

Learn how to display specific text corresponding to a selected letter from the alphabet using Vanilla JavaScript

I am extracting text from a JSON file. My goal is to enable users to click on a specific letter and have the corresponding text displayed. For example, if someone clicks on 'A', I want to show the text associated with 'A'. An example of ...

Adjust the appearance attribute of FormField within the designated theme

Currently, I am collaborating within an NX Monorepo and utilizing a shared ui-components library that extends the capabilities of Angular Material Components. Despite using different themes for various applications, I am aiming to incorporate appearance=&a ...

Spaces ahead and beneath the text

I'm struggling to style a small block of text within its element perfectly. Despite my efforts, there always seems to be unnecessary space in front and below the words. One workaround I found was adjusting the line height to remove the bottom gap, but ...

Display Checkbox Selections in a Popup Message Box

I've run into a problem while working on an assignment. My goal is to show the checkbox values for toppings in the alert box popup upon submission. However, only the text box and radio values are displaying, while the checkbox returns as blank. Any ...

The Bootstrap modal fails to open

I am currently working on implementing a Navbar button that triggers a Bootstrap modal containing a form. While looking for resources, I stumbled upon a useful script at https://gist.github.com/havvg/3226804. I'm in the process of customizing it to su ...