- This topic is empty.
August 3, 2016 at 6:03 pm #244206
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.August 3, 2016 at 10:54 pm #244210AtelierbramParticipant
What are the difficulties you are facing making this layout either with floats, inline-block or flexbox?August 3, 2016 at 10:58 pm #244211Paulie_DMember
Or even CSS tables?
<center>has been deprecated and is an obsolete element. It shouldn’t be used in current HTML.August 4, 2016 at 5:05 pm #244227
Thank you both for your replies.
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:
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.
Nah, after playing around with floats, I think a CSS table isn’t what I am looking for. Cheers all the same, though.August 4, 2016 at 9:12 pm #244228eric.carlisleParticipant
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.
Here’s a great page for learning Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/August 6, 2016 at 12:21 pm #244271
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.August 6, 2016 at 12:59 pm #244272Paulie_DMember
There’s a couple of problems with your code.
Firstly, don’t make up elements (
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
sectionelements 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
Now, I’ve also included in there the floating options….if you remove the
display:flexyou 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: centeron the parent
sectionnot only centers the image but all text in that section.August 6, 2016 at 9:54 pm #244278
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.
- The forum ‘CSS’ is closed to new topics and replies.