Achieve center alignment for two column divs without altering the HTML code using only CSS

Recently, I stumbled upon a basic HTML code that I am unable to modify due to restrictions:

<div id="container">
    <div id="a">
        Title col
    </div>
    <div id="b">
        Left col
    </div>
    <div id="c">
        Right col
    </div>
</div>

This code is accompanied by the following CSS rules, which I can only add to and not delete:

#container {
    width: 100%;
}
#a {
    width: 400px;
    margin: auto;
}
#b {
    width: 300px;
    float: left;
}
#c {
    width: 100px;
    float: left;
}

The "b" and "c" divs are not centered horizontally as desired. You can view the current result here: http://jsfiddle.net/x5qKN/

I've been trying to figure out how to center these two divs horizontally without success. Despite referring to various answers on a related post ("How to horizontally center a <div> in another <div>?"), the issue remains unresolved. Does anyone have a solution for this problem?

Any help would be greatly appreciated. Thank you! (Apologies if this question has already been addressed elsewhere)

Answer №1

Indeed, the key is to avoid floating and instead use display:inline-block for the last two elements, while applying text-align:center to the parent container. By temporarily setting the font size to zero and then reverting it, you can eliminate any spacing between the items.

See Demo on Fiddle

div {
    font-size:14px;
    box-sizing:border-box;
}
#container {
    width: 100%;
    text-align:center;
    font-size:0;
}
div:not(#container) {
    text-align:left;
}
#a {
    width: 400px;
    border:1px solid black;
    margin: auto;
}
#b {
    width: 300px;
    display:inline-block;
    border:1px solid black;
}
#c {
    width: 100px;
    display:inline-block;
    border:1px solid black;
}

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

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfor ...

Why is the div element within the container not automatically occupying 12 columns, but rather only 1?

I'm struggling to comprehend the bootstrap grid system, as explained in Murach's .Net book. Please take the time to read through the entire post. I am aware of the solution (<div class="col-lg-12">Col x</div> works), but I am curious ...

Learn a simple method of integrating carousels into text elements within a grid using exclusively Bootstrap 5

I need to incorporate a carousel into this section of my code using only Bootstrap 5. However, the current implementation is not functioning as expected (the items are stationary): This is the relevant HTML snippet: <div class="container px-4" ...

What is the best way to retrieve the name of a dynamic form in a Controller

How can I retrieve the dynamic form name in my controller? See below for the code snippet: HTML <form name="{{myForm}}" novalidate> <input type="text" ng-model="username" name="username" required/> <span ng-show="(submit & ...

Design a unique CSS box using Bootstrap

Hey there! I'm currently working on creating a CSS box with Bootstrap. If you'd like to take a look, feel free to check it out here. I noticed that the padding box isn't affecting the margin-top - any ideas why? Also, I'm trying to ge ...

I am unable to utilize folder paths in CSS within my React application

Having trouble setting a background image in CSS within my React app. When styling and setting the image from a React component, it works just fine. Can anyone provide assistance? This code snippet will work: const style={ width:'300px', ...

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Currently, I am experiencing an issue in Angular Version 5 where the Angular Material Table collapses when rendering more than 20 columns. Here is a snapshot of what my table looks like: https://i.stack.imgur.com/MXfvQ.png https://i.stack.imgur.com/XHWgq ...

My preference is for the flex box to expand in width (sideways) without increasing in height (up and down)

Is there a way for flex items to expand in width but only in height when necessary? I enjoy using flexbox, but I find it frustrating that all flex items in a row grow to the same height even when there isn't enough content to fill them, resulting in a ...

Ways to format the initial letter of a word as BOLD

Looking to make the first letter of certain words bold on a button in my UI that says, "Active Engagement" and "Active Non-Engagement". How can this be achieved? For example: Active Engagement, Active Non-Engagement The code for the buttons is as follows ...

Text is not visible when hovering over it

I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...

I am interested in displaying or hiding a table depending on a specific condition in MVC 4

Looking at this MVC 4 Razor code snippet: <h4>You have @Model.Count() items up for sale currently. @Html.ActionLink("Add a new listing by clicking here", "Create")</h4> <br /> <table style="visibility: hidden"> .... I am seeking ...

What is the reason behind the constraints of min/max width and height values preventing the element from fully filling its parent div?

HTML Code: <div class="content"> <div class="card"> </div> </div> CSS Code: .content { min-height: 350px; min-width: 320px; max-width: 350px; padding: 15px; } .card { width: 100%; height: 100%; ...

I am having an issue with the <a> element in my bootstrap carousel, as it is displaying a dead link

My carousel has an issue with the anchor tag, causing it to show a dead link. I am unable to hover over it and the link is not functioning when clicked. Everything else seems to be working fine in the div. All files from Bootstrap have been used and no cha ...

What is the best way to present a unique page overlay specifically for iPhone users?

When browsing WebMD on a computer, you'll see one page. However, if you access it from an iPhone, not only will you be directed to their mobile page (which is easy enough), but they also display a special overlay with a "click to close" button prompti ...

Take the information entered in an HTML form, add it to a JSON object, and save it in a MYSQL

I'm currently working on extracting data from a user registration form in HTML, converting it to JSON format, and then storing it in MySQL. Your assistance with this process would be greatly appreciated. HTML <form id="myForm" action="userInf ...

The sidebar in Semantic UI does not have a specified height for the form segment

Need help troubleshooting a button that slides out a vertical sidebar. I want to include a short form for users to input search queries within the sidebar. The issue seems to be with the heights of #search-sidebar and .ui.form.segment. Here is the code s ...

Is it possible to generate a unique name from an array without any repeats?

Update: I am not looking to create a single list, but rather a button that generates a random name when clicked. Objective: Generate a random name from an array by clicking a button. The goal is to display one name at a time randomly without repetition. W ...

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

Fixing CreateJS in Adobe Animate HTML5 Advertisement for Internet Explorer versions 9 and 10

As I work on creating an HTML5 ad using Adobe Animate CC, I encounter a minor setback. While testing the ad, I notice that it displays perfectly in most browsers except for Internet Explorer versions 9 and 10. It's interesting to see that according ...

Closing the dropdown menu by directly clicking on the button

I've noticed several inquiries on this platform regarding how to close a drop-down menu by clicking anywhere outside of it. However, my question is a bit different. I want the dropdown-menu to remain open once clicked, only closing when the user clic ...