Place two divs in the center of a container, with one floating to the left and the other floating

I have attempted numerous techniques provided on this site, but none seem to be effective.

My goal is to horizontally center two divs that are positioned to the left and right within a container with a 100% width.

Here is the CSS snippet I am using:

#body-container {
    background: none;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

#body-inner {
    float: left;
    width: 550px;
    left: 325px;
    margin: 0 auto;
    background: none;
    padding-top: 3%;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}

#bodybox {
    margin: 0 auto;
    width: 200px;
    height: 100%;
    right: 325px;
    background: none;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;   
}
csshtmlcontainersmargincenter

Answer №1

It seems like there may be some confusion about how floating elements work in CSS. When you float two divs, one left and the other right, they cannot be centered because they are floated. The properties left and right will not work unless the element is positioned (absolute, fixed, or relative with certain implications). Additionally, trying to align the right edge of #bodybox with the left edge of #body-inner won't succeed as the right property is calculated from the right edge of the screen, not the left.

If your goal is to have the two <div>s aligned next to each other and centered on the page, using inline-block might be a more suitable approach. You can achieve this by setting up your styles as follows:

#body-container {
    width: 100%;
    text-align: center;
}
#body-inner {
    width: 550px;
}
#bodybox {
    width: 200px;
}

In this scenario, the two <div>s will sit beside each other within the container, centering themselves as long as the container is wide enough. If the container becomes too narrow, they will stack vertically while remaining centered.

Answer №2

Is this the solution you've been searching for? Find out here...

It seems like you're attempting to centrally align a <div> nested within 2 additional parent <div> elements...

Check Out the Code Snippet:

#body-container {
    background: none;
    height: 100%;
    width: 100%;
    /*margin: 0 auto;*/

    /* testing border and height, can be removed */
    border: solid;
    height: 500px;
}
#body-inner {    
    width: 550px;
    margin: 0 auto;
    background: none;
    padding-top: 3%;
    padding-left: 10px;
    padding-right: 10px;
    /*border-left: 1px solid #000000;
    border-right: 1px solid #000000;*/

    /* testing border and height, can be removed*/
    border: solid;
    height: 400px;
}
#bodybox {
    margin: 0 auto;
    width: 200px;
    height: 100%;
    /*right: 325px;*/
    background: none;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;

    /* testing border and height, can be deleted */
    border: solid;
    height: 400px;
}

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

"Reduce the height of the navigation bar when the user scrolls down the webpage

I am having an issue with my fixed navigation bar created using bootstrap 4. I want to reduce the height of the navbar as I scroll down the page, but it does not seem to be working. Here is a link to a video showing the problem in action: Link to the vide ...

jqueryhtmlcss

How can I embed an iframe in an Angular 4 application?

I'm facing an issue with my Angular 2 v4 application where I have the following code snippet: <iframe src="https://www.w3schools.com" style="width: 100%; height: 500px"></iframe> However, the iframe does not seem to work. I attempted to ...

javascripthtmlangulartypescriptiframe

The div is empty when trying to display Google Maps

When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from S ...

htmlcssgoogle-maps

How does selecting one dropdown option within a dynamic form field lead to the automatic activation of another dropdown list in a separate form field?

My goal is to create a dynamic form field with a dropdown list that allows users to add and delete multiple contributors. Currently, my code can successfully add and remove multiple users. However, I encounter an issue where selecting the dropdown list tri ...

javascripthtmlangulartypescriptangular-reactive-forms

Select DOM Elements Using JavaScript CSS Queries

As I delved into JavaScript in an attempt to craft my personal slider, I stumbled upon a perplexing discovery. I encountered a CSS regulation that looked like this: html.js #slideshow .slides img { position: absolute; } The explanation suggested that ...

javascripthtmlcssslider

What is the best way to position a div at the center with a set width and fixed positioning?

I'm currently working on coding and attempting to center a div horizontally in the middle of the page. The div is empty at the moment, just a plain white rectangle with specific dimensions. Here's my code snippet: #wrapper{ width:500px; height:1 ...

