techjosh
04-19-2009, 01:54 PM
Hello. First, know that I've spent hours upon hours trying to research how to set the layout of pages through divs instead of tables. I've found there's some kinda simple basics, but this one I can't figure out. Here's the link to the issue page
http://www.techjoshonline.com/test
and my css page
http://www.techjoshonline.com/styles.css
Issue: My left column is a {float: left} deal while the right column (main body) is just a regular div (so as to help ensure the stretching and shrinking of the page based on the main bodies content.) I can't seem to get the left column to stretch appropriately, which I REALLY would like so I have more border options. Also, if I delete all the main body content so the left column is bigger then the right column, the right column doesn't stretch all the way, and since my border between the columns is currently part of the right column, that's a problem. NOTE, I don't want to take the tacky cheaters way out of putting an image behind both columns to give it a border as I'm trying learning how to do web development professionally and need to know the "correct" way to do this, especially to ensure correct display in all broswers (hence the conversion from tables to divs.)
My setup in a nutshell:
(div bodybox)
(div header)
(div left header)(/div)
(div right header)(/div)
(/div)
(div links)(/div)
(div contentbox)
(div left column)(/div)
(div main content)(/div)
(/div)
(div footer)(/div)
(/div)
What I know:
From research I've found that floating divs "escape" their containment element, so their position becomes absolute or something. I've used {clear: both} and {overflow: auto}, {overflow: none} in a few places to help work around this.
Any help is greatly appreciated. I added a div{border: 1px solid black} to the bottom of the head tag to help display the problem.
http://www.techjoshonline.com/test
and my css page
http://www.techjoshonline.com/styles.css
Issue: My left column is a {float: left} deal while the right column (main body) is just a regular div (so as to help ensure the stretching and shrinking of the page based on the main bodies content.) I can't seem to get the left column to stretch appropriately, which I REALLY would like so I have more border options. Also, if I delete all the main body content so the left column is bigger then the right column, the right column doesn't stretch all the way, and since my border between the columns is currently part of the right column, that's a problem. NOTE, I don't want to take the tacky cheaters way out of putting an image behind both columns to give it a border as I'm trying learning how to do web development professionally and need to know the "correct" way to do this, especially to ensure correct display in all broswers (hence the conversion from tables to divs.)
My setup in a nutshell:
(div bodybox)
(div header)
(div left header)(/div)
(div right header)(/div)
(/div)
(div links)(/div)
(div contentbox)
(div left column)(/div)
(div main content)(/div)
(/div)
(div footer)(/div)
(/div)
What I know:
From research I've found that floating divs "escape" their containment element, so their position becomes absolute or something. I've used {clear: both} and {overflow: auto}, {overflow: none} in a few places to help work around this.
Any help is greatly appreciated. I added a div{border: 1px solid black} to the bottom of the head tag to help display the problem.