Positioning DIVs

[unified]

I am trying to convert a webpage that uses to tables for layout, to a CSS layout using DIVs. So far, the only problem I am having is laying out three columns that used to be table cells. I tried a variety of things, but the DIV that should be the right (third) colum is in the location margin-wise (I think), but on another line. This is what I have in the style section:

#content-panel1 { width: 234px;
float: left;}
#content-panel2 { width: 281px;
margin-left: 234px;
background-color: #F3F3F3;}
#content-panel3 { width: 272px;
float: right;
margin-left: auto}

I'm new to CSS, so I am not sure what is wrong.

Thanks In Advance For Your Assistance.

[jscheuer1]

Well, for a columnar effect, float all the divisions in the same direction, all left. Be careful using pixel widths, if the window becomes too narrow, this will force a wrap.

[unified]

Thanks. Floating them all left worked when I adjusted the width of each to 260px.

I didn't know what else to use for now as I am still reading the books I have. I really don't want to use percentages since this particular site will not look well if the screen resolution is scaled any higher than 800x600, at least until I am able to redesign things a bit. I figured out that placing these DIVs in another DIV with a fixed width will prevent wrapping when the browser window is smaller, so I guess it will work if it is larger as well. :o

[jscheuer1]

The container division is a good idea generally and you might want to look into using a min-width property for it, rather than a width property. However, this is only available for non-ie browsers.

[unified]

I've succeeded in redesigning and removing tables from my code, and I've even solved the resizing problem for the columns. But now I have experienced the headaches of CSS. My sample pages display play in IE 6, but have problems in NS 8.1. In particular, the footer won't stay at the bottom of the screen and just sits there in the middle of the page at this url : http://www.unified-dsa.com/software.html

I'm not sure what is wrong, maybe I have too many DIVs? :confused:

[blm126]

change


#footer-text { text-align: center;
color: #FFFFFF;}

to


#footer-text { text-align: center;
clear:left;
color: #FFFFFF;}

[unified]

Nope, didn't work. :(

I noticed, too, that NS 8.1 actually renders pages to display as either Firefox or Internet Explorer. Firefox is the default. Of course, my page shows up fine in NS 8.1 displayed like Internet Explorer.

I downloaded and installed Mozilla Firefox 1.5 just to have it handy for these purposes and, sure enough, the pages are messed up.

I'll try a couple of more things and, if nothing helps in the next few days, I'll just remove the footer in order to keep what little sanity I have left. I realize that a better solution will be to figure this one out, but ...

[jscheuer1]

#hdr-txt { margin-left: 150px;
width: 500px;
height: 166px;
min-height:31em;}

[unified]

Ah. I actually missed this one. :)

I did discover, also, that floating #hdr-img and #hdr-txt actually did the trick. Now, I am working on figuring out why there is a gap between the menu and the header image.

I'm actually loving this learning CSS process and I'm grateful for all the help everyone has given me.

Thanks.