csshtmlalignmentcss-positioncenter

Using an HTML ellipsis without setting a specific width

I am working on achieving a specific layout as shown in the screenshot below. If both SPAN and B fit within the box, they should be displayed one after another. If they do not fit, SPAN should have an ellipsis while B is fully displayed (never larger tha ...

htmlcsshtml-tablewkhtmltopdfellipsis

How can one determine the proper size for a border?

Can the border of a div be larger than the actual dimensions of the div itself? For instance, if the div is 10x10 in size, is it possible to have a border that is 20x10? ...

cssborder

What is the best .scss file to use for updating the site?

Currently in the process of learning SASS and Bootstrap 4, I have set up some .scss partial files and imported them into my site.scss file as required. Making changes to Bootstrap involved modifying my _my-theme.scss file. But now, I'm wondering about ...

csssassbootstrap-4

Having some vertical alignment problems in Bootstrap 4 with float-right

My template includes a comments section where I have used the w-75 float-right class, but this causes the other column to be pulled to the side where the comments are displayed. https://i.sstatic.net/HSnGT.png Below is the code snippet from my template: ...

htmlbootstrap-4

Exploring the Integration of Metro CSS 3 Form Validation within the MVC Framework

I am looking to implement the form validator feature from Metro CSS 3 in my MVC 5 application. Below is a snippet of my code: @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html. ...

htmlcssasp.net-mvcrazormetro-ui-css

Unable to retrieve data from Flask for AJAX request

When making an AJAX call to a Flask function to retrieve data using a token, the code looks like this: @app.route("/questgen/results", methods = ['POST', 'GET']) def fetch_results(): token = request.form.get('token&a ...

pythonhtmlajaxsqlite

Remove the opacity setting from a transparent box that covers the entire page

I find that real code tends to be more complex, but this snippet does a good job of highlighting the issue at hand. In my setup, there's a background video playing (in this case, just as the background), and on top of that sits a transparent watch fa ...

htmlcss

Transforming a string into a list

My situation involves a controller that retrieves a list of students and displays it in a view. In my controller action, I store the students in a list and then save it to a TempData Variable before redirecting it to another action for display: var Studen ...

c#htmlasp.net-mvc

The element div is not permitted as a child of the element h5 in this particular scenario

My code snippet is as follows: $compile .= "<h5 data-count='".$acctemmpi. "' class='shortcode_accordion_item_title expanded_". $expanded_state . "'>" . $title . "<div class='ico'&g ...

javascripthtmlcss

Issues with CSS3 keyframe animations failing to function in Firefox and IE

My CSS code is functioning properly in Chrome and Safari, but not in Firefox, IE, and Opera when I create the @keyframes rotate {}. It seems that these 4 lines might be causing the issue: animation-duration: 4s; animation-timing-functio ...

internet-explorercssfirefoxcss-animations

Creating a customizable dropdown menu in HTML with potential Javascript integration

I'm looking to add a drop-down menu similar to an <options> tag within an HTML form. However, I also want users to have the ability to type in their own input if they choose, in addition to selecting from a predefined list of options. Essentiall ...

javascripthtmlcss

What steps should I take to modify the URL using the SELECT tag?

Having a bunch of SELECT tags in place <select id="url"> <option id="url1" >url 1</option> <option id="url2" >url 2</option> </select> <button onclick="go()">GO</button> Followed by the associated scrip ...

javascriptjqueryhtmlajax

When I try to access a view using the controller, the CSS does not seem to

Currently, I am developing an asp.net mvc application and the index.cshtml is set as the default page. When I run the application, the startup page displays with the applied CSS without any issues. However, when I access this page from the controller "/h ...

htmlcssasp.net.netasp.net-mvc

We could not locate the requested resource with a DELETE request using the fetch JSON method

Currently, I am in the process of developing a webpage that utilizes JSON API REST alongside XAMPP with an Apache server. Up until now, everything has been working smoothly as I have been utilizing the DELETE method successfully. However, I seem to have hi ...

javascripthtmljsonapache