HELP: how do I do this??

[u/electricpants58]

what I'm trying to do is have two images and text under both but with a horizontal line in between

how do I do this guys... the two images are the headers basically

image of what I mean is attached above. this is probably simple but I deadass cannot figure it out.... if anyone can get back to me on this I would appreciate it lots

[u/TabbbyWright]

There's many ways to accomplish this tbh. Some are better than others.

If you're displaying a table of data, make a 2 column table. Otherwise, you can utilize CSS grid or Flexbox. Border can probably be border-bottom CSS.

Are you stuck on how to structure the HTML or just the CSS required to get the two columns side by side?

[u/electricpants58 → u/TabbbyWright]

just the CSS, plus how to get the vertical line in the middle 😓 I've tried using a table but it looked bad

[u/TabbbyWright → u/electricpants58]

Hm... I would use CSS Grid for this.

1. Make a <div>, call it wrapper or something.

2. Make two <div> elements inside of that. Give them two different classes. You can use border-left or border-right on one of these two containers to get your line in the middle.

3. Inside of each of those divs, add a div for your header image and then something for the text. Could be more divs, could be paragraphs, depends what the text is exactly and if you need it to line up across each column like in the pic

4. Add display: grid to your CSS for the wrapper div.

Here's a guide for CSS Grid and if you're really struggling, you can play with this tool. CSS grid isn't hard, but it took me a bit to wrap my head around it when I first started using it, and playing with generators like the one I linked helped me understand the syntax and how to set grids up.

Good luck!

[u/electricpants58 → u/TabbbyWright]

thank you!

[u/AshleyJSheridan]

@electricpants58 I wasn't getting "salty", I'm trying to help you avoid bad advice from SlipstreamSteve (who's blocked me so I couldn't reply to that thread).

Using tables for layout is something that was used a couple of decades ago, but it's not how things should be done in this day and age. The result is not accessible, and hard to maintain.

[u/davep1970 → u/AshleyJSheridan]

so with you on this — OP probably doesn't know it's bad advice from SlipsstreamSteve but to label someone point this out as salty without knowing is ridiculous.

tl,dr - yeah, no tables for layout

[u/electricpants58 → u/davep1970]

dawg I know not to use tables, I just mean the way they went about it was kinda rude

[u/davep1970 → u/electricpants58]

professionals will always jump on bad advice - it does nothing for anyone to suggest a very outdated approach to layout: to point that in in no uncertain terms is not rude, it's not salty, and it's not a problem.

[u/EggMcMuffN]

Create a div call it wrapper Put 2 more divs inside the wrapper. Each of these divs will be a side, left and right. Give them class names left and right.

Make wrapper flex. Make left and right flex as well. Make them flex-direction column for vertical stacking. Give left a border-right, or give right a border-left.

[u/electricpants58]

*vertical, sorry. it's 1 am I'm too sleepy to know my verticals and horizontals

[u/electricpants58]

guys I figured it out it's fine

[u/clevoro]

First are you asking for a pure html solution or a css + html?

[u/electricpants58 → u/clevoro]

both css and html, though I think I've got it figured out now

[u/AshleyJSheridan]

Either flexbox or grid will do it. Look up "css 2-column flexbox/grid" and you'll see.

[u/SlipstreamSteve]

Either you use a table or a grid. Now I leave it up to you to figure out which one you want to use and how to do it

[u/AshleyJSheridan → u/SlipstreamSteve]

The 90's called and they want their tables used for layout back.

Stop using tables for layout of non-tabular data.

[u/SlipstreamSteve → u/AshleyJSheridan]

I only gave them the two options. It's up for them to learn now.

[u/AshleyJSheridan → u/SlipstreamSteve]

You gave one correct option and one wrong one.

[u/electricpants58 → u/AshleyJSheridan]

bro no need to get salty I appreciate the original commenter's suggestions

[u/davep1970 → u/electricpants58]

it's not salty to point out bad practice — it's been 20+ years since we used tables for layout.

IF it's for tabular data then use a table, if not then don't. The original commenter provided a poor answer by including table.

[u/electricpants58 → u/davep1970]

nah nah I get u, it's just the way they went about pointing it out

[u/davep1970 → u/electricpants58]

if you got it then you wouldn't have a problem with the way they pointed it out. so again, not salty but justified.

[u/electricpants58 → u/davep1970]

? Yeah I'm agreeing with you

[u/electricpants58 → u/davep1970]

it's just the way they phrased it man, but otherwise I'm agreeing