Position divs to be perfectly aligned and centered

I'm in the process of creating a webpage and facing challenges with aligning my divs properly, specifically the animated company logos.

I want them to be positioned side by side rather than on top of each other, with space in between to fit the layout of the page.

For visualization, click here.

Below is a snippet of my code:

<html>
    <head>

        <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/CSS" href="Style.css" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header id="container">
            <h1>
 <a href="a">My Interactive Webpage </a>
</h1>
                     <h1>
 <a href="a">Career Page </a>
</h1>

<style> 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="Information Page.html">Information</a></li>
  <li><a href="Game Page.html">Games</a></li>
  <li><a href="Career Page.html">Career</a></li>
</ul>      
        </header>      
        <div id="container">     
        <head>
<center>

<p><font face="verdana" color="green">Welcome to my Career Page! 
I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
Below are some of the companies I would dream of working for.   Please click the text to be taken to the respective homepage of each company. 
</font></p>
</center>                   
           </div>                  
        <div class="tilt pic">  
<style> 

#rcorners3 {
    border-radius: 25px;
    background: url(http://i.imgur.com/AkIPWeF.png);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
</style>

<a href="http://eu.blizzard.com/en-gb/">
    <font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
 </a>
    </div>

    <div class="tilt pic">    
        <style> 
#rcorners2 {   
    border-radius: 25px;
    background: url(http://i.imgur.com/Mouf1lw.png);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>

<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
 </a>
    </div>
<!DOCTYPE html>
<html>
<head>

<div class="tilt pic">    
        <style> 
#rcorners4 {
    border-radius: 25px;
    background: url(http://i.imgur.com/pFeIHdd.png);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
</style>

<a href="https://www.ubisoft.com/en-GB/">
    <font color="white"><p id="rcorners4">UBISOFT</p></font>
 </a>
</div>
</body>
</html>

</body>

</html>

 </div>      
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
    <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
    </body>   
   </html>
javascriptjqueryhtmlcss

Answer №1

Many have pointed out the unnecessary repetition in your code that can be tidied up. To address your query, I would recommend utilizing a table structure. Specifically, you can use a table row with its width set to 100% to format your images as desired. Here's an example:

<table style="width: 100%;">
<tr>
<td>
  <div class="tilt pic">
    <a href="http://eu.blizzard.com/en-gb/">
      <font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
    </a>
  </div>
</td>
<td>
  <div class="tilt pic">
    <a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
    </a>
  </div>
</td>
<td>
  <div class="tilt pic">
    <a href="https://www.ubisoft.com/en-GB/">
      <font color="white"><p id="rcorners4">UBISOFT</p></font>
    </a>
  </div>
</td>

To center the images within their cells, make sure to add the following CSS properties to each corresponding ID:

#rcorners3 {
margin-left:auto;
margin-right:auto;
...
}

#rcorners2 {
  margin-left:auto;
  margin-right:auto;
  ...
}

#rcorners4 {
  margin-left:auto;
  margin-right:auto;
  ...
}

This adjustment ensures equal spacing on both sides of the element regardless of available space.

For a working demonstration, refer to this example - http://jsfiddle.net/ddwqkm5t/1/

Answer №2

When reviewing the code, it became evident that there are numerous errors present. While attempting to address them, it became clear that this task would require a considerable amount of time...

Here is an initial effort to rectify some of the errors: https://jsfiddle.net/6qfq1c7g/

However, it is advised not to utilize this code in its current state due to the prevalence of remaining mistakes.

I recommend familiarizing yourself with classes and the basic structure of HTML, which can be found here: http://www.w3schools.com/html/html_intro.asp

Avoid duplicating <html>, <head>, or <body> tags within your code.

While <style> tags can be used within HTML, it is advisable to consolidate them for improved organization. Best practice involves creating a separate CSS file, as demonstrated by the use of style.css in the head section.

Utilize classes for elements that share similar characteristics. For example, all "company" elements should have a consistent set of styles applied:

.company {
   border: 1px solid #333;
   border-radius: 5px;
   // additional styling...
}

To specify background images, consider using specific ids or classes:

.blizzard {
  background-color: url('blizzard.jpg');
}

.ubisoft {
   background-color: url('ubisoft.jpg');
}

This approach will enhance the cleanliness of your code.

