Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Columns Acting Weird

Posted by: panzerswarm Mar 25 2020, 06:54 PM

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?

Posted by: pandy Mar 26 2020, 03:12 AM

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>

Posted by: Christian J Mar 26 2020, 05:07 AM

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;
}

Posted by: pandy Mar 26 2020, 05:55 AM

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.

Posted by: Christian J Mar 26 2020, 12:47 PM

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.

Posted by: Christian J Mar 26 2020, 12:50 PM

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)?

Posted by: pandy Mar 26 2020, 02:08 PM

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.

Posted by: Christian J Mar 26 2020, 05:30 PM

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.

Posted by: pandy Mar 26 2020, 06:14 PM

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.

Posted by: pandy Mar 26 2020, 06:26 PM

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.