Bottom not lining up correct - Help Please

[Kimbh]

Hello, I wanted to switch a index page from html tables to css and after three days of crawling in the corner and eating my hair I am finally getting closer to what I want however the bottom is not lining up correct. No matter how much I tweak with height of the section it is does not change or something... I am very lost on this one. Logically the change the height changes the height of the section. I also messed with the height in the body codes but that did not help either.Here is the page: http://www.momsbreak.com/Codes I can't seem to fix correctly./* Articles */#container3 { width: 900px; margin-top: 10px; margin-left: 0px; margin-right: 0px; text-align: left; margin-left: auto; margin-right: auto; height: 3500px;}#page_content3 { border: thick #68647B dashed; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; padding-left: 20px; padding-right: 20px; padding-top: 20px; height: 3500px; padding-bottom: 20px;}Any help is much appreciated.Kimber

[jeffman]

Text is a fluid medium whose size cannot be accurately predicted once you exceed a few lines. I notice that your body element, container3, and page_content3 each have a defined height. Defining a height is certainly appropriate for graphics and other elements with a fixed size. But putting a lot of text in a container with a fixed height is generally a bad idea. Likewise, nesting containers inside containers with defined heights can lead to trouble, especially when a parent container is defined to be shorter than its child container.Unless you have used absolute positioning, container heights generally adjust themselves to fit the content.Have you tried simply removing those height definitions?

[dsonesuk]

Also using inline styling <div id="page_content3" style="height: 3539px">will take precedence over (unless !important is used) #page_content3 { height: 3500px; }

[jeffman]

I might add that organizing/positioning the text might be easier if the different chunks were placed in <p> elements. Those could be styled with a bottom margin, and that would eliminate the need for all those multiple <br /> elements.

[Kimbh]

Text is a fluid medium whose size cannot be accurately predicted once you exceed a few lines. I notice that your body element, container3, and page_content3 each have a defined height. Defining a height is certainly appropriate for graphics and other elements with a fixed size. But putting a lot of text in a container with a fixed height is generally a bad idea. Likewise, nesting containers inside containers with defined heights can lead to trouble, especially when a parent container is defined to be shorter than its child container.Unless you have used absolute positioning, container heights generally adjust themselves to fit the content.Have you tried simply removing those height definitions?

I started with no height and tried auto before putting a height in, nothing worked but the box was way to small. thanks

[Kimbh]

Also using inline styling <div id="page_content3" style="height: 3539px">will take precedence over (unless !important is used) #page_content3 { height: 3500px; }

I will give it a try, thanks

[Kimbh]

I might add that organizing/positioning the text might be easier if the different chunks were placed in <p> elements. Those could be styled with a bottom margin, and that would eliminate the need for all those multiple <br /> elements.

ok, that I understand. It gives me some ideas on how to work with this.

[jeffman]

I had a few minutes, so I downloaded your page and CSS. I removed all height definitions for the body, container3, and page_content3, including the inline definition. The result is that all the italicized text at the bottom is within the dashed border, and there is a bunch of white space between the text and the border. Is that the goal?I didn't grab the images and other stuff, so I don't know what effect they might have on things.

[Kimbh]

I had a few minutes, so I downloaded your page and CSS. I removed all height definitions for the body, container3, and page_content3, including the inline definition. The result is that all the italicized text at the bottom is within the dashed border, and there is a bunch of white space between the text and the border. Is that the goal?I didn't grab the images and other stuff, so I don't know what effect they might have on things.

I use your earlier posting and using a box for each articles and used the <p></p> and it looks like that is going to work. I have a few browser text to run but so far so good.Thanks