In response to the issue at hand:

To align the three elements, each element should include the following CSS style:

display: inline-block;

Additionally, I suggest including:

vertical-align: top;

to ensure consistent alignment. To center the elements, you may also need to apply:

margin: 0 auto;

Furthermore, the outer wrapping element should incorporate:

text-align: center;

Answer №3

Experience creating an interactive webpage with this code snippet:

<html>
    <head>

        <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/CSS" href="Style.css" />

               <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header id="container">
            <h1>
 <a href="a">My Interactive Webpage </a>
</h1>
                     <h1>
 <a href="a">Career Page </a>
</h1>

<style> 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="Information Page.html">Information</a></li>
  <li><a href="Game Page.html">Games</a></li>
  <li><a href="Career Page.html">Career</a></li>
</ul></answer3>
<exanswer3><div class="answer" i="34226095" l="3.0" c="1449834203" v="-1" a="SXZpbiBSYWo=" ai="4925134">
<p>Dive into the coding world with this sample code:</p>

<pre><code><html>
    <head>

        <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/CSS" href="Style.css" />

               <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header id="container">
            <h1>
 <a href="a">My Interactive Webpage </a>
</h1>
                     <h1>
 <a href="a">Career Page </a>
</h1>

<style> 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="Information Page.html">Information</a></li>
  <li><a href="Game Page.html">Games</a></li>
  <li><a href="Career Page.html">Career</a></li>
</ul>

        </header>

        <div id="container">


        <head>

<center>

<p><font face="verdana" color="green">Welcome to my Career Page! 
I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
Below are some of the companies I would dream of working for.   Please click the text to be taken to the respective homepage of each company. 
</font></p>

</center>            

           </div> 


        <div class="tilt pic" style="float:left; padding:10px;">

<style> 

#rcorners3 {

    border-radius: 25px;
    background: url(http://i.imgur.com/AkIPWeF.png);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 

}
</style>



<a href="http://eu.blizzard.com/en-gb/">
    <font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
 </a>
    </div>




    <div class="tilt pic" style="float:left; padding:10px;">    
        <style> 
#rcorners2 {

    border-radius: 25px;
    background: url(http://i.imgur.com/Mouf1lw.png);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 

}
</style>

<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
 </a>
    </div>
<!DOCTYPE html>
<html>
<head>

<div class="tilt pic" style="float:left; padding:10px;">    
        <style> 
#rcorners4 {

    border-radius: 25px;
    background: url(http://i.imgur.com/pFeIHdd.png);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 

}
</style>



<a href="https://www.ubisoft.com/en-GB/">
    <font color="white"><p id="rcorners4">UBISOFT</p></font>
 </a>
</div>
</body>
</html>





</body>


</html>

 </div>   


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
    <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
    </body>

   </html>

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

When using Magento, pasting the same link into the browser produces a different outcome than clicking on window.location - specifically when trying to add items to the

I'm in the process of setting up a Magento category page that allows users to add configurable products directly from the category page, which is not the standard operation for Magento. After putting in a lot of effort, I have almost completed the ta ...

javascriptmagentomagento-1.7

ReactJs CSS - This file type requires a specific loader for processing. There are currently no loaders configured to handle this file

I've noticed that this issue has been raised multiple times before. Despite going through all the questions, I still can't seem to resolve it. The transition from Typescript to Javascript went smoothly until I reached the implementation of CSS. U ...

javascriptcssreactjswebpack

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

javascriptjquerycsstwitter-bootstrap

What is the best way to manage a promise's response?

I'm currently facing a situation where I need to create a petition to an endpoint and retrieve the URL of the backend that I intend to use. My setup involves a file with the API configuration where I instantiate axios. Previously, my approach was sim ...

javascriptreactjspromiseasync-awaitaxios

What causes the non-reachable part of the ternary operator to be evaluated prior to updating the state with setTimeout?

