Viewed   43 times

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:

http://img16.imageshack.us/img16/5538/pagesuc.jpg

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:

http://img689.imageshack.us/img689/7853/overflowc.jpg

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.

 Answers

2

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.

  • http://www.adobe.com/devnet/html5/articles/css3-regions.html
  • http://labs.adobe.com/technologies/cssregions/
  • http://dev.w3.org/csswg/css3-regions/
Friday, October 28, 2022
4

Install unicorn locally.

Saturday, November 5, 2022
 
2

The H1 on the register page has a default Margin to it. Sometimes, I don't know why, if you give the first element a margin, it applies it to the parent.

By giving the H1 #register_title a top margin of 0, you should fix your problem.

#register_title { margin-top: 0; }

Always remember to use a reset.css implementation or keep in mind that elements are styled by default.

Edit: I'd like to point out that this was an issue because of all your previous elements were absolutely positioned. You really should not be using absolute positioning the way you are. You should use margin-top, padding-top to move elements down the page. Absolute positioning should only be used when no other avenues of positioning an element are available.

Thursday, August 18, 2022
 
zanbri
 
3

Something like this? http://www.quirksmode.org/css/textoverflow.html

Text-Overflow

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box. The ellipsis value causes three periods to be appended to the text.

Thursday, October 27, 2022
 
grtjn
 
2

Answer rewritten August 2013

Unfortunately not, although things are improving. Programmatic DOM mutations other than those triggered by document.execCommand() do not go on the browser's built-in undo stack. However, there have been two recent developments:

  • IE 11 has new ms-beginUndoUnit and ms-endUndoUnit commands
  • There is a spec in the works for an undo stack available to web developers, parts of which have been implemented in WebKit and Firefox (note: it's disabled by default in Firefox and apparently also in WebKit).

Until the situation improves, you could use document.execCommand("InsertHTML", false, "<b>Some html</b>"); but this is not supported in IE.

Monday, October 17, 2022
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :