`CSS alignment issues`

Below is the HTML and CSS code that I am working with:

  .divOuter {
  width: 50%;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 150px;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;
<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png"></img>
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

Although I attempted to use the outer div to center everything, I encountered an issue as shown in this image: https://i.sstatic.net/akJEc.png

The squares in the middle are not properly centered. For a correct display, please refer to xat.me/madses1996

My goal is to have the squares lined up next to each other.

htmlcss

Answer №1

To achieve the desired layout, apply the flex property to the outer element:

.containerOuter {
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.containerInner1,
.containerInner2,
.containerInner3 {
  flex: 1
}

Answer №2

Your .divOuter is correctly centered, however, the issue lies in applying a fixed width of 150px to your three inner elements. Changing this to a percentage-based width of 100% will properly center the elements:

.divOuter {
  width: 50%;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 100%;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;
<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png" />
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

If a fixed width is preferred, you can set it on .divOuter:

.divOuter {
  width: 150px;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 100%;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;
<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png" />
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

Additionally, please remember that the <img> tag is self-closing; hence, there is no need for a closing </img> tag.

I hope this information proves valuable! :)

Answer №3

After examining Chrome's Inspect feature, I managed to achieve the desired results by making some adjustments to the CSS classes of .divInner1, 2 & 3.

  1. Deleted: "float: left;"
  2. Added: "display: inline-block;

https://i.sstatic.net/updE6.jpg

Answer №4

  

    body{
  
  background: black;
}

#title h3{
  color: white;
  text-align: center;
}
.divOuter {
      margin: 0 auto;
      width: 100%;
      text-align: center;
      margin: 0 auto;
    }

    .divInner1,
    .divInner2,
    .divInner3 {
          border: 1px solid white;
        
          width: 150px;
          height: 150px;
          margin-left: 3px;
          margin-right: 3px;
          margin-top: 50px;
          text-align: center;
          display: inline-block;
<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png"></img>
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

.divOuter {
  width: 150px;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 100%;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;
<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png" />
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

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

Tailwind's unique approach to custom @font-faces allows for

Recently, I've been working on a project with Tailwind CSS. I encountered an issue when trying to implement a custom font using @font-face. Despite placing the font file in public/assets/font directory, it still doesn't seem to load properly. Her ...

htmlcssfont-facecustom-font

Streamline your processes by automating jQuery AJAX forms

I am looking to automate a click function using the code snippet below in order to directly submit form votes. Is there a method to develop a standalone script that can submit the votes without requiring a webpage refresh: <input type="submit" id="edit ...

javascriptjqueryhtmlajaxforms

What is the best way to capture videos using Safari?

Hey there! I've set up the browser camera on my website for users to record live tests. It's been working great on Chrome and Firefox using MediaRecorder, but unfortunately, Safari isn't cooperating. Does anyone know of an alternative to Me ...

javascripthtmlsafari

I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

My code snippets: <article class="featured"> <img src="http://www.placehold.it/300x100/ff0000"> <p> <!--Text--> </p> </article> <article class="sub-featured"> <img src="http://www.placeh ...

css

Customize the website's CSS for optimal viewing on an iPad

I have a website with two CSS files: one for viewing the site on a desktop screen and the other for viewing it on an iPad screen. Despite having the same HTML code, is there a way to detect the iPad device and force it to use the appropriate CSS file? Tha ...

asp.nethtmlcssipadweb

Ensure to validate the character length prior to saving data using an ajax request

When I try to save data using ajax/jquery, the character length pattern check does not work as expected. The form tag includes: pattern=".{6,}" oninvalid="this.setCustomValidity('Password must be at least 6 characters')" Below is the form and a ...

jqueryhtmlajax

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

htmlcsswindowsmacos

When a table is required, .data() will provide a string

Within my HTML code, there is a table structure defined as follows: <table id="table" data-keys="{{keys}}"> Here, the keys variable represents an array (as I later iterate through it using {% for k in keys %}). However, when I t ...

javascripthtmljqueryjinja2

Fade-in effect on one DIV element impacting the values of other div

As a newcomer to jquery and JavaScript, I'm facing some challenges in getting the desired functionality. Currently, I am trying to animate three images simultaneously - one moving downward (iphone), another fading in (shadow), and the third one animat ...

jquerycsshtmlfadeout

Unable to drag and drop functionality is not functioning properly in Android Emulator with Html and jQuery

As a newcomer to Android, I have successfully created a project in HTML that runs perfectly as intended. However, when trying to run this HTML project on an Android emulator, I encountered an issue with drag and drop functionality not working. I utilized ...

androidhtmljquery

What is the best way to include and delete several images on a canvas?

Recently, I've started working with canvas in HTML5 and I'm tasked with creating a paint application. One of the features I need to implement is the ability to dynamically add selected images to the canvas as the mouse moves, and then have the fu ...

javascripthtmlcanvas

NameError: The 'find_all' attribute cannot be found in the object of type 'NavigableString' (AttributeError)

import requests from bs4 import BeautifulSoup url=("http://finance.naver.com/news/mainnews.nhn") r=requests.get(url) soup=BeautifulSoup(r.content) a_data = soup.find_all("li",{"class":"block1"}) for item in a_data: print item.contents[0].find_all("d ...

pythonhtmlbeautifulsoupscrapy

Generate a structured table display using the JSON information

How can I convert the following JSON data into a tabular view? {"data_report":[{"data":[1,2,0,3],"label":"Test1","backgroundColor":"blue"}, {"data":[3,4,2,5],"label":"test2","backgroundColor":"#a3eaae"}, {"data":[2,3,1,4],"label":" ...

javascripthtmljson

Is there a way to incorporate a click function into this code if the id and xpath methods are ineffective?

Check out the code snippet below: <div class="btn-group" style="margin-top: -10px; box-shadow: none !important;"> <a class="btn btn-clear store-name headerActive" style="margin-left: 0px !important;" ng-click="account();" _href="#/app ...

cssxpathselenium-webdrivercss-selectorsclassname

Unable to set a background image sourced from API data onto a div element in Node.js

I am having trouble setting a background image to a div using the API-provided link in my CSS. Even when trying to directly access the image in Chrome, nothing seems to happen. Here's the code snippet: function getData(responseData) { var poster ...

javascriptjquerycssnode.jsapi

Expanding to a full width of 100%, images on desktop screens are displayed larger than their original

I am facing a challenge with my three images lined up in a row, each with a width of 323px. In order to make my website responsive, I decided to switch from using width: 323px; to width: 100%;. While this adjustment worked well on mobile devices, I encoun ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible for me to create a Pomodoro clock similar to this one?

Can you provide guidance on creating a Pomodoro clock similar to this design: https://i.sstatic.net/qhd1Z.png As time progresses, the arrow should move around causing the circumference of the circle to increase. What approach or library would you recomm ...

javascriptjqueryhtmlcss

Connecting a string array to the navigation bar

Need Assistance with AngularJS: In my controller, I have a string array that looks like this: var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.menuitems =['Home','About&apos ...

javascriptcssangularjshtmlasp.net-web-api

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

css readonly input textbox not changing background color when set

I've come across an old Classic ASP form that requires additional functionality, and I'm currently using IE11. To address this, I decided to include a doctype like so (even though I'm unsure of its necessity): <!DOCTYPE html> In my C ...

htmlcssreadonly-attribute