CSS: how to move element from one column to another one without changing the html ?

Question

hi,

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.

Answer 2

It is not possible in HTML/CSS, and I cannot think of any layout engine that allows that. Your wish is so strange that you may need to rethink that. Your readers may misunderstand the result even if you manage to make it possible.

The rules of element positioning are more or less the same everywhere. When element positions itself, it can use as a framework: page, column, parent (or one of its parents), current position (previous sibling) and that is it. Each peace of content either resides in its own part of the document and finds its place there, or leaves altogether and positions relative to the page. There is no emigration in layout.