I’ve attached a Pen below. At the moment, I have the width on the .faq rule set to width: 49%;, at which point, it show in the intended 2-column layout. If I change that to width: 50%; though, the layout breaks and the FAQ’s stack.
Checking in DevTools (Chrome) shows the FAQ’s at a width of 640px inside a parent with a width of 1280px. It should fit but doesn’t - any suggestions on what I might change to stop the layout breaking?
It’s that gap between that inline block elements (like gaps between words) that catches everyone. You could just modify the HTML to read </article><article>, or utilize one of the many creative solutions for removing the default inline-block gap. Or just go modern and use flexbox.
Thanks Ralph. One to fix tomorrow morning then.
It looks like the sort of thing where that would work well.
Another couple of things. What’s with the fixed heights on the headers? 
The html could probably be a little leaner.
A flex example:-
It was part of a code test I did. I did originally use flex-box, but they suggested not using that for better IE compatibility - I was trying out an alternative, more for my own understanding than anything. The heading height was just about giving a standardised height so that the top pf the <p></p> below lined up - the headings don’t always stay on a single line as they do on the Codepen examples, but don’t go more than two lines. Thanks for your own version, there are a couple of things in that that I’d like to use.
I only spotted it when the header started to clash with the body text as it wrapped on narrow width. Using min-height should give the best of both worlds. Think of it being the height equivalent of using max-width instead of width.
Hoping the day comes soon when we can forget IE altogether.
Me too, but that’s what they said.
I usually leave a display: inline-block in there for flex items as a fall-back for non-flex browsers.
Though in this case, because I removed the width rule in favour of the more flexible flex-basis property, that won’t have the same effect.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.