can't figure it out

[pinky12]

i decided to give up on iframes because i'd rather just have new pages. i am trying to fool around and make columns on the page that do not run out so i put this in my style codes:


div.sidebar {position: absolute; background-color: DeepPink; z-index: 99; top: 0px; left: 0px; width: 200px; height: 100%; margin-left: 100px; padding-left: 6px; padding-right: 4px; padding-top: 6px}


div.maintext {position: absolute; background-color: silver; top: 0px; left: 300px; height: 100%; width: 60%; margin-right: 100px; padding-left: 10px; padding-top: 6px;}

and then i referenced them within the document. the only reason they are the weird colors is so i can see them, but my problem is when i put a lot of text into either side it eventually ran out past the color. does anyone know why it did that? i just want to be able to have a spot with an unlimited amount of room that i can bring all the way down the page, but by using the colors i saw that it does not work that way for some reason. i hope this makes sense! thank you everyone, im new at this and i have searched google a million times for css & just come up with the same information on things i already know. thanks again!

[mwinter]

i decided to give up on iframes because i'd rather just have new pages.

Good.

i am trying to fool around and make columns on the page that do not run out [...]

"Run out"? Do you mean that the height won't be limited (it will change to fit the content)?

div.sidebar {position: absolute; background-color: DeepPink; z-index: 99; top: 0px; left: 0px; width: 200px; height: 100%; margin-left: 100px; padding-left: 6px; padding-right: 4px; padding-top: 6px}

div.maintext {position: absolute; background-color: silver; top: 0px; left: 300px; height: 100%; width: 60%; margin-right: 100px; padding-left: 10px; padding-top: 6px;}

This seems to me to be very fragile. At different viewport widths, this will either leave large amounts of space, or cause overlapping. You may also have problems with your side-bar: if it contains text, that text may reflow (or even overflow) at larger sizes because you're specifying a fixed size in pixels. Dimensions related to text are better specified in font-relative units, like ems (1em = font-size property value).

I could post code, but there are examples of columns in tutorials and layout examples all over the Web (most use floats, which I prefer). If you want to reduce the overall width of the document and centre it, then wrap both in another element, reduce it's width and set the left and right margins to auto.

[M]y problem is when i put a lot of text into either side it eventually ran out past the color. does anyone know why it did that?

Probably because you set the height property (though it shouldn't be applied unless all parent elements also have explicit height values). An element will automatically grow to contain its content, so just leave the property at its default (auto).

Mike

[pinky12]

thank you so much for replying. what i meant with run out is that the text goes over the random colors i specified. i put auto in but then it makes both of the columns two different colors, but since i doubt i will be having a hot pink sidebar, i think it will be okay. i will also experiment with using floats. thank you so much.