Oddball wrote:
I have a problem with the positioning of two divisions.
They are containined within a content division in which all the page
content happens (ie not the menus, etc.).
The behavior I would like (and the behavior that happens in IE) is
for the content division (from now on 'ConDiv') to resize with the
content of either of the sub divisions (MainDiv and NewsDiv).
I am trying to get the divisions to position directly next to each
other. The fix I first came up with is using float:left and
float:right. Dreamweaver and IE both claim that this should do as I
require but Firefox just floats the divisions plain over the entire
document (with the top aligned to the top of ConDiv but the actual
content floating over the footer of the page and heading on down to
nowhere.
It looks to me like you're doing a 2-column layout with header & footer -
would that be correct?
One question about that - do you WANT the "Latest News" div to be lined up
BELOW the "Welcome" div, or right next to it?
Take a look at my site:
http://www.webrightdevelopment.com and see if that
seems to be what you want. I have a header, a middle portion with two
columns, and a footer. If that's what you're trying to achieve, here are a
couple tips:
First off, to get the placement of the footer where you want it, after using
float for the two columns, you need to add 'clear:both'.
To get the layout you want, you will need a container div for everything.
Then the header, then the middle section with its two columns, and finally
the footer. It should come out something like this:
<div id='wholepage' style='background-color:white; width:80%;'>
<div id='header' style='background-color:white; width:100%;'>
--Header Stuff Here--
</div>
<div id='middle' style='background-color:white; width:100%;'>
<div id='leftcolumn' style='background-color:white; width:50%;
float:left;'>
--Left Column Stuff Here--
</div>
<div id='rightcolumn' style='background-color:red; width:49%;
float:right;'>
--Right Column Stuff Here--
</div>
</div>
<div id='footer' style='background-color:blue; width:100%; clear:both;'>
--Footer Stuff Here--
</div>
</div>
BTW, you'll see that the two columns only add up to 99%. I did this because
I've noticed that in some browsers, putting two 50% width divs next to each
other sometimes causes them to move vertically while resizing the browser
window.
Also note that with this design, the LEFT column will visually appear to
match the full height of the middle div, but the right column won't - this
assumes that the right column is the one that will take up the most space,
and therefore the left column will have to adjust to the right. What really
happens is that the left column div cuts off at the bottom of its contents,
but since the wholepage div has the same background color, it APPEARS to
fill all the way to the footer. If you were to put a border around it, or
change the background color, you would see this.
Hope that helps - I remember when I was just learning CSS and trying to do
this (not all that long ago, actually) - it was a pain...
--
Tony Garcia
Web Right! Development
Riverside, CA
www.WebRightDevelopment.com 
