View Full Version : div containers collapse in on themselves when the page is resized

Jul 1st, 2009, 08:14 PM
I'm new to writing HTML code from scratch. I've been tinkering with redesigning the look of my web site using CSS. I'd been able to conquer the feat of positioning my div elements just where I want them and was just about celebrate this victory when I realized that there was another issue to contend with. Whenever I resize my web page vertically all of the page contents will collapse so that everything fits within the new sized window; and sidebar actual moves to overlap some of the text. I'm not as concerned with text collapsing as I'm with sidebar moving to overlap the text. How should I correct my code to ensure that my sidebar stays fixed to the right of the content?

Here the link to my test page: http://yourdivineinheritance.com/new.html

I left the style sheet in the header to make it easier to view the full source. Can anyone help? It will be much appreciated.

Jul 1st, 2009, 08:19 PM
Usually if you want flexibilty, you should size things in ems or %ages. In this program (http://exitfegs.co.uk/Sources.html)you will find many sites that will help you.

Look in section D under layouts. Type layout in the search box.


Jul 1st, 2009, 09:28 PM
You need a doctype at the head of the page. Without one, you are in quirks mode and it's like 1998 all over again.

Now, some of your markup is from 1998, such as <center> which was deprecated years ago. So this is the one you should use:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

But new web pages should never use deprecated markup or use the transitonal doctype. You need to get beyond that.

Jul 2nd, 2009, 12:38 PM
"...get beyond that." I'm still applauding myself for being able to crawl from point A to point B in writing HTML code. It's hard to predict when I might start running. Thanks for the heads up though. It hasn't solve my problem but I did add the DOCTYPE.

Jul 2nd, 2009, 12:41 PM
Thanks for the resource. I haven't found what I've needed to solve my issue yet but it's great site to have reference to.

Jul 2nd, 2009, 01:49 PM
I'd recommend to check http://www.bonrouge.com/2c-hf-fluid(r).php, which is using float to the sidebar, and thus it has no such issue.

Jul 2nd, 2009, 08:53 PM
Thanks for the tip "Abduraooft." I used the id wrap technique outline on the site you suggested and it worked. I still don't quite understand why yet but I'm sure it'll dawn on me eventually.:thumbsup: