Floating Problem

[_Sven_]

Hello everybody,

I want to create a grid with CSS

1 3
2 4

how can I achieve this with the existing code (see link)

The structure HTML- must remain so and no JS

I have already played around a lot, but now my expertise is at the end.
is that even possible?

http://codepen.io/anon/pen/teJgz

[Paulie_D]

The structure HTML- must remain so and no JS

Then you are out of luck with floats…that’s not how they work.

If you want columns you have to put them in columns.

http://codepen.io/Paulie-D/pen/yCeLp

[_Sven_]

Hello Pauli_D,
thanx for reply…
I feared it :(

[Paulie_D]

That’s not to say it can’t be done…but it won’t be with floats alone.

Any other solution is likely to be less flexible.

Is HTML source order that important in this instance?

[_Sven_]

Yes, the HTML ist important (unfortunately)
I tried with floats, with positioning, with child-first… I don’t what else I tried :/ …
the problem is… there can be several col1 or col2

1 5
2 6
3 7
4

or

1 4
2 5
3 6
7

so on…

all DIVs on the left ‘col1′ and on the right ‘col2′

[Paulie_D]

Not well supported but: http://codepen.io/Paulie-D/pen/vkwhD

[_Sven_]

oh… that’s cool… ok, I will play with it…

‘ll get back, thanx :)

[wolfcry911]

Here’s a pen I created awhile back:

http://codepen.io/wolfcry911/pen/IkBbu

[_Sven_]

@wolfcry911 … Thanx :)

[_Sven_]

Hello Tom… thanx .. . Yes nice Idea but unflexible, I dont’t know exactly how many DIVs will be generate. Sometimes 3 or 5 or 6 in a col, with different columns 1 or 2 or 3 cols …

[Author]

Posts