turning an HTML table into CSS

[drone4four]

Check out this pen I whipped up: http://codepen.io/Angeles4four/pen/XKxAdm

How do I achieve same form but in purely CSS + without table elements?

Thanks in advance.

[Atelierbram]

What are the difficulties you are facing making this layout either with floats, inline-block or flexbox?

[Paulie_D]

Or even CSS tables?

..also <center> has been deprecated and is an obsolete element. It shouldn’t be used in current HTML.

[drone4four]

Thank you both for your replies.

@Atelierbram
Thank you for these key terms. I Googled floats and inline-blocks, perused w3schools and a variety of Chris Coyier’s docs, put it all together and, after a few spats of keyboard mashing, I assembled this:
http://codepen.io/Angeles4four/pen/ZOqKdB

However the two main issues which I can’t figure out now are:
1. How do I align the dual green lines where the two profiles run together straight down the center margin of the page (rather than squished over to the left)?
2. How do I center align the image of the kitty? I tried adding a middle attribute in the HTML which didn’t create the desired effect. What would the CSS trick be? I couldn’t find Chris’ guide which addresses this issue.

@Paulie_D
Nah, after playing around with floats, I think a CSS table isn’t what I am looking for. Cheers all the same, though.

[eric.carlisle]

This a Flexbox approach, though the use of Flexbox looks deceptively simple in this example. The other suggestions would work too, as would a grid layout.

http://codepen.io/ecarlisle/pen/zBmdRQ

Here’s a great page for learning Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[drone4four]

Thank you, @eric.carlisle , for your helpful reply. You achieved my desired effect but with Flexbox. I took a close look at Chris Coyier’s doc that you linked to, but I don’t understand it at all. For example at the very beginning when it describes Flex items, “1, 1, 1, 2, 3” I am totally lost. I did see your comments in my codepen you forked and then adapted, but I don’t understand some of your comments either. I have no idea what is going on. It appears that once you do understand Flexbox, it makes your life is easier. But until then, would you (or anyone else reading this) be able to ‘humour me’ and fork my pen and help create the desired effect but with floats and inline-blocks as I set out to do?

Thanks for your attention.

[Paulie_D]

There’s a couple of problems with your code.

Firstly, don’t make up elements (<floating-box>)….

Custom elements are possible but they are advanced concepts and require a fair amount of additional work to be created and accepted by the browser and be expected to be recognised.

Swap those out for divs…

HTML5 offers a huge range of elements which would suit here from simple divs to section elements and more.

In case of doubt, reach for a div and specify it with a class or ID.

As for your design, there are only two non-JS methods to make your left and right sides equal height (absent actual tables),,and those are flexbox and CSS Tables..unless you actually define a fixed height/max-height.

Flexbox example with what I think the HTML structure should be more like

http://codepen.io/Paulie-D/pen/wWYbOO

Now, I’ve also included in there the floating options….if you remove the display:flex you can see the only difference now is that the left and right second row elements aren’t the same height any more.

Now this might not be necessary to you and that’s OK so it’s up to you.

I’ve put borders around most major elements so you can see what’s going on.

Oh, before I forget, align…also deprecated…for centering there are a lot of methods…in this case, as the image is an inline element and centers like text…so text-align: center on the parent section not only centers the image but all text in that section.

[drone4four]

Holy Smokes: Thank you @Paulie_D ! I appreciate your detailed reply and for the helpful testcase. You kindly took some time to help me craft my HTML and CSS. I believe you have created precisely what we set out to achieve! I am so happy with the end product.

I will be sure to avoid making up elements going forward. Using divs instead makes sense.

I do see your comment about the ‘magic section’, referring to the Flexbox CSS which I don’t really understand, hence why ‘magic’ is an apt description. I suppose with more experience perhaps with JS, I will come to understand the Flexbox tool better.

I agree that putting colored borders around the major elements is a great teaching device.

I will also be sure to avoid using the align element embedded in HTML

Thanks again for sharing your knowledge, Paulie_D.

Thanks goes out to eric.carlisle too.

[Author]

Posts