How do we have 2 DIVs next to each other as Table columns?

Hey all,

We would like to have 2 DIVs or SPANs next to each other, just as the 2 Columns in a Table.
So that as we add content into DIV (on left column) it displays without effect on content of (right column) DIV, again just as one could do with Table. So here is the example of how this should look in Table version:

but when we try the same look in CSS only version, we are not getting results, here:

So what are the right CSS code that would allow one to have 2 effective Table Columns, but in pure CSS?


I’m not seeing a CSS only version, just another version with nested table layouts and presentational attributes. :mask:
Not much CSS going on there.
I think what you really want is CSS tables.

1 Like


You’ve floated the span (matching notes) to the right but you would also need to float the form to the left with an appropriate width otherwise there will be no room for the float to the right. Floats do not rise next to non floated items and essentially just float horizontally from where they are unless they are preceded by a previous float.

You would need tp add a class to the form element as that is the container for the that left content.


.formleft textarea{width:100%}

Then add a class to the form element (I’ve called it ‘formleft’ but it should be named more semantically than that):

<form action="/news/my_notes.php" method="post" name="notes" onsubmit="return CheckFrm();" class="formleft">

Of course as Sam said above css tables would be better for this but would need a change of structure combined with the fact that you still have an unnecessary/non semantic table holding both those elements anyway. :wink:

1 Like

Thanks for this Intel.
I shall read through it and pass it to others in my team as well and see if we can get this Table look all in CSS in quick order.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.