CODEWITHSUNDEEP
htmlcss
stee1e
stee1e

Reputation: 27

How do I line up 4 divs?

I want these divs to be inline. I was trying to wrap them up in a div and use display:inline-block; to get them in a horizontal row but could not get it to work. I'm really just trying to get my head around positioning and display. Any help appreciated.

html

<div class="small_box_right">

    </div>
    <div class="small_box_right">

    </div>
    <div class="small_box_right">

    </div>
    <div class="small_box_right">

    </div>

css

.small_box_right {
position: relative;
display:flex;
background: #CDCDB4;
border: 4px solid black;
height:300px;
width:300px;
}
.small_box_right:after, .small_box_right:before {
left: 100%;
top: 50%;
border: solid black;
content: " ";
height: ;
width: ;
position: absolute;
pointer-events: none;
}
.small_box_right:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #CDCDB4;;
border-width: 30px;
margin-top: -30px;
}
.small_box_right:before {
border-color: rgba(194, 225, 245, 0);
border-left-color:black ;
border-width: 36px;
margin-top: -36px;
}

Upvotes: 0

Views: 247

Answers (1)

guvenckardas
guvenckardas

Reputation: 738

Here is a DEMO

html:

<div class="box-cover">
<div class="small_box_right">

</div>
<div class="small_box_right">

</div>
<div class="small_box_right">

</div>
<div class="small_box_right">

</div>

</div>

css:

  .box-cover{
        position: relative;
        height: 300px;
        overflow: auto;
        width: 1550px;
    }

    .small_box_right {
        position: relative;
        display:inline-block;
        background: #CDCDB4;
        border: 4px solid black;
        height:300px;
        width:300px;
        margin-right: 50px;
    }
    .small_box_right:after, .small_box_right:before {
        left: 100%;
        top: 50%;
        border: solid black;
        content: " ";
        height: ;
        width: ;
        position: absolute;
        pointer-events: none;
    }
    .small_box_right:after {
        border-color: rgba(136, 183, 213, 0);
        border-left-color: #CDCDB4;;
        border-width: 30px;
        margin-top: -30px;
    }
    .small_box_right:before {
        border-color: rgba(194, 225, 245, 0);
        border-left-color:black ;
        border-width: 36px;
        margin-top: -36px;
    }

Upvotes: 1

Related Questions