Centering dilemma in the div

I have a main container with a width of 940 pixels.

Inside the main container, there are two divs with a width of 250px each.

My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamically. If the second div is not present, the first one should be centered. When the second div is added, both should be centered within the 940px main div.

I've tried various methods but haven't found a solution yet. Please help!

Here is the simplified code:

CSS

   div.box {
    background: #EEE;
    height: 400px;
    width: 940px;
}
div.left {
    background: #999;
    float: left;
    height: 390px;
    width: 250px;
}
div.right {
    background: #666;
    height: 390px;
    width: 250px;
    float: left;
}
div.clear {
    clear: both;
}

HTML

 <div class="box">

       <div class="left">Tree</div>
       <div class="right">View</div> (this div will be dynamically added)
       <div class="clear" />

    </div>

Thank you

Answer №1

Experiment with this code snippet in your div.container CSS:

margin: 0 auto;

To see a live demonstration, visit JSFIDDLE DEMO

Answer №2

modify the remove clear:both; style

http://jsfiddle.net/aBCde/7/

Cascading Style Sheets

  div.container {
    width: 800px;
    background: #DDD;
    height: 300px;
    display: table;
    margin: 20px;
}
div.left-side {
    background: #777;
    display: table-cell;
    width: 200px;
}
div.right-side {
    background: #444;
    display: table-cell;
    width: 200px;
}

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 Epub text box feature is malfunctioning

I have a quiz task in an epub format where users need to enter their answers in a text box after reading the question. However, I am facing an issue where the text box does not display the keyboard for typing the answer. Is there a solution using javascr ...

Why are JSON values showing up as undefined in HTML conversion?

I am new to JSON and I am experimenting with the open table of World Cup stats mentioned on this page (http://yhoo.it/ydnworldcup2010). The code below (from a demo I came across, just with some changes to YQL call for getJSON and div names) is returning a ...

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

Troubleshooting Problem with jQuery Submit on Chrome in ASP.NET MVC 3 Ajax.BeginForm

Hey everyone, I've been trying to solve a problem all morning without any luck. Here's the issue -> I have an Ajax.BeginForm that is triggered by a checkbox using jQuery: <% using (Ajax.BeginForm("Edit", "Products", ...

transmit data via Javascript to interact with a Python web application

I'm having issues sending a json object from JavaScript to a Python webservice. The service keeps treating it as a string. Here are the codes for both client and server sides: CLIENT SIDE: $("#button").click(function () { $.ajax({ ...

I wonder which Material Design repository is the source of this library

I am attempting to replicate the CSS style used in this particular Material Design-inspired web application: https://i.stack.imgur.com/utalx.png After exploring Materialize CSS and MUI, I have not been able to pinpoint the exact framework responsible for ...

After the decimal point, there are two digits

My input field is disabled, where the result should be displayed as a product of "Quantity" and "Price" columns ("Quantity" * "Price" = "Total"). However, I am facing an issue where the result often displays more than 2 digits (for example: 3 * 2.93), desp ...

Comparison of Ajax and submit: Why am I not receiving identical responses?

Utilizing Ajax for submission and all global variables ending in box. Note that the initialization code is functioning correctly. function begin() { if (confirm("Proceed at your own risk as all consequences are yours!!")) { var usernameNa ...

What is the best way to place a list within a <div> element?

There is a <div> with an image in the background. I now want to include a list within that div, but I'm having trouble positioning it. Check out this image for reference In the image above, you can see the background and the list, but I'm ...

Leveraging the power of Google Closure Templates alongside the versatility of

We are embarking on developing an application using JavaScript and HTML5 that will utilize a rest API to access server resources, leveraging the power and convenience of jQuery which our development team is already proficient in. Our goal is to make this a ...

Explore jQuery RSS search dropdown by value and text

I need assistance with a dropdown on my website, set up as follows: <select name="cboService" id="cboService" tabindex="10"> <option selected="selected" value="Novalue">Select Service</option> <option value="011">UPS Standard -- £ ...

The Bootstrap Carousel is limited to a maximum of three items and cannot accommodate additional items

I have incorporated the Bootstrap 5 carousel with a total of 9 items The first item is a YouTube video, while the other 7 items are empty Divs with background-images The issue arises where only the first three items seem to be working, and only three ind ...

Picking multiple attributes using Scrapy

Currently attempting to extract information from a webpage using scrapy. Suppose the HTML on the page looks like this: <div class=example id=example> <p>Some text</p> <ul> <li>A list 1</li> <li>A list 2</li> ...

The file reader feature is currently experiencing issues on both Chrome and Internet Explorer browsers

After uploading an image file from my PC, I convert it to a data URL and then use the img element to preview it. Surprisingly, this process works perfectly fine in Firefox. However, when I try to do the same in Chrome or IE, the src attribute of the img el ...

The specified CSS background image is not correctly aligned with the dimensions of the selector

I have multiple non-local images that I want to use as background images for classes with a width of 500px and height of 330px. Even though these dimensions are specified in the CSS properties for the class, the background: url('http://www.example.com ...

Unable to examine a specific component

As I attempt to inspect an element by right-clicking and selecting "Inspect," I encounter the following details: Screenshot1 Screenshot2 Despite trying the code snippet below, it did not yield the desired results for me: driver.findElement(By.id("tmsMo ...

Running a code from a plugin in Wordpress site

I am currently utilizing the "wp-video-lightbox" plugin for WordPress, which generates small floating boxes for my videos. I am interested in incorporating variables like http://www.example.com/?video3 to provide shortcuts similar to what YouTube offers. ...

Having trouble with CSS transitions not showing up correctly in Chrome. Any suggestions on how to resolve this issue?

While working on a static website, I attempted to apply a background-color transition to a button. Despite reviewing my code multiple times, I discovered that the issue was not with my coding. It seems like the browser is having trouble displaying CSS tran ...

Identifying SyntaxError during JSONP data retrieval

I'm currently working on a project that involves identifying a SyntaxError when accessing JSONP resources with jQuery, even if they are potentially malformed. For example: try { $.ajax("http://www.google.com", {dataType:"jsonp"}); alert("good"); ...

Steps to execute a JSON file once another JSON has been successfully loaded

I'm facing a similar challenge to the one presented in this question. However, I need to load an additional JSON file after the when() method is executed. Essentially, I want to retrieve JSON data within the when() function and then use that informati ...