Matoy Matoy - 3 months ago 12
CSS Question

how to put 2 css elements in the same row (one next to each other)?

I have this 2 css elements:

css file

.chat .messages {
overflow-y: scroll;
height: calc(100% - 6em);
background: rgba(255,255,255,0.9);
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.5);
width: calc(100% - 11em);
margin: 1em;
margin-bottom: 0;
box-shadow: 1px 1px 18px #fff;
float: left;
}

.chat .users {
overflow-y: scroll;
height: calc(100% - 6em);
background: rgba(255,255,255,0.9);
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.5);
width: calc(11em);
margin: 1em;
margin-bottom: 0;
box-shadow: 1px 1px 18px #fff;
float: left;
}


html file:

<div class="members">
</div>

<div class="users"></div>


I want them to be at the same line. right now each of them is in a seprated line.

Also, how I align one element to the right and one to the left?

conditon now:

___
| |
| |
| |
____

__________________
| |
| |
| |
|________________|


what I want:

___ ________________
| | | |
| | |
| | | |
| | | |
____ ________________

Answer

there are a bunch of ways to align items side-by-side. i made an example with float:left; . it works also with display:inline-block

but you need to set the width of the 2 divs keeping in mind that they need to fit next to eachother. so either you use percentage for example 80% and 20% either if you want to use calc() , calculate the widths so they will fit...otherwise they will stack one after the other

in your case, .users has width of 11em and margin:1em plus a border of 1 px . so first you need to set box-sizing:border-box so the border:1px is inside it's 11em width and doesn't make the element wider

then you need to calculate that the .users actually occupies 11em+2em=13em , 2em because of the margin-left:1em and margin-right:1em

the same with members which has margin:1em so you need to keep 2em in mind when calculating the width of members ( also do not forget to add box-sizing:border-box to this element too )

so finally, members will have a width of 100% - .usersWidth - 2em(from margin) so

.members {
     width:calc(100%-15em)
}

.members {
    overflow-y: scroll;
    height: calc(100% - 6em);
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.5);
    width: calc(100% - 15em);
    margin: 1em;
    margin-bottom: 0;
    box-shadow: 1px 1px 18px #fff;
    float:left;
    height:100px;
    box-sizing:border-box;
    
}

.users {
    overflow-y: scroll;
    height: calc(100% - 6em);
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.5);
    width: 11em;
    margin: 1em;
    margin-bottom: 0;
    box-shadow: 1px 1px 18px #fff;
    float:left;
     height:100px;
     box-sizing:border-box;
}
<div class="members">
    </div>

    <div class="users"></div>

P.S. using display:inline-block will add the 'well-known additional white-space' between the elements, there are some ways to deal with that whitespace, but i suggest you use float:left as the example above.