Columns Acting Weird |
Columns Acting Weird |
panzerswarm |
Mar 25 2020, 06:54 PM
Post
#1
|
Group: Members Posts: 1 Joined: 25-March 20 Member No.: 27,251 |
So I have a class of boxes representing restaurants:
HTML: CODE <body> <div id="restaurantcontainers" class="cols" style="margin-top: 100px;"> <div class="box">DcManalds</div> <div class="box">Kaising Ranes</div> <div class="box">Kurger Bing</div> <div class="box">a</div> <div class="box">b</div> <div class="box">c</div> </div> </body> CSS: CODE #restaurantcontainers { max-width: 2000px; min-width: 500x; padding-right: 25px; padding-left: 25px; } .cols { column-count: 3; column-gap: 20px; column-width: auto; } .box { margin-bottom: 20px; height: 300px; background: #bfbfbf; } Which is making it look like the attached photo, I'm confused on how to make the boxes span into columns not rows. So I want the DcManalds, Kurger Bing, and Kaising Ranes on the top row and a, b, and c on the bottom row. How can I do that? |
pandy |
Mar 26 2020, 03:12 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I don't think you can with CSS. There is no property to create rows. You would have to rearrange the HTML.
The column properties are (mainly) meant for flowing text. The content is distributed evenly over the specified number of columns and the content is taken in the order it comes in the HTML. If you rearrange the DIVs like below it will look as you want. The categories may not come in the order you want without CSS though. And when you start to fill those boxes with text, as I suppose you will, things may break. It seems for example that if there's too much text in a box the layout of the boxes won't change but the text will just overflow so the text from the top left box will cover (part of) the left bottom box. But that's the problem with any fixed sized box layout. CODE <div id="restaurantcontainers" class="cols" style="margin-top: 100px;"> <div class="box">DcManalds</div> <div class="box">a</div> <div class="box">Kaising Ranes</div> <div class="box">b</div> <div class="box">Kurger Bing</div> <div class="box">c</div> </div> |
Christian J |
Mar 26 2020, 05:07 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Here's one way to do it with the existing HTML:
CODE #restaurantcontainers { max-width: 2000px; min-width: 500x; padding-right: 25px; padding-left: 25px; } .box { display: inline-block; float: left; margin-bottom: 20px; height: 300px; width: 33%; background: #bfbfbf; } |
pandy |
Mar 26 2020, 05:55 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Thare are many other ways to do the layout, but if one wants to use the CSS column features? But as I hinted at, CSS columns aren't really meant for this. I would also use another method if the layout is the main thing and not the text flowing.
|
Christian J |
Mar 26 2020, 12:47 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
ThatThere are many other ways to do the layout, but if one wants to use the CSS column features? No, that seems to be for flowing text just like you said. QUOTE I would also use another method if the layout is the main thing and not the text flowing. But there is no flowing text here? But now I become unsure what the OP actually wants. |
Christian J |
Mar 26 2020, 12:50 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I'm confused on how to make the boxes span into columns not rows. So I want the DcManalds, Kurger Bing, and Kaising Ranes on the top row and a, b, and c on the bottom row. How can I do that? Do you mean DcManalds and "a" needs to be in the same column? Or is it enough that the restaurants are on the top row (and a, b and c on the bottom row) regardless of internal order (like e.g. DcManalds and "b" in the same column)? |
pandy |
Mar 26 2020, 02:08 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
QUOTE But there is no flowing text here? But now I become unsure what the OP actually wants. The DIV-boxes flow. Only it isn't very noticable. They do. The are divided equally between the columns and fill up one column at the time. If they were Ps with text content instead of fixed-height empty boxes it would be more noticeable. |
Christian J |
Mar 26 2020, 05:30 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I suppose you're right, but doesn't that also mean that it's not what the OP really wants?
To me the result the OP wants sounds more like a grid or table layout. |
pandy |
Mar 26 2020, 06:14 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
As said, I agree. It's probably not what the OP wants. Unless the intention is to play around with CSS columns and figure out what can be done.
|
pandy |
Mar 26 2020, 06:26 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
BTW this led me to discover something interesting that I didn't know. If you fill the first box (top left) with lots of text, I mean really lots, it will overflow. I already knew that. But I didn't know the "overflowed" text would follow the column layout. I'd expect it to cover the bottom left box and if this wasn't enough continue below that. But that's not what happens. When it reaches the bottom of the left bottom box it continues to cover the middle top box and so on. So it still creates columns.
That's kind of cool. Something can probably be done with that. You could create a checkboard pattern behind the text for instance. Of course that can be done with simpler means maybe, but cool anyway. |
Lo-Fi Version | Time is now: 29th March 2024 - 01:59 AM |