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)