How can I make multi dimensional divs without using additional wrapper div?

Question

I am using the following code.

Note: I don't want to wrap the divs with additional div But I am facing some problem.

.col{
    float: left;
    width: calc(100% / 3);
    margin: 2px;
    padding: 0 16px;
    background-color:red;
}

<div>Other Div</div>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>

It works just fine for me. Are you sure there's no more code interfering? — D. Pardal, Aug 02 '20 at 17:20
Does this answer your question? [Floated elements of variable height push siblings down](https://stackoverflow.com/questions/15098223/floated-elements-of-variable-height-push-siblings-down) — disinfor, Aug 02 '20 at 17:22

score 2 · Accepted Answer · edited Aug 02 '20 at 17:59

2

.col{
    display: inline-block;
    box-sizing: border-box;
    width: calc((100% / 3) - 7px); /*Lawrence Cherone remark*/
    margin: 2px;
    padding: 0 16px;
    background-color: red;
}

<div>Other Div</div>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>

edited Aug 02 '20 at 17:59

Lawrence Cherone

46,049
7
62
106

answered Aug 02 '20 at 17:26

s.kuznetsov

14,870
3
10
25

I don't want to wrap the divs with additional div. – Elliyas Ahmed Aug 02 '20 at 17:27
you didn't mention it in your question – s.kuznetsov Aug 02 '20 at 17:33
Yeah, I just put the code what I have used. Can you help me please? – Elliyas Ahmed Aug 02 '20 at 17:34
Yes, of course, I want to help, but why don't you want to wrap the blocks in a container? It will be right. – s.kuznetsov Aug 02 '20 at 17:36
I know this solution but I am working in a Blogger Theme. It has no way to wrap additional div manually. – Elliyas Ahmed Aug 02 '20 at 17:37
I redid this code – s.kuznetsov Aug 02 '20 at 17:42
you can also do more then one sum in `calc()`, i.e `width: calc((100% / 3) - 36px);` which would actully fit 3 in across the whole page instead of a chunk of whitespace. – Lawrence Cherone Aug 02 '20 at 17:53
@Lawrence Cherone, yes you are right. Let me include your comment in my answer. – s.kuznetsov Aug 02 '20 at 17:54
@Lawrence Cherone, i entered your name as the author of this line of code :)) – s.kuznetsov Aug 02 '20 at 17:59
np, it works nice, the `- Npx` countering the margin – Lawrence Cherone Aug 02 '20 at 18:01
now it's even better than it was. I didn't think at all about the need to subtract pixels to stretch blocks – s.kuznetsov Aug 02 '20 at 18:03

How can I make multi dimensional divs without using additional wrapper div?

1 Answers1