Positioning of DIV elements in relation to each other

Question

Positioning of DIV elements in relation to each other

I'm currently enrolled in Codecademy's HTML & CSS course and I'm finding the topic of positioning a bit perplexing.

Here is an example of my HTML file:

<!DOCTYPE html>
<html>
<head>
    <style>
    div {
        position: relative;
        display: inline-block;
        height: 100px;
        width:  100px;
        border: 2px solid black;
    }

    div p {
       position: relative;
       margin-top: 40px;
       font-size: 12px;
    }
    </style>
</head>
<body>
    <div><p>Maxime</p></div>
    <div><p>Killian</p></div>
    <div><p></p></div>
</body>

When I leave the code like this, it doesn't give me the expected result. It only behaves correctly when I add a third name in the third div. Here's a picture for reference:

Why are the nested elements (paragraphs) changing the behavior of their parents? Any insight would be greatly appreciated!

html css layout

Answer 1

Answer №1

To properly align your elements, you should adjust the CSS property vertical-align. The Mozilla Developer Network provides a concise definition of this property, which can be found on their website: Mozilla Developer Network Link.

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell block.

If you want to implement this in your code, you can set it within a container div like so:

div {
   vertical-align: top;
}

This adjustment will ensure that all elements inside the container are aligned correctly. You can see a practical example below:

    div {
        position: relative;
        display: inline-block;
        height: 100px;
        width: 100px;
        border: 2px solid black;
        vertical-align: top;    /*Add this property*/
    }
    div p {
        position: relative;
        margin-top: 40px;
        font-size: 12px;
        
    }

<div>
    <p>Maxime</p>
</div>
<div>
    <p>Killian</p>
</div>
<div>
    <p></p>
</div>

Answer 2

To properly align your elements, you should adjust the CSS property vertical-align. The Mozilla Developer Network provides a concise definition of this property, which can be found on their website: Mozilla Developer Network Link.

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell block.

If you want to implement this in your code, you can set it within a container div like so:

div {
   vertical-align: top;
}

This adjustment will ensure that all elements inside the container are aligned correctly. You can see a practical example below:

    div {
        position: relative;
        display: inline-block;
        height: 100px;
        width: 100px;
        border: 2px solid black;
        vertical-align: top;    /*Add this property*/
    }
    div p {
        position: relative;
        margin-top: 40px;
        font-size: 12px;
        
    }

<div>
    <p>Maxime</p>
</div>
<div>
    <p>Killian</p>
</div>
<div>
    <p></p>
</div>

Answer 3

Answer №2

To achieve the desired layout, include a FLOAT property inside the Paragraph

div p {
   position: relative;
   margin-top: 40px;
   font-size: 12px;

   float:left
}

view the live example here

Answer 4

To achieve the desired layout, include a FLOAT property inside the Paragraph

div p {
   position: relative;
   margin-top: 40px;
   font-size: 12px;

   float:left
}

view the live example here

Answer 5

Answer №3

All you have to do is switch the position property from relative to absolute, and then all elements will align perfectly.

div p {
   position: absolute; /*Updated*/
   margin-top: 40px;
   font-size: 12px;
}

Answer 6

All you have to do is switch the position property from relative to absolute, and then all elements will align perfectly.

div p {
   position: absolute; /*Updated*/
   margin-top: 40px;
   font-size: 12px;
}

Answer 7

Answer №4

div {
    position: relative;
    display: table;
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
}
div p {
    position: relative;
    margin-top: 0;
    font-size: 12px;
    vertical-align: middle;
    display: table-cell;
}

<!DOCTYPE html>
<html>
<head>
 </head>
<body>
    <div><p>Sophia</p></div>
    <div><p>Elijah</p></div>
    <div><p>Ava</p></div>
</body>

Answer 8

div {
    position: relative;
    display: table;
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
}
div p {
    position: relative;
    margin-top: 0;
    font-size: 12px;
    vertical-align: middle;
    display: table-cell;
}

<!DOCTYPE html>
<html>
<head>
 </head>
<body>
    <div><p>Sophia</p></div>
    <div><p>Elijah</p></div>
    <div><p>Ava</p></div>
</body>

Positioning of DIV elements in relation to each other

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is preventing me from choosing the complete table?

Revolutionizing Zen Cart with slimMenu

Grid items in Material UI are not positioned next to each other

Video background is malfunctioning on Firefox and Internet Explorer

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

What could be causing my button to be elongated in a vertical direction when a logo image is present

Retrieve the scope object using angular.element and the $ID parameter

Is there a proper method for populating an HTML text with values from a form?

How can you attach a d3 graphic to a table that was created automatically?

incorporating additional lines into the datatable with the help of jquery

Tips on aligning data received as a response from a Perl script

Step-by-step guide to implementing a floating action button on the bottom-right corner of a screen using Material-UI in a React application

Issue occurred while trying to update the MySQL database with an HTML form and Ajax integration

Unable to change background-image as intended

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

Obtain ID and Class details from an HTML webpage using VBA

Challenge with Express Helmet: CSS fails to load properly on iOS Safari browser

What is the process for connecting an HTML page to a CSS file located in a parent directory?

In search of the HTML code for the forward button when extracting content from a webpage

CSS Trick: Applying first-of-type selector to specific instances of a div