Layout Question(s)

[MattDavid.Hall]

Hello everyone!

I have a quick question regarding a layout issue that I am having. I need to have 4 columns for my page layout.

Here is my current CSS code:

#col1
{
float: left;
width: 130px;
margin-left: 0%;
display: inline;
background-color: #5c895c;
}

#col2
{
float: left;
width: 1%;
margin-left: 0%;
background-color: #779b77;
}

#col3
{
float: left;
width: 99%;
margin-left: 0%;
background-color: #ffffe0;
}

#col4
{
float: left;
width: 30px;
margin-left: 0%;
background-color: #e6e6b8;
right: 0px;
}


As you can see I have four columns. 2 are fixed width, the other two are %'s.

I then simply use this HTML code:

<div id="col1">&nbsp;</div>
<div id="col2">&nbsp;</div>
<div id="col3">&nbsp;</div>
<div id="col4">&nbsp;</div>

The problem I have is that the columns end up using two lines of the page instead of 100%. If I use just HTML tables this works fine. I am still new to CSS layouts so I cannot seem to figure this out. It is probably an easy solution, but I am missing it; even after a couple of hours of browsing the web.

If someone could point me in the direction I need to go I would appreciate it. Thank you in advance!

[al-do]

LINK (http://blog.html.it/layoutgala/) try any of those

[MattDavid.Hall]

Thanks for the link!

However, judging by what I saw there, and also other examples that I managed to find on the web, I cannot mix % values and px values to create a layout with CSS. I just find it odd that you cannot do this with CSS but you can with HTML tables. Perhaps that is something that could be added to CSS later on.

Thanks for the help anyways.

Now to find a solution for roll over images using CSS...I have found some possible solutions on the web but I don't really like how they did it. If I need further help I will ask.

[MattDavid.Hall]

Instead of creating a new thread I thought I would just add to this one. I have a project that I have started and I have a question for ya'll.

http://img480.imageshack.us/img480/7015/layoutsw7.gif

Above is a link to an image. That image is a small version of what I want my page layout to look like.

My question is this: what is the best way to get my layout to look like that? Should I use a bunch of background images in different DIV's, or is it better to use a lot of DIVs with just background colors?

I will have images in the top left and top right of the page, but portions of the layout will show through areas of the images.

Any help regarding this would be much appreciated!
I apologize if this is a dumb question but I am still new to the layout portion of CSS.

Thanks!

[chrishirst]

it's not that complicated with a bit of DHTML

http://www.candsdesign.co.uk/page-templates/three-column/liquid/

layout is at http://www.candsdesign.co.uk/page-templates/three-column/liquid/layout.asp