How do I get to SPANs stay in the same ROW?

[WorldNews]

Hi,

I am trying to create a Table (layout) with CSS only and the SPANs are not working as they should be!
You can see the sample here:

ERROR: Missing Page

Problems:
1- As you see Column 2 that contains the input field is out of alignment with other 2 SPANs, it is like 50px below them!
How do I make sure that all SPANs are in same exact alignment?

2- As you can see the 2nd ROW that contians the 3 SPANs is not of the same exact Width as the DIV above them? How do I get them to have the same exact width?

Thanks

[SamA74]

@WorldNews

I am trying to create a Table (layout) with CSS only

Then you should be using display: table to do this.
Give each row a containing div, make that display: table; width:100% then each column should be display: table-cell

[m3g4p0p]

@WorldNews

How do I make sure that all SPANs are in same exact alignment?

Giving them float: left would do the trick here.

@WorldNews

How do I get them to have the same exact width?

The widths of the 2nd row add up to 90% like the 1st row, but you’re not taking into account the margins.

That said, I think that flex would be a good choice for something like this.

x-post (again… darn @SamA74 you’re quick at the trigger! :-D)

[ronpat]

Your code has 11 significant errors. Validate your code.

https://validator.w3.org/nu/

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.anoox.com%2Ftemp%2Fcss_table.php

[m3g4p0p]

Here’s an example using flex:

Edit fiddle - JSFiddle - Code Playground

The advantage is that it’s nicely fluid. Also, don’t use fixed heights like this… your design immediately broke when I opened the dev tools as the text of the first 2nd row span went outside the span.

[WorldNews]

Hi,

You have a good example of this?
I see only really childish examples of Tables done with CSS display: table;

[WorldNews]

m3g, The float: left does result in aligning all SPANs correct.
But not sure what you mean about how to make sure that SPANs in different rows all have same Width?

P.S., I do not have time to learn all CSS tricks now.
So I may pass this Job to one of our Volunteer or Paid staff if I cannot quickly here grab the missing pieces to get this rather simple task done…

FYI, we are a not-for-profit social search engine so we are working with extremely limited resources and Tons of work to do.

[PaulOB]

@WorldNews

and the SPANs are not working as they should be!

You shouldn’t be using spans to hold block level elements as that is not allowed. A span is an inline element and can only contain other inline elements (such as other spans, strong, b, i, etc). It cannot contain divs or p elements or any block elements. These are the building blocks of html and ignoring the correct structure is a very bad move.

@WorldNews

I see only really childish examples of Tables done with CSS display: table;

Then you haven’t been looking close enough as I (and others) have provided many demonstrations in the forums using the display table and table-cell properties. They are a very useful tool and do many of the (simpler) things that flexbox can do but with far greater support. They are ideal for column layouts.

@WorldNews

P.S., I do not have time to learn all CSS tricks now.

Neither do I

[m3g4p0p]

@WorldNews

But not sure what you mean about how to make sure that SPANs in different rows all have same Width?

Apparently you updated your live example. IIRC originally the first row element had a width of 90%, and the 2nd row elements widths of 30%, 50% and 10% respectively. This does add up to 90% like the first row, but it doesn’t account for their margins. You can have the borders included in the given widths with box-sizing: border-box; (missed that in my previous post), but for the margin you’d have to calculate the actual width like e.g. width: calc(50% - 1px);… or let flexbox handle all this for you automatically.

Here’s an updated fiddle which also includes flex-basis to keep the proportions as desired, but this isn’t really necessary here IMHO as flexbox will adjust to the content anyway. AFAIK support is good in all major browsers.

Yet another possibility would be to incorporate a grid system into your site. There are plenty of these available, from simple and easy to mighty and complex. This might be a particularly robust solution as you’d build your whole site around this grid, and responsiveness as well as consistency wouldn’t be a big deal any more. Also, this doesn’t require much (if any) actual CSS skills to get it working.

So if your time and resources are limited, this might be a better solution than a half-baked custom layout. Have a look at simple grid for a very basic solution, for instance.

[WorldNews]

OK, Thanks.

[WorldNews]

M3g. Thanks for the info. I think for now we will go with basic HTML Table design for certainty we need in page layout and speed we need to move forward.

Thanks