What I am trying to do is create a site that displays my rants in faux letter form.
I want the “paper size” (div size) to be fixed, and the text to continue on the second piece of paper (a second div) displayed just below the first paper like this..
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
ONLY FOR THE SAKE OF SIMPLICITY: I’ve created a simple html/css page to demonstrate in the simplest form what I am trying to accomplish with the code:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.container {
background: #FFFFFF;
width: 600px;
height: 400px;
margin: 0 auto;
}
#lbox {
background: #F00;
width: 300px;
height: 400px;
float: left;
}
#rbox {
background: #00F;
width: 300px;
height: 400px;
float: right;
}
.flowcontent {
padding: 10px 50px;
}
</style>
<div class="container">
<div id="lbox">
<div class="flowcontent">
<p>Lorem Ipsum...</p>
</div>
</div>
<div id="rbox">
<div class="flowcontent"> </div>
</div>
</div>
Screenshot:
I apologize, being a new user, I am not allowed to post the
screenshots I have created to help explain my situation, so am forced
to link until I have enough reputation points:
In this case I would like the overflow from the red div to continue in the blue div on the right.
I realise this may not be possible with HTML/CSS alone, but was hoping maybe CSS3 might have some new tricks for this, as it has more advanced column handling.. If that’s a no go, does anyone have a suggestion for a logical way to go about breaking this up using PHP or even JavaScript or JQuery?
I know PHP, but am still a JS/JQ newb so I have provided some (hopefully) very simple example code for anyone to plug in their own JS/PHP examples.
Anyway, thanks for your time.
What you want is CSS Regions module proposed by Adobe and currently supported by zero browsers. Adobe did release a very rough webkit-based browser for playing with the spec if you’re really interested. But as others have said, right now you’re SOL and will need to find another solution.