3 Column Layout extended discussion

HTML & CSS
1

#Original Discussion (thread now locked; else I could have initiated there only):

We discussed a great deal about the 3 column Layout here →

I am briefing why this Layout was created →
In WordPress when you are distributing the theme you often to create so many layouts(Layouts with different sidebars arrangements).

But the change in Layout needs to be controlled programmatically. In order to make it less cumbersome, you created this layout so that just by printing one extra class: wrap2, wrap3, wrap4 etc, for example, the entire sidebar system can be spinned.

The spinning/order change was achieved by doing this →

/* change order */
.wrap2 .sidebar { order: -1;}
.wrap3 .sidebar {order:-1;}
.wrap3 .inner-content .sidebar{order:1}
.wrap4 .sidebar{display:none}
.wrap4 .inner-content  .sidebar{display:block;}

so just by printing wrap2, wrap3, wrap4, and wrap5

This was created by the flex.

Is it Possible that we can create such Layout w/o using flex, but with the same power and the flexibility by using the display: block?

Actually, I tried, but could not achieve the end objective, but I have pollified with this so much CSS.

2

You can’t use the order property without flex. Default display: block behaviour will not give you multi-columns.

1 Like
3

Yes I know, but display block system should have some method to achieve this.

4

Why should it? Display:block has nothing to do with the layout of a page as such - its just sets the element to display:block which for most elements is the normal? display:flex on the other hand introduces a whole new layout concept.

To layout elements side by side requires display:table / cell, display:inline-block, floats or css grid. none of those (apart from grid) can re-order content as required. Only flex allows for content to be moved from one visual position to another without changing the flow of the page or the source order.

You need to clarify what you mean by ‘display:block’ and are you inferring that you want to hide and show things with display:block and display;none? Again this will not allow you to change order unless you have several different layouts in place and then just show the one you want which would be a massive waste of resources.

You can manage to change column order with floats using tricky negative margins but it is very limited and prone to break and does not give you the full height column effect of flex and introduces loads of other issues to contend with.

I don’t see why the flex layout is cumbersome if all it needs is a simple class to be added to create the exact layout you want. What’s difficult about adding a class?

3 Likes
5

Yes, I in love with your 3 Column Layout. But as @SamA74 has pointed before that I am using too much flex so I got confused.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.