CSS 2 Column Layout
Hi front-end friends!
I have a blog post layout in my head, but after some searching the web, I can't quite seem to find exactly what I am looking for. I have also messed around in trying to code it with grid layout, float etc. but can't get it right. I want to know if it is possible and if anyone has done something similar?
I want a two column layout, but at the top of the right column, there must always be a featured image, and the text for the blog post will start in the left column and overflow to the right column, without explicitly having to hardcode what text I want in each column.
I have attached an image of my desired layout. Any help/guidance would be greatly appreciated!
20 Replies
Have you tried setting the dir to rtl
<section dir ='rtl'> </section>
Whilst setting the dir to rtl gives me the desired layout, I do want the dir ltr. I've created a Codepen (https://codepen.io/SamWDev93/pen/OJYbvQj) with what I have so far. All I need is the image to always to be in the right column at the very top, without having to hardcode it in the HTML
Have you tried using display grid and grid template areas
That should work
I have spent some time looking at this and I'm not sure that this is possible.
Obviously it could easily be done with flex or grid but you want the text to flow automatically so those are not an option, at least as far as I can tell.
Ideally you would target the 2nd column with a nth() selector or column-span but those doesn't appear to be possible with CSS columns 🤔
Whilst you are able to define them, you can't directly select them.
I have tried grid-template-areas, but haven't been able to get the desired layout. Looking at this CSS Tricks post (https://css-tricks.com/almanac/properties/g/grid-template-areas/), I don't think it's possible. If you scroll down slightly in the post, it mentions that you can't define "T" or "L" shapes, and in my mind, I want the content in an "L" shape, with the image top right
Mojtaba Seyedi
CSS-Tricks
grid-template-areas | CSS-Tricks
The grid-template-areas CSS property allows you to define and name the cells (or “areas”) in a CSS grid container.
Thanks for taking a look. I too am starting to think it isn't possible, which is a shame! Back to the drawing board I suppose
I guess absolute positioning wouldn't work, either?
I couldn't seem to get it to work playing around with various positioning variations. I was getting issues with the image sitting on top of the text etc
Just setting
float: right; on the image should achieve this but, for some reason (Im sure there is a logical explanation), the browser places it to the right but within the first column.float puts it in the right of the containing parent, so it would put it to the right in the grid cell (I think)
I've tried using float with the CSS columns property that's made to make text columns like a newspaper, but that just floats it in the first column which isn't helpful
grid with a little JS to set a max number of rows to
ceil(child-count) would work, but it would put all the paragraphs on the same grid regardless of whether there's extra space or not so you'd get very weird text layout
flex doesn't let you put the img in the second column like you can with grid
If I really had to, and couldn't hard code, I think I'd probably try to figure out how tall all the paragraphs are, then insert the image in the right place for it to be the thing to overflow onto the top of the second column. That way you can use flex with flex-direction: column; and force it to overflow using a set height
but that's potentially a backend dev solution to a frontend problem
the best answer if you ask me, is to tell the designer to fuck off and that it's not practical 😄I liked the challenge of this one and have come up with a JS solution that more or less works (not responsive).
https://codepen.io/cbolson/pen/ZENBRYL
Nice solution!
Thanks. However, it is not very robust. I did it more as a concept test rather than something that could be actually used.
This is more of an FYI than anything but I think that what you're looking for here was being worked on by the CSS Working Group under the name CSS Regions back in the 2010s. Not sure if there was ever even a test implementation started. I think it was abandoned because there wasn't agreement on whether it should be its own new property or if it should be part of
overflow?? https://drafts.csswg.org/css-regions-1/#regions
Here's Tab talking about it: https://github.com/w3c/csswg-drafts/issues/2806#issuecomment-415843117Thank you for the links. I'll take a look through
whats the markup?
The markup and CSS is in this CodePen - https://codepen.io/SamWDev93/pen/OJYbvQj. Let me know if you have issues viewing it
you have the image on the left div, but you want it to show on the right div?
Sam wants the text to flow from the left-hand column to the right-hand column.
The issue is that the right-hand column must always have an image at the top, before the text. .
but those are different parents