CODEWITHSUNDEEP
htmlcss
rap-2-h
rap-2-h

Reputation: 31978

Horizontally center 2 columns divs without modifying HTML (only CSS)

I have this simple HTML code (I can't modify it, no divs in a div) :

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

It comes with this CSS code (I can only add rules, I can't delete code) :

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

"b" and "c" div's are not horizontally centered, you can have a look at the result here : http://jsfiddle.net/x5qKN/

I want to horizontally center that two divs. I think it's easy, but I dont know how to do this. I tried different answers from this post : "How to horizontally center a <div> in another <div>?", but it does not solves the problem. Is there a solution ?

Thanks a lot (I hope it's not a duplicate post)

Upvotes: 0

Views: 1358

Answers (1)

SW4
SW4

Reputation: 71160

Sure, the trick is to not float, but display:inline-block the last two items, whilst setting text-align:center on the parent container. Setting the font size to zero then back means the items dont then have a space between them.

Demo 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;
}

Upvotes: 1

Related Questions