CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3026860
user3026860

Reputation: 35

How do I arrange a div element in a row?

My HTML Code:

   <div>
        <div class="card login">
            <div class="label">
                <p id="Title">Plex</p>
            </div>

        </div>

        <div class="card welcome">
            <div class="label">
            </div>
        </section>
    </div>

What should my CSS code look like to make both those "Cards" align into a row? Note the label will be of a different color than the rest of the card. Im looking for a result similar to this: 

┌─────┐   ┌─────┐
│Label│   │Label│
├─────┤   ├─────┤
│     │   │     │
│     │   │     │
└─────┘   └─────┘

Here is my CSS code so far:

.card login{
    width: 400px;
    height: 500px;
    margin-left: 10px;
    background-color: #f3f3f3;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

.card welcome{
    width: 400px;
    height: 500px;
    background-color: #f3f3f3;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

.label {
    display: inline-block;
    background-color: #434342;
    max-width:400px;
    height: 55px;
    z-index: 999;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}


#Title {
    font-family: Thinfont-Bold;
    color: #d2731d;
    margin-left:40%;
    margin-right:32%;
    font-size: 50px;
}

Upvotes: 0

Views: 198

Answers (2)

Jason Sgalla
Jason Sgalla

Reputation: 176

You can try:

.card login{
   float: left;
}

.card welcome{
    float: left;
    clear: none;
}

Just add margins as needed.

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94389

<div>
    <div class="card login">
        <div class="label">
            <p id="Title">Plex</p>
        </div>

    </div>

    <div class="card welcome">
        <div class="label"></div>
    </div>
</div>

.card{
    display: inline-block;
    width: 100px;
}

Demo: http://jsfiddle.net/DerekL/UHu8K/

Note that one big issue in your code is that you have two elements with the same id. This will make some browsers freak out and really you shouldn't do that. I changed it to a class in my code.

Alternatively, you can use float: left if all your cards have the exact same height.

.card{
    float: left;
}

IE Nightmare: inline-block is supported by all browsers. Except IE6 and 7. But don't worry, several "hacks" can be applied to make magic happens.

Ahead in the Future: flexbox will soon be supported by all modern browsers. It's worth mentioning because they are easier to work with to create a flexible and more organised layout. However it is currently not finalized and you should use it with caution.

.container{
    display: flex;
}
.card {
    flex: 1 1 auto;
}

Demo: http://jsfiddle.net/DerekL/34NLZ/

Upvotes: 3

Related Questions