Avatar of btintermedia
 asked on

Question regrarding page breaks, Best Practice

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.


Avatar of undefined
Last Comment

8/22/2022 - Mon

"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 started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

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.