Could someone please explain why my center div is not perfectly aligned with my left and right divs?

I am facing a challenge in aligning three div elements together. My goal is to have one on the left, one in the middle, and one on the right.

However, I am encountering an issue where the middle div is not displaying correctly.

Here is my current HTML setup:

<div class="three_contents">
     <div class="left">Left</div>
     <div class="right">Right</div>
     <div class="center">Center</div>
 </div>

And here is my CSS code:

.three_contents {
width: 900px;
border: 0px solid #000;
}

.left{
float: left;
margin-top: 25px;
width: 290px;
height: 290px;}

.right{
float: right;
margin-top: 25px;
width: 290px;
height: 290px;}

.center{
display: block;
margin: 25px auto;
width: 290px;
height: 290px;}

Interestingly, when I added a 1px border to the three_contents div, the middle div suddenly aligned as expected. I have included two screenshots for reference and would appreciate any assistance in resolving this alignment issue. Thank you!

Screenshot showing the misaligned middle div:

After adding the 1px border resulting in the middle div alignment:

csshtmlcenter

Answer №1

Apply margin specifically to the center div. Here's how:

.three_contents
{
    width: 900px;
    border: 0;
}

.left
{
    float: left;
    border: solid 1px;
    width: 290px;
    height: 290px;
}

.right
{
    float: right;
    border: solid 1px;
    width: 290px;
    height: 290px;}

.center
{
    margin: 25px auto;
    display:block;
    border: solid 1px;
    width: 290px;
    height: 290px;
}

You can see this in action on this fiddle I created: http://jsfiddle.net/stakL/1/

UPDATE: Honestly, I'm not entirely sure about the reasoning behind why this occurs. What seems clear is that the margin-top applied to the left and right div's was based on the middle div's top position.

In simpler terms, the center div had a 25px distance from the top, while the left and right div's were also positioned 25px from the center div's top.

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

How can Rails resize images for display on views?

Is there a way to resize an existing image to specific dimensions without creating multiple versions? Currently, I am using Carrierwave and Rmagick to upload images to my Amazon S3 storage bucket. It generates two versions of the image: the original and a ...

ruby-on-railscssimage-processing

PHP/HTML Oops - Invalid Character Detected

While working on my website, I encountered an error that I can't seem to fix: line 31 column 107 - Error: Bad value display.php? url=A GUIDE TO THE PROJECT MANAGEMENT BODY OF KNOWLEDGE for attribute href on element a: Illegal character in query: ...

phphtmlvalidationillegal-characters

Vertical button group within a Bootstrap 5 input group

How can I create an input-group for increasing or decreasing numbers? Below is the code I have: <div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder="0.9"&g ...

htmlcssbootstrap-5

When it comes to visual elements and resources, what is the right balance?

Back in 1998, as I was delving into the world of web page creation, shrinking images down to tiny mosaic-like creations filled with compression flaws was an essential skill. Fast forward to today, and baud rates are a thing of the past. It's now commo ...

htmlcachingimage-processing

Error: The URL specified in /accounts/detail could not be found

I encountered an error with the message "NoReverseMatch at /accounts/detail - Reverse for 'upload' with arguments '()' and keyword arguments '{}' not found. 1 pattern(s) tried: [u'accounts/upload/(?P\d+)/$']". T ...

pythonhtmldjango

Steps for choosing the nth HTML row with jQuery

I'm facing a situation where I need to be able to select the nth row of an HTML table based solely on the id of the selected row. You can see exactly what I mean by checking out this JSFiddle Demo <table class="mytable1"> <tr><td i ...

javascriptjqueryhtml

Having trouble initiating an AJAX call in Django and returning values to my form

Seeking assistance to run an AJAX call for a quick calculation in my django view and display the result within a span tag on my HTML page. New to Javascript, struggling with triggering my AJAX call. Below is my HTML and JS code: <input type="text" nam ...

javascripthtmldjangoajax

Can we apply CSS to all Angular "hosts" collectively, or must we target each host separately?

After reviewing the Angular documentation on :host, I noticed that there is no mention of being able to style all host elements simultaneously. Attempting to set a global CSS style like this: :host { width: 100%; } did not have any effect. However, w ...

cssangularcss-selectors

Attempting to modify the background hue of a Bootstrap 5 Button using javascript

I've been experimenting with changing the background color of a bootstrap 5 button using JavaScript. While I've been able to successfully change the text color with JavaScript, altering the button's color has proven to be elusive. Below is ...

javascripthtmlbootstrap-5

Styling text by reducing its size with CSS

Utilizing a CSS class to truncate text in the accordion header, which includes both a URL and plain text fields that need to be displayed on the same line. Desired Output: .../abc/xyz Count:42 Current output: .../abc/xyz Count:42/ (An odd slash is ...

htmlcssangularjsaccordion

Ways to incorporate an image into an SVG file

This SVG image that I have created presents a unique design. <svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <def> </def ...

htmlcsssvg

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

Struggling to invoke the JavaScript function within the HTML code

I have an HTML file named sof.html and a Javascript file called sofjs.js. I am importing the Javascript file inside the HTML and calling its functions in the body's onload() function. Here is the code snippet: However, I noticed that only the HTML co ...

javascripthtmldom-eventsonload

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...

htmlcssfirebase

Adjust the width of the react-bootstrap container

Is there a way to make the default container width in Bootstrap smaller while ensuring it remains consistent across all viewports? I am looking to decrease the total width of the container, making it relatively shorter than its current size. How can I ach ...

cssreactjsbootstrap-4

A guide on utilizing jQuery to increase the value of an index

When the server returns JSON in this format: "games": [{ "gameType": "RPG", "publishers": [{ "publisher": "Square", "titles": [{ "title": "Final Fantasy", "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ...

javascriptjqueryhtmljson

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I found some interesting code on the internet that creates a glitch text effect. However, when I implement it, the text appears too large for my webpage. I'm struggling to adjust the size. Here is the current display of the text: too big This is how ...

javascriptjqueryhtmlcss

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

javascripthtmlcssonmouseoveronmouseout

Incorporating Material-UI themes within styled components

Trying to incorporate theme spacing value in a styled component but facing issues. Initially, the style was applied to the button, but now it is not working as expected. You can view the problem here: sandbox. import React from "react"; import ...

cssreactjsmaterial-uistyled-components

Can children with a shared CSS class be selected without prior knowledge of the class name?

While I was creating a customized theme for the online typing game, Typeracer (using Css), I encountered an issue: As the user advances in the game, the color of the typed text changes from gray to green. I want to change this green color to a different on ...

htmlcssstylish