HTML & CSS Best way to position div elements side by side?

[Malcolm]

Hello all,

I have recently submerged myself into another project. I'm trying to place to div elements side by side. I've figured out two ways of doing it and want to know how you would do it. The two ways I did it are:

Method 1:​

[CODE lang="html" title="HTML Code"]<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>[/CODE]

div {
    margin-left:-4px;
}

.div1 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color:red;
}
.div2 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color:blue;
}
.div3 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color:green;
}

Without adding margin-left -4px there would be a gap between the elements (Not sure why).

Method 2:​

[CODE lang="html" title="HTML Code"]<div class="mainDiv">
<div class="div1"></div>
<div class="div2"></div>
</div>
[/CODE]

.div1 {
    background-color: red;
    height: 100px;
    width: 100px;
}
.div2 {
    background-color: blue;
    height: 100px;
    width: 100px;
    position: relative;
    top:-100px;
    left: 100px;
}

This code allows me to position the div elements side by side without using the Display property but using the position property.

Those were two ways I came up with to make two elements appear side by side, is there any other way of doing this?

 

[LTomy]

Hi Malcolm. Have you considered using "display: flex;"? (On the parent element).

 

[Malcolm]

Hi Malcolm. Have you considered using "display: flex;"?

I spent maybe 15secs on it, but never actually went deeply into it. What does flex do?

 

[LTomy]

The children of a container with display flex are positionned one after the order in a row or column (Row by default). It can be configured with many options. It is quite powerful. The only down side, as far as I know, is that it is not supported by Internet Explorer. I find this page to give a good explanation of "display: flex;".

 

[Malcolm]

I just tried it! Oh my, it works amazingly!

<div class="mainDiv">
    <div class="div1" style="background-color:red; width:100px;height:100px;"></div>
    <div class="div2" style="background-color:green; width:100px;height:100px;"></div>
</div>

.mainDiv {
    display:flex;
}

So simple?!

 

[LTomy]

Well, yeah, it is very convenient ahah. It can also be configured in many ways (The elements placed at the top/bottom/centered...).

 

[Malcolm]

Well, yeah, it is very convenient ahah. It can also be configured in many ways (The elements placed at the top/bottom/centered...).

Yeah, I came across it before but never really took the time to look into it. Again, thanks a lot!

 

[LTomy]

I would not consider myself an expert when it comes to html/css, but I am glad I helped .

 

[simong1993]

I know this has been answered but your best bet is going to be bootstrap

you could simply go

<div class="row">

    <div class="col">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>

</div>

that would give you a fully responsive, mobile ready, table layout. Although display flex will work it will work out easier in the long run using bootstrap and it will save on codeing time

 

[Malcolm]

I know this has been answered but your best bet is going to be bootstrap

you could simply go

<div class="row">

    <div class="col">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>

</div>

that would give you a fully responsive, mobile ready, table layout. Although display flex will work it will work out easier in the long run using bootstrap and it will save on codeing time

I like bootstrap as well, but I like making websites completely from scratch.

 

[simong1993]

I like bootstrap as well, but I like making websites completely from scratch.

i used to be like that once lol

or if you didnt want to use bootstrap i would set the row to width 100% and then float left the col's.

 

[Malcolm]

i used to be like that once lol

or if you didnt want to use bootstrap i would set the row to width 100% and then float left the col's.

Floats can be useful, but they should really only be used for images. I was taught that in one of my courses.