CODEWITHSUNDEEP
htmlcss
user3998237
user3998237

Reputation:

how to get 4 boxes centralized and a side by side?

    <section id="main-content">
        <div class="language-box html">HTML</div>
        <div class="language-box javascript">JAVACRIPT</div>
        <div class="language-box css">CSS</div>
        <div class="language-box php">PHP</div>
        <div class="clear"></div>
    </section>

I'm trying to make this 4 box's become centralized and side by side.

I'm using this code, but it's not working as i hope:

#main-content {
    margin: 0 auto;
}


.language-box {
    width: 279px;
    height: 400px;
    background-color: white;
    float: left;
    margin: 0 auto;
}

https://i.sstatic.net/G0mRj.png

Upvotes: 0

Views: 101

Answers (3)

emmanuel
emmanuel

Reputation: 9615

You could remove float, display items as inline-block and set text-align: center to the container.

#main-content {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}


.language-box {
    width: 80px;
    border: 1px solid #000000;
    height: 400px;
    background-color: white;
    /* float: left;
    margin: 0 auto; */
    display: inline-block;
}

Fiddle: http://jsfiddle.net/9k2ae5vv/

Upvotes: 1

Ararat Harutyunyan
Ararat Harutyunyan

Reputation: 926

you must set width for your wrapper, and everything will be fine.

#main-content {
    margin: 0 auto;
    width: calc(4 * 279px);
}

look working example

Upvotes: 0

pavel
pavel

Reputation: 27082

You need to clear after float elements: #main-content {overflow: hidden}

Upvotes: 0

Related Questions