Hey there guys, I need to publish a post in WordPress that have this structure:
As you can see it is not well aligned… but if I preview it on WordPress it is fine. But I have there a lot of , to be true. So I thought on creating some tables for it… but I would need them in CSS and not in HTML (right? - they we’ll be nested).
Something like this:
Would be this possible? If yes, do you think this is the best solution here?
Ugh, you don’t want tables for that. A simple CSS fix should suffice, depending on how your HTML is structured. We’d need to see a working example to help, though.
Thank you, @ralphm! Umh, how could I send to you an HTML example in this case? As said it is from WP… and you, as a normal visitor, can’t see the preview page of the post itself. Would be okay if I just copy the “Text” editor content and post it here?
It really needs to be a code sample that demonstrates the issue. Essentially, it looks like you have floated elements snagging on each other there; and the best way to structure something like this is to have a container (such as a div) around each repeated section, which is set to overflow: hidden. But it’s guesswork without a working demo that demonstrates the problem. (Short of a live link, you could recreate it on CodePen etc.
Ok, here it is:
Pass: 123
As you can see, they show up okay there… but I’m considering adding something more robust… let’s say in the case that in the future I’ll change the WP style. You never know.
I solved using HTML tables.
Here you can see the result:
I think it’s okay. Tell me if I’m wrong.
Note: the previos link (in my post above) is no more working.
It’s okay but tables hm, isn’t that a old way 
?
Check this way out, require a bit CSS styling.
Using HTML tables for layout does seem a great shame…
It is. There’s no need for it in this millennium.
That is probably similar to the original, I think all it needed was a “clearfix”, like Ralph said:
So you guys mean to have something like this?
<div style="overflow: hidden">
<img src="http://placehold.it/110x150">
<h3>This is just simple title</h3>
<p>
La squadra speciale di criminologi dell’Unità Analisi Comportamentale dell’FBI (BAU Behavioral Analisys Unit) conosciuti anche come Profiler sono incaricati di studiare e tracciare un profilo psicologico e criminale di assassini seriali collaborando con le forze dell’ordine per
</p>
</div>
Yes if you don’t need visible overflow then that is fine as overflow:other than visible creates a new block formatting context and contains floated children thus stopping them snagging. If you need visible overflow in those elements then you could have used a ‘clearfix’ method which was mentioned above.
Or you could have set the div to display:table and width:100% as display:table-cell also creates a new block formatting context (note that display:table does not create a block formatting context on its own but it generates an anonymous display:table-cell box which is the trigger for the block formatting context and incidentally is the reason that your table layout contained the floats and not the fact that you used a table.)
This is my fork of @bedakb Pen. I used a clearfix to clear the float instead of the top border.
Note that if you remove the overflow setting, you get the snagging on the float like before.
That doesn’t actually clear the floats and creates a number of problems. If the floated item is taller than the margin-top:80px you set then it will snag.
Once the static content above moves downwards the second item moves 80px away from the content leaving a big gap.
Margins on elements that follow floats slide up under the float to the containing block which is the block at the top edge of the float and thus of no real use.
Proper float containment is the solid answer 
Hi bro,
You use Wordpress? if yes, just use another template.
Hi @DonMark, could you please explain exactly how this would help with what @Norman is trying to accomplish? More detail and information might clarify your response.
Are you referring to a different theme or are you suggesting that he build a custom template for that content?
Would it really be better than the solutions suggested above? It seems to me it is basically a css issue which is well on its way to being solved.
hi @WebMachine If I understood correctly, @Norman want to align somthing… I propose two solutions:
1- Go to style.css in your template folder, copy the style code and we try to help you.
2- Norman uses a wordpress script, There are thousands of theme available on the Internet, he can choose what he wants, as there’s fee of themes there’s also free theme.
Welcome to the forums.
Is a theme the same as a script???
Norman has a theme that he has been developing for quite some time and seems to be happy with. Why would we suggest that he investigate a new theme when he is not complaining about his theme?
HTML and CSS work together. Why would you want to see the CSS in the local stylesheet without the HTML and without the rest of the CSS?
In fact, Norman has already posted a link to his site, so we have access to both the HTML and CSS. What is the purpose of asking him to post his local stylesheet again?
Did you actually read and understand this topic before posting your suggestion?
Thank you a lot guys for your beautiful help here. I’ll try tonight to implement the solution posted by @SamA74 and I’ll let you know if I’ll have some problems.
Just for curiosity. I mean… why tables in this case will be so bad? Okay, they are old, no more used… (but not deprecated, if I’m not wrong), and in my case they are doing really what I need, and they both works on desktop and on mobile devices, for what I can see. So, could you please me briefly explain me one more time why tables are no more taken into consideration in these days? 
They are not deprecated and likely will never be as long as there is a need to display tabular data.
That does not mean they should be misused for layout anymore than using extra br tags should be used in place of margins.
I suppose since one could use display: table and kin, as far as a means to an end there isn’t much difference.
But in terms of Accessibility and Semantics there is a big difference.
It’s about semantics, html tags have meanings, they don’t just define how the browser renders an element, but they describe what the element is and its purpose. This helps crawlers and screen readers make sense of and understand the document.
Tables are a perfectly acceptable element for use in web design today, for displaying tabular data. For example, if you had a page with train time tables on it, table would be the perfect element to use for that.
Always choose the element that fits the purpose of the type of data you are displaying. Don’t choose an element to force a layout or style, use css for that.