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: https://i.sstatic.net/ao3hB.jpg

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

htmlcsslayout

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 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 №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 №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>

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

Adding a Django URL to a personalized email design

Trying to send a Django email using a custom template for my website has been challenging. The Django URL link is not working properly within the template, even though it works fine without the template. The username variable seems to be functioning corre ...

htmldjangodjango-email

Eliminate border around image

I've been trying to get rid of the image border using different methods img { border: 0px; } I even attempted to remove it from the browser console with this code border: none !important This is what my html code looks like <div id="startD ...

htmlcss

Encountering an error while attempting to load the jQuery script: TypeError - $.fn.appear.run is not a

I have included an animation script for CSS in my markup, but I am encountering the following error: TypeError: $.fn.appear.run is not a function Does anyone know why this is happening and how I can resolve it? /* * CSS3 Animate it * Copyright (c) 2 ...

javascriptjquerycss

Ways to activate side-to-side scrolling?

Here on this specific page, I am looking to showcase the SPECIAL and RECOMMENDED sections together in a single line with horizontal scrolling. This is my current CSS: .box-product { width: 100%; overflow: auto; } I have attempted implementing it like th ...

htmlcss

Create static HTML web pages using information from a text file

Exploring a new concept of a random joke generator that loads a unique html page with a quirky joke every time. Currently, the main index page is structured like this: <!DOCTYPE html> <html> <head><title>Jokes</title> ...

javascriptphpjqueryhtml

Ways to stop CKEDITOR from automatically saving textarea or contenteditable content

I've integrated the CKEDITOR plugin for a format toolbar feature on my web application. It seems that the message shown above is a default one provided by CKEDITOR. My goal is to have users start with a blank textarea every time they visit the page, ...

javascriptjqueryhtmlbrowserckeditor

Guide to creating a dynamically filled dropdown menu with Angular 6 HTML

An array of employees is assigned tests by Lead. When assigning tests, the selected employee is properly assigned. When populating back, Lead can see which test is assigned to which employee. The issue I am facing is that EmployeeID is populated correctly ...

htmlangular

Exporting HTML content into an Excel spreadsheet while ensuring that the leading is

public void ConvertHtmlToExcel(string htmlContent, string fileName, out string errorMessage) { errorMessage = ""; try { fileName = fileName == "" ? "Exp ...

c#html.netexcel

Ways to adjust the anchor and h1 elements using CSS

I'm working on an HTML document with some markup, <a class="home-link" href="index.html" rel="home"> <h1 class="site-title">John Arellano's Personal Website</h1> </a> While styling the site title, I encountered a problem ...

htmlcss

Retrieve all items on the webpage using the pattern "_ followed by 10 random characters" through JavaScript

On my webpage, there is a table containing table rows in the following format: <tr id="_C15DKNWCSV">text</tr> I am attempting to scan the webpage and extract all table rows that have an id in the format: id="_(10 RANDOM CHARACTERS)" I want ...

javascripthtmlarraysobjectjquery-selectors

Customizing the appearance of an HTML element using user-input text styling

On my webpage, there are two text areas and a division. One of the text areas is meant for users to input HTML code, while the other is for CSS code. Whenever a button is clicked, a JavaScript function will be triggered to display the combined HTML and CSS ...

javascripthtmlcss

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

css

Electron fails to display images in the compiled version

I'm currently troubleshooting an issue related to displaying images using CSS in my electron project. In the latest version of the application, the images are not showing up when linked from a CSS file. However, in a previous version, the images disp ...

javascripthtmlcsselectron

HTML5 will consistently display the video control panel

I am looking to keep the control panel of the html5 <video> element visible at all times while hiding the play/pause button. I attempted the following: <style> video::-webkit-media-controls-panel { display: flex !important; ...

html

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

javascriptjquerycssdjangotwitter-bootstrap

Is it possible to create a stylish box for an HTML form?

I'm trying to figure out how to put a form inside a box or have a border around it, but I'm stuck. I want the background to be white and was considering using a transparent option. Are there any experts out there with some simple ideas on how to ...

htmlformstextboxborder

Using jQuery .each() within a PHP foreach loop: A guide

In my code, I have a foreach loop that iterates through an array of images, along with some JavaScript logic to add different classes based on whether the width is greater than or less than the height. The issue I'm facing is that the if function onl ...

javascriptphpjqueryhtml

Issues with HTML Email display

Hey there, I am facing an issue while trying to send an HTML email. I am aware that Outlook does not support a lot of CSS formatting, but I can't figure out why this simple setup is breaking. Is there a quick fix or alternative solution? Take a look a ...

htmlcssemailoutlook

The submission of the Jquery form is not successful

I am struggling with a form on my page. I want to disable the submit button and display a custom message when submitted, then use jQuery to actually submit the form. <form> <input type="text" name="run"/> <input type=&quo ...

javascripthtmljqueryforms

Controlling the window opener; Inserting text into an element in the parent window

A pop-up window allows users to select files, then displays the selected image's URL. However, I need to take additional steps beyond that. I am seeking a method to input the URL into an input element on the parent window. window.opener.document.wri ...

javascriptjqueryhtml