multiple divisions in the center

I am struggling with centering 2 divs, each containing 3 nested divs wrapped around a big main div. The code I have written is as follows:

<div stye="margin-left:auto; margin-right:auto; width: 1210px;">
<div id="left" style=" float:left; width: 606px; height: 506px;">

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A picture of a cool guy wearing our shirt will go in here.</h1></div>

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; border-left:0px; height:200px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A product image will go in here.</h1></div>  

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0;border-top:0px; border-left:0px; height:300px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A tight product image will go in here.</h1></div>  

</div>
<div id="left" style="float:left; width: 604px; height: 506px;">

    <div style="top:0px; float:right; width:300px; border: 2px solid #FF0; border-left:0px; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A picture of a cool guy wearing our shirt will go in here.</h1></div>

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; border-left:0px; height:200px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A product image will go in here.</h1></div>  

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0;border-top:0px; border-left:0px; height:300px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A tight product image will go in here.</h1></div>  

</div>
</div>
csshtml

Answer №1

margin: 0 auto; max-width: 1210px;

I noticed a small typo with "stye" as well :)

Answer №2

To increase efficiency, it is recommended to utilize CSS classes. In addition, there are two divs with the same id of "left", which should be unique. Consider using classes instead for element identification.

<style type="text/css">
.myclass {
    top: 0px; float: left; width: 300px; border: 2px solid #FF0; height:502px; text-align: center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;
}
</style>
<!-- This div inherits styles from the .myclass definition -->
<div class="myclass">content</div>

For proper alignment of the divs, include the style margin: auto;.

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

The challenges with implementing makeStyles in React Material UI

const useStyles = makeStyles((theme) => ({ toolbarMargin: { ...theme.mixins.toolbar, marginBottom: "3em", }, logo: { height: "7em", }, tabContainer: { marginLeft: "auto", }, tab: { ...theme ...

javascriptcssreactjsmaterial-uiweb-development-server

How do I set up a navigation bar item to align to either side based on the selected language?

I need to adjust the positioning of the last list item component within a specific div. The webpage is available in both Arabic and English, with the direction changing based on the selected language. Here is a snippet of CSS code that I'm using: #na ...

htmlcssbootstrap-4

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

My task involves creating a quiz application where I need to show the answers along with images of the choices stored in my JSON data. However, I encounter an error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I attempt ...

javascripthtmljson

The paragraph text should dynamically update upon clicking a button based on JavaScript code, however, the text remains unchanged despite attempts to modify it

I recently started learning JavaScript and wanted to update the content of a paragraph when a button is clicked. However, I encountered an issue where this functionality doesn't seem to work. <body> <p id="paragraph">Change Text on cl ...

javascripthtml

Which target should be specified for pressing Enter in a Javascript Alert using Selenium IDE?

Seeking assistance with creating simple test cases using Selenium IDE. Encountering difficulties when recording test cases involving Javascript alerts, as Selenium does not support these pop-ups. Attempted a workaround by simulating the Enter key press wh ...

javajavascripthtmlseleniumselenium-ide

Should you prioritize internationalizing your image alt attributes?

Do you localize your alt attribute in img tags for internationalization? Is it beneficial in the long run? ...

htmlinternationalization

Steps to avoid HTML encoding the ' character in Next.js _document.js file

Currently, I am working on integrating VWO into my website by following the steps mentioned here. I have included the VWO script tag within a NextJs Head tag as shown below: <Head> <script type='text/javascript' id='vwoC ...

htmlnext.jsvwo

What could be the reason for my post container not functioning properly?

I am facing an issue with my HTML and CSS code. The container is not displaying as expected, specifically the green bar that should appear below the image. I suspect that the container's auto attribute is causing it to overlook the content inside. Can ...

htmlcsspostcontainers

Reset input fields while retaining placeholder text

Seeking advice on how to use this handy jQuery tool properly: $('.myDiv input').each(function () { $(this).val(""); }); Though it clears my form, I'm struggling to maintain the placeholders of the inputs. Any suggestions? C ...

javascriptjqueryhtmlplaceholder

IE11 adds additional spacing around list elements

I am encountering a peculiar issue with how Internet Explorer 11 handles unordered lists, unlike other browsers. Below is a comparison of how the ul appears in IE11: And here is how it looks in Chrome and other browsers: .iconImgBA { max-width: 2.4r ...

htmlgoogle-chromelesshtml-listsinternet-explorer-11

jQuery - Event cannot be triggered on the 'deselect' or 'focusout' of <option> tag

Check out the demo here Hello there, I have a situation where I need an input box to appear below a select option, only if the user selects "Other". The code currently uses the .click() function on the option, but now I am trying to make the input box di ...

javascriptjqueryhtml

Retrieve a specific element using BeautifulSoup

Looking at this html structure found in a bs4.BeautifulSoup: <div class="bordered radius border-color-ui-2 bg-white h-100"> <a href="#" class="box-card-link-wishlist" role="button" aria-label="Adicion ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

In the event listener, I need to ensure that my list items within the forEach loop are not displaying on separate lines. This issue is causing a problem in a lengthy section of code. The goal is to update questions when an answer is clicked from a list. B ...

javascripthtmlcss

What are some ways to ensure text stands out against a gradient backdrop?

Is there a way to ensure that text adjusts automatically to a background transition from one color to another using only CSS? I've tried using "mix-blend-mode:difference" from a forum, but it had no effect on the text. .container{ color: white; ...

csshtmlbackground-colorlinear-gradients

Adding a timestamp to the src URL in HTML: A step-by-step guide

Looking for a way to implement cache busting in my index.html file. Take a look at the code snippet below: <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="&l ...

htmlcachingbootstrap-4frontend

What methods can be used to stop HTML5 audio from pre-downloading or streaming upon loading?

I am experiencing slow load times on my single page website that features a variety of HTML5 audio players. The issue seems to stem from certain browsers predownloading the content (mp3 and ogg). Internet Explorer Google Chrome Firefox Safari (probably Op ...

performancehtmlaudioaudio-streaming

Ways to apply styles to the final element containing a specific class within a nested list using CSS

Styling the final HTML element with a specific css class presents challenges due to certain constraints that must be considered. In the website I'm currently working on, the navigation menu consists of multiple nested lists. When an element is clicke ...

htmlcsscss-selectorsomeka

Unable to interpret data from the API

{ id: 8, customerName: "xyz", customerMobileNumber: "123456789", customerBillingAddress: "xyz address", customerShippingAddress: "xyz address", customerProductPurchasedDate: "2021-11-09T09:07:00.000Z", cust ...

javascripthtmlcssmysqlreactjs

How to implement multiple conditions with ng-if in HTML

I need to implement a button that is visible only for specific index numbers: <tbody data-ng-repeat="(wholesalerIndex, wholesaler) in wholesalers"> <tr> <td> <but ...

javascriptangularjshtml

Image floating to the left and right sides within a group, with the text vertically aligned in the middle of a div of unspecified height

Can text be vertically aligned in the middle of a div with an unknown height when there is a floated image present? Specifically, for the first and third div group of 'groupsection2', the image will float to the left; and for the second and fourt ...

htmlcss