How do I arrange a div element in a row?

Question

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

Set the div's display property to inline, as the default for div is block — Laurence Quinn, Jan 09 '14 at 01:02
possible duplicate of [How do I align spans or divs horizontally?](http://stackoverflow.com/questions/225956/how-do-i-align-spans-or-divs-horizontally) — Zach Saucier, Jan 09 '14 at 01:03

Derek 朕會功夫 · Accepted Answer · 2014-01-09T01:37:49.910

3

<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/

edited Jan 09 '14 at 01:37

answered Jan 09 '14 at 01:01

Derek 朕會功夫

92,235
44
185
247

1

@NiettheDarkAbsol Depending on browser support, `inline-block` may be useless and `float` may be the solution – Edgar Villegas Alvarado Jan 09 '14 at 01:05
1

@EdgarVillegasAlvarado Well sure, but are you really still supporting browsers from last millennium? – Niet the Dark Absol Jan 09 '14 at 01:07
@EdgarVillegasAlvarado - I believe `inline-block` will be supported if he isn't going to [support those ancient IE versions](http://caniuse.com/inline-block) ;) – Derek 朕會功夫 Jan 09 '14 at 01:07
1

@Derek朕會功夫 Exactly, that's why I said "Depending" ;) – Edgar Villegas Alvarado Jan 09 '14 at 01:10
Since the question doesn't specify browser support, flexbox should get a mention https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – antony Jan 09 '14 at 01:17
@antony - I am not going to work with and include flexible boxes until they finalize it. I was using the first version of flexbox several years ago and they changed the whole standards after I used them. I had to change the whole style sheet to make it works again. – Derek 朕會功夫 Jan 09 '14 at 01:20
I updated the question and added my original and current CSS which is causing problems. I have no idea what im doing wrong :/ – user3026860 Jan 09 '14 at 01:23
@user3175585 Can you make a [fiddle](http://www.jsfiddle.net) because right now I can't see what the problem is. – Derek 朕會功夫 Jan 09 '14 at 01:24
@Derek 朕會功夫 - Regardless. It's a viable option now. Where would it leave your answer if they drop support for `inline-block` later? – antony Jan 09 '14 at 01:27
@antony - They probably won't drop it because it is in the CSS2 standards while flexbox currently is only in the candidate stage... – Derek 朕會功夫 Jan 09 '14 at 01:30
@Derek 朕會功夫 - I know they won't drop it, I think you're missing the point. – antony Jan 09 '14 at 01:32
I want the individual labels to be merged with the Login Card and Welcome Card. The Two cards will need to be under the TopBar and side by side to each other. Its so confusing – user3026860 Jan 09 '14 at 01:37
1

@antony - I have included `flexbox` in my answer. – Derek 朕會功夫 Jan 09 '14 at 01:39
1

@user3175585 - I fixed it for you: http://jsfiddle.net/DerekL/6MV7G/show ([code](http://jsfiddle.net/DerekL/6MV7G/)) – Derek 朕會功夫 Jan 09 '14 at 01:43
@user3175585 - If you find my answer helpful, you can click on the checkmark to mark it as the solution. – Derek 朕會功夫 Jan 09 '14 at 02:06

Jason Sgalla · Answer 2 · 2014-01-09T01:48:15.093

0

You can try:

.card login{
   float: left;
}

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

Just add margins as needed.

edited Jan 09 '14 at 01:48

answered Jan 09 '14 at 01:14

Jason Sgalla

176
9

I updated and added my CSS. Its still not working :/ – user3026860 Jan 09 '14 at 01:24
@user3175585 - I typo'd the class names. Fixed now. Sry. – Jason Sgalla Jan 09 '14 at 01:48

How do I arrange a div element in a row?

2 Answers2