The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Columns Acting Weird
panzerswarm
post 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?

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 26 2020, 12:47 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Mar 26 2020, 11:55 AM) *

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. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 26 2020, 12:50 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(panzerswarm @ Mar 26 2020, 12:54 AM) *

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)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. unsure.gif


The DIV-boxes flow. Only it isn't very noticable. tongue.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 01:59 AM