We help IT Professionals succeed at work.

Question regrarding page breaks, Best Practice

btintermedia used Ask the Experts™
I am working on redeveloping/tweaking or web site content management system.

The way that our system works is that you add "content sections" to a page, which consist of a picture, a title, and a paragraph body. These all execute from the same code, which repeats for each time there is a record row in the database.

I have built into the system, the ability to put in spacer sections, which consist of transparent gifts of various selectable sizes.

If you go to www.graceforcleveland.org,  you can see that on the index page, the two content sections, flow/wrap around each other on the page. I want this to be an option,  but I also want the user to be able to force a page break between the sections. What is the best way to do that?

I want to be able to place a code snippet that will prevent a smaller picture/and or text body to not wrap around or under a larger picture that may potentially proceed it. Through (if desired) this can be an interesting option - the user may want clear declinations between content sections.

what is the best way to do this? I know that <Br><br> will only create hard returns and line spaces, and if the preceding graphic is really big, then much many more <br>'s will be required, but then if the initial/preceeding graphic is made smaller, then there is a huge space where the <br>'s are. this is not good design. I need a code snipped the prevent sections from flowing into/wrapping around others.

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
"Force a page break"?  Do you mean go to another page on your site?


no - to keep the sections from wrapping up and around another section.

For instance, if I created each section to be in a table that was set to take up 100% of its available space, each section would stack below each other. I don't want to do this - because I want the sections to flow/wrap around each other, as an option. Please look and see how the content section are behaving on www.graceforcleveland.org.
OK, first off, I have no idea what you mean by "I want the sections to flow/wrap around each other" because to be honest with you, your html and CSS are a mess.  Take a look at the screenshots from Internet Explorer and Firefox: Screenshot from Internet Explorer Screenshot from Firefox
The structure of this content uses only <p> tags for it's formatting.  Content within a <p> would stay by itself unless you put some positioning css which would be very difficult with dynamic content as you have.
I rebuilt each content section to render within a table. There is a table that is generated for each content section. I was entertaining the idea that I could put a code snippet between each section of content that would force a page break from the last line of the text content of the prior section and any element of the proceeding. I am pretty sure that this is not possible.

Because each section is entirely dependent on whatever content the user adds, or even how many section there  are (and each section can be re-ordered) I think any system that incorporated absolute positioning would have to auto detect how large the graphics are and then do a really good job of calculating the the dimensional placements. That just seems hopelessly complicated - and against any idea of simplicity.
OK, I still am not understanding what you mean by "page break".  A web page is just that, one page.  This page can be as long as you want (although we don't recommend it being too long because people just don't like to scroll).  If you have an example, or could post a screenshot of what you are talking about, I would be appreciative.

I have seen that you have reformatted your page.  The CSS and HTML are much better.  However you are still having a problem in IE because you have a percentage margin for your .twoColLiqLtHdr #mainContent style on line 135 of your file.  This should be a fixed amount, or a smaller percentage because all your content drops to the bottom of the page.



I have settled with just using tables to structure the content. I tried your solution - and I see where it may be part of what is wrong, but regardless as to what I set it as - it still remains below. There must be something else going on. I have reposted that problem separately.