Check out my latest code snippet for a react component that renders a massive component. While the huge component is still rendering, a loading indicator will be displayed. import * as React from "react"; import ReactDOM from "react-dom"; import {HUGECom ...

javascriptreactjssettimeoutjsxternary-operator

Utilize the lodash times method for indexing

I have a requirement to duplicate a component "n" number of times. I achieved this by utilizing the lodash method called "times". However, I encountered an issue with assigning an index as a key for the generated components. Below is the snippet of code t ...

javascriptnode.jslodash

Initiate the Bull Queue Process upon launching the Application

As I develop my API, I am setting up a queue and adding jobs to it. Additionally, I have configured the API to start processing these jobs as soon as they are added. const newQueue = createQueue(queueName, opts); newQueue.add('JokesJob', data, o ...

javascriptnode.jsqueuebull.jsbull-queue

Tips for properly handling special characters in DOM elements

I'm encountering an issue while trying to set CSS based on a condition inside quotes. This is causing a syntax error for me. Can anyone provide assistance in finding a solution? <div> <span ng-class='{\' rdng-error-rate&bsol ...

htmlangularjskendo-ui

Ajax login feature not redirecting to login popup after successful login

When attempting to open a popup by clicking on the login window, a pop-up appears with a URL requesting username and password along with Google sign-in. However, when a user tries to log in using Google sign-in through the pop-up, it fails to redirect to ...

javascriptjqueryajax

Search for Azure Time Series Insights (TSI) data insights

Is there a way to access real-time data from Azure TSI using the TSI query API? I am currently utilizing the TSI JavaScript Client library, which provides two wrappers for the Query API. However, these wrappers only allow me to retrieve aggregate data li ...

javascriptazure

Ways to utilize jQuery for selecting IDs that are not part of a specific class

I am currently working with a jQuery script that is designed to target all IDs containing 'Phone'. However, I am facing an issue where I need the selection to ignore those IDs if they are part of a specific class. The current code I have, from m ...

jquerycss-selectors

Changing the contents of a global array in JavaScript

$(document).ready(function(){ var currArray=null; var group=null; var admin=null; var equipment=null; var student=null; console.log("after get array info"); for(var i=0; i<equipment.length; i++) { console.log("equipment at index after get array info ...

javascriptjqueryarrays

The Angular ViewportScroller feature appears to be malfunctioning in the latest release of Angular,

TestComponent.ts export class TestComponent implements OnInit, AfterViewInit { constructor( private scroller: ViewportScroller, ) {} scrollToAnchor() { this.scroller.scrollToAnchor('123456789'); } } HTM ...

javascriptangularangular14

Tips for integrating an infinite scroll feature using HTTP requests?

My current project involves developing a webapp using AngularJS to interact with a long array of objects. To display these objects on my index, I am utilizing nested ng-repeat functions. Additionally, I have implemented infinite scroll functionality simila ...

javascriptangularjsnginfinitescroll

Creating multiple objects using a single object in JavaScript can be achieved by using the concept of object

When presented with the following data structure: { "time_1": 20, "time_2": 10, "time_3": 40, "time_4": 30 } and expecting a result in this format: [ { "key1": "time_1" ...

javascriptarraysjsonobject

Combining audio and video streams in Node.js

I'm currently developing a YouTube video downloader using the ytdl-core library. However, I've encountered an issue where it cannot fetch high quality videos with audio because they are stored in separate files on YouTube. My goal is to download ...

javascriptnode.jsexpressytdl

Events Unavailable for Viewing - Full Calendar - Database Error Encountered

I am currently developing a calendar application. While I have managed to successfully display the calendar and add events, I am facing an issue with displaying events on the monthly view. Here is a snippet of the HTML code being used: <head> &l ...

phphtmlsqljson

Creating Typescript packages that allow users to import the dist folder by using the package name

I am currently working on a TypeScript package that includes declarations to be imported and utilized by users. However, I have encountered an issue where upon publishing the package, it cannot be imported using the standard @scope/package-name format. I ...

javascriptangulartypescriptpackage

Angular 7 router navigate encountering a matching issue

I created a router module with the following configuration: RouterModule.forRoot([ {path: 'general', component: MapComponent}, {path: 'general/:id', component: MapComponent}, {path: '', component: LoginComponent} ]) Sub ...

javascriptangulartypescriptangular-routerangular9

Animate a div once the parent section becomes visible while scrolling

I previously had this function working, but it seems that I have somehow messed it up in the process. My current setup includes a scroll hijack feature that navigates users to a new section or card each time they scroll. The script adds a visible class w ...

javascriptjqueryhtmlcssscrollview