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

What could be causing the error when attempting to send an HttpResponse from a Django View function?

Trying to utilize Ajax, I'm attempting to call a Django View function from JavaScript code. The View function is expected to return an HttpResponse, which should then be printed out on the console. However, upon inspection of the console, it simply s ...

javascriptpythonajaxdjangopython-3.x

Updating the title of a page on CoreUI's CBreadcrumbRouter dynamically

I'm currently developing a project with VueJS and the CoreUI admin template. Is there a way I can change the title of the current page as shown on the CBreadcrumbRouter? The GitHub documentation mentions that the script typically displays meta.label ...

javascriptvue.jsvue-routercore-ui

Error encountered when uploading mp3 file to S3 node due to size limitation

Currently, I am utilizing Node to transmit mp3 files to Amazon S3. However, after uploading the file, it shows a size of 9.0 Bytes and when attempting to play the audio from the public URL, it does not work as expected. Here is my current code snippet: rou ...

javascriptnode.jsamazon-s3storage

Having trouble with gsap.reverse() not functioning properly when using onMouseLeave event in React

I've been incorporating simple gsap animations into my React application. I have successfully triggered an animation.play() function on onMouseEnter, but for some reason, the animation.reverse() function is not functioning as expected. Here's ho ...

javascriptreactjstypescriptanimationgsap

The ng-include directive is having trouble finding the partial HTML files

I've been working on setting up a basic tabset with each tab pulling content from a separate partial view with its own controller. To test everything out, I created three dummy HTML files with simple text only. However, I'm having trouble getting ...

javascripthtmlangularjsasp.net-mvcangularjs-ng-include

What is the best way to pass a variable within a jQuery event map?

Consider the below jQuery .on() event map: $('header').on({ mouseenter: function(e) {}, mouseleave: function(e) {}, }, 'li'); Is there a way to share a common var $this = $(this) variable between the mouseenter and mouseleave even ...

javascriptjqueryvariableseventsdry

Encountering issues with fs.writeFile function in a freshly set up Vue project

After initializing a new Vue project with vue cli, I encountered an error when attempting to write files in the main.js file. Below is the code snippet that caused the issue: const fs = require('fs'); // Data to be written to the file. let dat ...

javascriptnode.jsvue.jsfs

Troubleshooting Challenges with JavaScript DOM Manipulation

I am facing an issue with a table where I need the first column to remain fixed when scrolling horizontally. The code snippet below works perfectly for the first column of td's, but fails to work for the tr's. Despite checking the code thoroughly ...

javascripthtmlcss

Mastering data extraction from JSON using React JS (with Axios)

Being new to ReactJS and axios, I am facing a challenge. I need to iterate through JSON data and extract values where the key is a number (e.g. 0, 1, 2...). However, I am unsure how to implement this in my code since the server provides dynamic JSON data ...

javascriptjsonreactjsaxios

Customize the position of the Datetimepicker

Is there a way to customize the position of the datetimepicker, ensuring that it stays within the visual boundaries without getting cut off? I need help with this. ...

javascriptjqueryjquery-uidatepickerdatetimepicker

What is the best way to ensure that the checkbox is not affected when you click on the area?

If the user interacts with the checkbox, I don't want the handleClick function to execute. Is there a way to exclude it or prevent the click event from triggering? <div ... onClick={this.handleClick}> <div> some content here < ...

javascriptreactjs

How can I choose records from collection 'x' in mongodb?

I need to fetch all fields from my database using an API call Here is my code: exports.objfields = async (req, res, next) => { try { var db = mongo.connection; var objeto = req.headers.objeto; const result = db.db.collection(objeto).find( ...

javascriptnode.jsmongodbapi

A layout featuring a grid design that includes spacing and gutters between items, however, there is no spacing between the items

I am looking to create a grid layout where each child element represents an individual grid square. However, I am facing an issue with spacing between the children and the parent container, which is not desired. How can I eliminate this unwanted space? U ...

htmlcssgrid-layoutcss-grid

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

The specified type argument is not compatible with the ObservableInput<any> type

Struggling with an issue where the argument type (key:string) => Observable | PayloadType | is causing problems when trying to assign it to a parameter of type '(value: string, index: number) => ObersvableInput' return action$.pipe( fil ...

javascriptreactjstypescriptobservablemergemap

Error: unable to locate the react-redux context value; make sure the component is enclosed in a < Provider > tag

import React, { Component } from 'react' import { createStore } from 'redux' import { Provider, connect, useSelector } from 'react-redux' function rootReducer(state = { name: 'store' }, action) { return state ...

javascriptreactjs

The cursor seems to be playing a game of hopscotch every time I

In the text box, I've implemented a feature to prevent typing of a forbidden character: #. While this feature is successful in restricting the input of the forbidden character, there's an issue that arises when data is already filled in the text ...

javascriptjquery

Attempting to use tabs within a tab does not function correctly

Visit the CodePen link here This is the codepen example. <div class="row"> <div class="col s12"> <ul class="tabs2"> <li class="tab col s3"><a href="#test1">Test 1</a></li> <li class=" ...

jqueryhtmlcssmaterialize

Achieve the appearance of a galloping horse using JQuery

I am looking for a way to create the illusion of a horse running by displaying a sequence of images quickly. Each image in my folder shows the horse in motion, and I want to make it appear as if the horse is actually moving. Can anyone recommend a librar ...

javascriptphpjquery

Having trouble with Laravel 5.5 and ajax file uploads?

I am encountering an issue with Laravel 5.5 while trying to get an ajax file. I can successfully receive the file using $_FILES, but $request->file() is not working as expected. Here is the code in question. Below are the HTML & Ajax elements: <htm ...

javascriptphpjqueryajaxlaravel-5