Divs float results in vertical spaces

Asked Feb 05 '19 at 12:12

Active Feb 05 '19 at 12:34

Viewed 28 times

I've had a problem for a while now. I've been working on new navigation for our webshop, but I keep getting a vertical space between our divs. I've posted a picture here was I marked the divs. These have a float: right; added to for them.

CSS of the marked boxes:

#popup5 .col2 .submenuDiv {
    float: right;
    width: 33%;
    margin-bottom: 10px;
    min-height: 75px;
}

I want those marked boxes to stick to each other even if below each other. Right now It looks like they try to make a horizontal structure, but that's not what's wanted. So "Barbering & Hårfjerning" should be pushed below "Dufte". Hope you guys can help me solve this problem :)

Comments tell that there needs to be some javascript to solve this. Any examples of this?

edited Feb 05 '19 at 12:34

asked Feb 05 '19 at 12:12

Kevin Steen Hansen

1

You have provided `margin-bottom: 10px;` which is causing the gap there. – Joykal Infotech Feb 05 '19 at 12:16
1

actually you cannot achieve this with float or any other CSS features. JS is your only way or a hacky CSS code – Temani Afif Feb 05 '19 at 12:23
@JoykalInfotechI get that it's providing some gap, but not as much between " "Barbering & Hårfjerning" and "Dufte" – Kevin Steen Hansen Feb 05 '19 at 12:30
@TemaniAfif something you've seen an example of somewhere? – Kevin Steen Hansen Feb 05 '19 at 12:31
1

check the duplicate and you will find a lot of examples – Temani Afif Feb 05 '19 at 12:47

Divs float results in vertical spaces

0 Answers0