Question

I’m using css to edit the content of a page (NB. I cannot edit html code).

I have 2 columns div1, div2.
Each columns have several children (containing text). If the block has 2 or more lines of text all successive content is automatically moved down.

I need to move a chidlren from the first column to the second one, in the middle. I was considering to use absolute positioning but then I realize how children are not anymore moving down as the number of text lines increases.

How can I solve this ?

<div id=div1>
  <div> blabla </div>
  <div> blabla </div>
  <div> blabla </div>
</div>

<div id=div2>
  <div> blabla </div>
  <div> blabla </div>
  <div> blabla </div>
</div>

thanks

Answer 1

You can’t do this in pure CSS 2. (Well you sometimes can, depending on your scenario, but only with awful hacks involving absolute positioning and such.)

CSS 3 has columns but they are not widely enough supported yet supported by all modern browsers except IE.

There are several jQuery based attempts like this one that add column functionality but of course, they need JavaScript enabled.