Wrap text around a stationary divider

Question

Is there a way to create an html element that doesn't move even if the content on the webpage changes it stays in the same position and the rest of the content wraps around it?

I want to create a long line that stretches across a dynamic webpage. When someone adds more content to the webpage, that line should stay intact and not move like a brick wall and the rest of the content maneuvers around it or jumps over it.

Visual example:

content content content content content contentcontent content
content content content content content contentcontent content co
--------------------------------------------------------------------(long line)
ntent content contentcontent contentcontent contentcontent content
content contentcontent contentcontent contentcontent contentcontent

Notice how on the 2nd line the text wraps over the long line to continue after the line.

Hope it makes sense,

Found this question, this is more or less exactly what I want jQuery Split content based on height

The questioned wasn't answered though.

That example didnt come out right. I want a line that splits breaks the webpage in half on a fixed position where that line is. The content that will be split is all text so, I want it to flow on till after that line if it becomes too much in the top half of the page. — shoriwa-shaun-benjamin, Jan 07 '13 at 21:18
The purpose is to visually show the user how many pages his content is going to fill up. Lets say I have enough content to fill 5 pages with text, there will be enough lines to split the content 5 times on that page. Kinda like ms word, the way it jumps to a new page after a page is filled up. — shoriwa-shaun-benjamin, Jan 07 '13 at 21:21
float doesnt work, the content doesnt wrap around the top of the line if I use float. — shoriwa-shaun-benjamin, Jan 07 '13 at 21:23
@misterdev you could move the float to the correct position in text by Javascript. Considering your goal, I'm going to suggest that. — John Dvorak, Jan 07 '13 at 21:25

isherwood · Accepted Answer · 2014-06-05T16:35:33.520

3

.fencepost {float: left; width: 0.1px; height: 100px;}
.gate {float: left; clear: left; width: 99.9%; height: 30px;}

http://jsfiddle.net/isherwood/P6Z3p/

edited Jun 05 '14 at 16:35

answered Jan 07 '13 at 21:44

isherwood

58,414
16
114
157

that's a clever little hack :) – TimCodes.NET Jan 07 '13 at 21:46
Clever. This creates a very narrow vertical element of height 100px on the left, of which a wide-bar of spacing bar is placed below, and then the text just fits around these two divs. – dr jimbob Jan 07 '13 at 21:54
2

Here's a modification that adds page breaks automatically: http://jsfiddle.net/foxbunny/KbXzS/ – Jan 07 '13 at 21:56
Thats it! you took the problem and practically ripped its head off! – shoriwa-shaun-benjamin Jan 07 '13 at 22:00

score 0 · Answer 2 · answered Jan 07 '13 at 21:25

0

I don't think its possible with CSS. You'd probably have a set character limit per 'page' and when you detect on a page that the character limit is over using javascript, you would force the user's focus onto a new 'page'.

The styling of the line is then irrelevant - its just a normal HTML element width 100% or something, the important bit is forcing the split on the user

answered Jan 07 '13 at 21:25

TimCodes.NET

4,601
1
25
36

I tried that route a hile ago but it wasnt accurate if the user added an image. I found this, this is more or less exactly what I want http://stackoverflow.com/questions/7032639/jquery-split-content-based-on-height – shoriwa-shaun-benjamin Jan 07 '13 at 21:31
but that's vertical columns, not paging? – TimCodes.NET Jan 07 '13 at 21:33
If I add a border at the bottom of each vertical column I achieve the same result. :) – shoriwa-shaun-benjamin Jan 07 '13 at 21:44

Wrap text around a stationary divider

2 Answers2

Linked