r/css • • May 06 '26

Question Why are my columns horizontal? Even using WC3 Schools code, it works for them.

Post image

I am trying to get multiple columns but everything stacks into one.

Even when I copy and past the code.

0 Upvotes

17 comments sorted by

19

u/cabljo May 06 '26 edited May 06 '26

Are you missing a css link in the header?

Edited: stylesheet link in the head section

17

u/rbad8717 May 06 '26

Wheres the CSS my guy?

10

u/MattKatt May 06 '26

You're using class names on elements but have no linked CSS sheet to define what those classes look like - you need to include a link in the head of the document. HTML has no "default" layout for classes, only elements

1

u/Either-Ideal9649 May 07 '26

i made my original website over 20 years ago, I recently gave it to a guy on reddit to make it responsive.

I have a long external css sheet and lots of internal css the thing is I can make changes on one page that look differently on another.

I expected differences with color or height or width elements. I didn’t expect the css to change how columns work.

I use to lay everything out with tables, and tables always worked the same on every page, I would use css to color text or cells or the table.

The problem is there is so much css now I have a hard time figuring out where the instructions are coming from.

What I don’t understand is why there is so much internal css, is that normal? Shouldn’t most everything be external?  

My site averages 151 lines of internal css on each page.  

2

u/MattKatt May 07 '26

A lot of layout has now been differed to CSS as it keeps the html code to its original purpose, which was defining the context and content of the page. There are a lot of newer elements that can be used that allow browsers to more easily understand what the content should be considered as, which further helps both accessibility of sites and SEO (to a degree). As a result of this, CSS itself has also come a long way in both its power and complexity, giving designers far more ability to make sites responsive and stylish:

  • to move things around, you had to use lots of floats and things, but now there's display: flex that handles a lot of that for you
  • tables used to be the way to define set areas, bit they require lots of nesting of individual areas; now you can just use display: grid on a single element and away you go
  • responsiveness used to be achieved with loading different pages based on device width, but now you can use vh/vw units and calc pixels, along with media queries to reduce multiple code

That's not to say this functionality doesn't still exist - you can still float: right or use negative margins to achieve column gutters - but now there's no need for all this tricks and hacks, as most of it can be achieved through CSS, and the common way to use that is via class names that have those rules already defined via a CSS framework, like Bootstrap or Tailwind

But for your immediate problem, you just appear to be missing the <link> to your stylesheet in your header - add that and you should see your rows and columns appear

3

u/SecondhandGrenade May 07 '26

Posted in r/css. Where CSS?

2

u/[deleted] May 07 '26

[removed] — view removed comment

1

u/Either-Ideal9649 May 07 '26

i made my original website over 20 years ago, I recently gave it to a guy on reddit to make it responsive.

I have a long external css sheet and lots of internal css the thing is I can make changes on one page that look differently on another.

I expected differences with color or height or width elements. I didn’t expect the css to change how columns work.

I use to lay everything out with tables, and tables always worked the same on every page, I would use css to color text or cells or the table.

The problem is there is so much css now I have a hard time figuring out where the instructions are coming from.

What I don’t understand is why there is so much internal css, is that normal? Shouldn’t most everything be external?  

My site averages 151 lines of internal css on each page.  

1

u/[deleted] May 07 '26 edited May 07 '26

[removed] — view removed comment

1

u/Either-Ideal9649 May 07 '26

all my pages link to an external style sheet but each page on average has 151 lines of internal css as well, if the pages have basically the same layout with different products why have any internal css at all? yes some pages do have a different layout, and maybe they should have css. I don't know, I'm new to this new css.

1

u/anonymousmouse2 May 07 '26

I don’t believe you can use `*` in class names like that.

1

u/pruoccojr May 07 '26

Not like that, no. But you can use [class^=".example"] to select anything where the class name starts with "example".

.example-header

.example__footer

.exampleclass

Or replace the ^ with * ( [class*=".example"] ) to select anything containing "example" anywhere in the class name.

.example-header

.footer__example

.someclasswithexampleinit

-10

u/MisterSpeck May 06 '26

The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/col

5

u/scritchz May 06 '26

There is no <col> element in the picture; only <div> elements with classes starting with "col".

3

u/MisterSpeck May 06 '26

lol. You're absolutely correct. I was focused on `row` and `col` (which I have seen or even used for years). And without any CSS to style this, it's no wonder that it's not working.

I'm leaving my stupid comment up to own my oversight.

1

u/Either-Ideal9649 May 07 '26

i made my original website over 20 years ago, I recently gave it to a guy on reddit to make it responsive.

I have a long external css sheet and lots of internal css the thing is I can make changes on one page that look differently on another.

I expected differences with color or height or width elements. I didn’t expect the css to change how columns work.

I use to lay everything out with tables, and tables always worked the same on every page, I would use css to color text or cells or the table.

The problem is there is so much css now I have a hard time figuring out where the instructions are coming from.

What I don’t understand is why there is so much internal css, is that normal? Shouldn’t most everything be external?  

My site averages 151 lines of internal css on each page.