Floating div's with grid system.

[First Things]

Hello dear reader,

Today I tried the whole afternoon to position within a responsive wrapper div. Divs 12 beautiful

If there is enough room for four, I want four in a row,
enough space for three, three in a row,
two, two
one, one

Here you see the result:

http://www.kosmosostis.be/divs/

Unfortunately, I wish the last div always nice to the right.
But as you can see it will always have a padding along the right side so my box is not good against the right side connection.

I based myself on this grid system, but unfortunately for the last point I find no solution sing …

http://thisisdallas.github.io/Simple-Grid/

All tips or reference links are welcome. I’m stuck :-(

Most preferably, solution without js.

Grtz, Kristof

[Senff]

If you want the last div always to the right, the result will be that there’s going to be a bigger space between the last one and the second-to-last one. So you want to address that too and you probably want to have the same amount of space between all divs.

There’s two ways of doing this:

First, make sure each div has space on both sides (not just left only, or right only).
OR….give all divs a right margin except the last one (or a left margin except the first one) but calculate how much you need.

With MATH!

margin for each div = ( (available full width) – (number of divs * width of each div) ) / (number of divs -1)

I think the first option is easier, and probably better for responsive designs, but then you’ll always have spacing on the left and right of your row.

[Mary]

Hello Kristof,
you should have equal paddings left and right, you only got 20px right so…and instead of margin-bottom you could have only paddings like 5px 10px 5px 10px or whatever you like.
Succes!
Mary

[Mary]

But…if you defenitely don’t want paddings to the right on the last div you should put .float-project:last-child: padding-right: 0 in your media queries…in your .float-project.
Was that the thing?
Bye, Mary

[Mary]

no…nth-child(3 etc) if you have 3 in a row and nth-child(2)
http://www.w3schools.com/cssref/sel_nth-child.asp

[First Things]

Thanks Senff for the respond!

First option does indeed work, but i gives white space in the beginning and at the end. The divs should always stick to the side along the outside.

Math is css is new to me… will try that tonight…

Thank you also Mary,

Tried both solutions:

1) Padding both sides give me white spaces where i do not want them (see up)

2) The second trick “using nth-child(x)”, does work and stick the last div in the row along the outside. But this makes the div/image also bigger the the rest…

So, didn’t find the solution that i fits my needs…

But thank you guys (and girl) for the tips. Even they did not work, i did learn something :-)

Kristof

[Mary]

i see…got bigger because of the border-box setting offcourse….so set the last img to padding-box. Or you could use margins in percentages instead of paddings and calculate…4 in a row, then width 23% and margin 2% ? or 23.5% and margin: 1.5% 1.5% 1.5% 0 and so on. Then use that nth-child.
Nice puzzel,
bye!

[First Things]

Thanks Mary!!!

You did give me a good solution. Never thought that margin could also use percentage…. so i did it with that.

You can see the result over here:
http://kosmosostis.be/divs2/

I will integrate this in my project and make it better for showing up in rows of three and two.

So thank you again Mary, was indeed a puzzle :-)
Also thanks to senff!

Kristof

[Mary]

Your welcome! It looks good! I also learn new things every day, it never stops!
Greetings, Mary

[Senff]

Obviously, this doesn’t look good on small screens — there’s hardly any room to show four columns.

If you’re going to use media queries, then you might as well code further and show 3 in a row on medium screens, and 2 in a row on smaller screens.

Also, this:

.divke:nth-child(4), .divke:nth-child(8), .divke:nth-child(12), .divke:nth-child(16), .divke:nth-child(20)

Can be done more efficiently like this:

.divke:nth-of-type(4n)

[First Things]

Thanks Seff,

for the respond.

The code works but it could indeed look much better.

I decided already togheter with my client that it will start with max 3 en on small screens 2, …1

I also knew that there was a shorter way the say each 3the element. I was planning to look that up when i started with the project. So thank you also for tthat code it safed my some google-time ;-)

I will show the link here later when the project is online ;-)

Thanks again,

Kristof

[Author]

Posts