HTML - Fluid Page Help

Hello,

Lately I've been getting more into HTML/CSS, but I have a problem. What I'm trying to do is make the website the same size on every browser window / resolution. I have heard Fluid Layouts does the trick, however I have not clue how to do that. I've tried going by tutorials, but no one really explains it step by step.

What I was wondering if anyone has a link to a "Video Tutorial" on learning how to do Fluid Layouts, or if anyone knows a different way to accomplish this.

Thank you

I'm having so much trouble with this. I have a site (from photoshop) that will have have fluid layout (100% width) but I want the footer to "stick" to the bottom of the window (unless content goes longer).

Here is content part of the html (which is a bit messed up now from trying many things)


<div id=container>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr></tr>
<tr>
<td height="235" bgcolor="#FFFFFF">&nbsp;</td>
<td width="1000" rowspan="5" valign="top"><!-- ImageReady Slices (screencapture3.psd) -->
<table width="1002" height="400" border="0" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td height="58" colspan="9"><img src="images/rightthere_01.jpg" width="417" height="58" alt="" /></td>
<td colspan="10"><img src="images/screencapture2_01.jpg" width="583" height="58" alt="" /></td>
</tr>
<tr>
<td colspan="9"><img src="images/rightthere_logo.jpg" alt="" width="417" height="76" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/seniors.jpg" alt="" width="140" height="177" border="0" /></td>
<td width="139" rowspan="2"><img src="images/caregivers.jpg" alt="" width="139" height="177" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/physicians.jpg" alt="" width="142" height="177" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/disabilities.jpg" alt="" width="162" height="177" border="0" align="top" /></td>
</tr>
<tr>
<td height="101" colspan="9"><img src="images/inhome_tagline.jpg" alt="" width="417" height="101" border="0" /></td>
</tr>
<tr>
<td colspan="19" bgcolor="#69781B"><img src="images/nav_top.jpg" width="1000" height="51" alt="" /></td>
</tr>
<div id:navigation></div>
<td width="59"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image44','','images/about_ro.jpg',1)"><img src="images/about.jpg" name="Image44" border="0" id="Image44" /></a></td>
<td width="15"><img src="images/div1.jpg" width="15" height="17" alt="" /></td>
<td width="144"><a href="why.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image45','','images/why_ro.jpg',1)"><img src="images/why.jpg" name="Image45" width="144" height="17" border="0" id="Image45" /></a></td>
<td width="17"><img src="images/div2.jpg" width="17" height="17" alt="" /></td>
<td width="114"><a href="what.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image46','','images/what.jpg',1)"><img src="images/what.jpg" name="Image46" width="114" height="17" border="0" id="Image46" /></a></td>
<td width="17"><img src="images/div3.jpg" width="17" height="17" alt="" /></td>
<td colspan="4" bgcolor="#8B9849"><a href="who.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/who_ro.jpg',1)"><img src="images/who.jpg" name="Image43" width="127" height="17" border="0" id="Image43" /></a></td>
<td width="16"><img src="images/div4.jpg" alt="" width="16" height="17" align="left" /></td>
<td colspan="3"><a href="consider.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image47','','images/consider_ro.jpg',1)"><img src="images/consider.jpg" name="Image47" width="195" height="17" border="0" id="Image47" /></a></td>
<td width="19"><img src="images/div5.jpg" width="19" height="17" alt="" /></td>
<td colspan="2"><a href="careers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image48','','images/careers_ro.jpg',1)"><img src="images/careers.jpg" name="Image48" width="188" height="17" border="0" id="Image48" /></a></td>
<td width="19"><img src="images/div6.jpg" width="19" height="17" alt="" /></td>
<td width="70"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image49','','images/contact_ro.jpg',1)"><img src="images/contact.jpg" name="Image49" width="70" height="17" border="0" id="Image49" /></a></td>
</tr>
<tr>
<td colspan="19" bgcolor="#6A791C"><img src="images/nav_bot.jpg" width="1000" height="42" alt="" /></td>
</tr>
<tr></tr>
<tr>
<td colspan="7"><div id=leftcontent>&nbsp;
<h4>Left Content</h4>
</div></td>
<td width="4">&nbsp;</td>
<div id=maincontent>
<td colspan="11"><h1>Main Content</h1></td>
</div>
</tr>
<tr>
<td><img src="images/spacer.gif" width="59" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="15" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="144" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="114" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td width="42"><img src="images/spacer.gif" width="42" height="1" alt="" /></td>
<td width="76"><img src="images/spacer.gif" width="76" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="16" height="1" alt="" /></td>
<td width="48"><img src="images/spacer.gif" width="48" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="139" height="1" alt="" /></td>
<td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td width="115"><img src="images/spacer.gif" width="115" height="1" alt="" /></td>
<td width="73"><img src="images/spacer.gif" width="73" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="70" height="1" alt="" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="110" bgcolor="#869343">&nbsp;</td>
<td height="110" bgcolor="#6A791C">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</tr>
</div>
<div id= "footer">

<td width="100%" height="79" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<td width="0%" bgcolor="#859242">&nbsp;</td>
<td width="1000" bgcolor="#697819"><img src="images/footer.jpg" alt="" height="79" /></td>
<td width="26%" bgcolor="#697819">&nbsp;</td>
</tr></table>
</div></tr></tr></body>
</html>


and my css

p { color: #6a6a6a; font-size: 15px; line-height: 20px; font-family: georgia, "Lucida Grande", Verdana, Arial ; top: 0; margin-top: 0; }
h1 { color: #667824; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; }
h4 { color: #4d4f53; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; }
h2 { color: #667824; font-size: 20px; font-family: Arial, Verdana }
h3 { color: #fff; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; }
ul { color: #667824; font-weight: bold; font-size: 12px; font-family: verdana, Arial ; line-height: 14px; }
h5 { color: #4d4f53; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; }
A:link {text-decoration: none; color: 667824}
A:visited {text-decoration: none; color: B71234}
A:active {text-decoration: none}
A:hover {
color: B7CEC4;
text-decoration: none;
}


html, body {
margin:0;
height: 100%;
width: 100%
}

body >#container {
margin:0;
padding:0;
height:auto;
min-height:100%;
position:relative;

}


#clearfooter {overflow:auto;
padding-bottom: 79px;}


#maincontent {
float:left;
min-width: 100px;
}

#leftcontent {
min-width: 50px;
}
#left{
left: -1;
right: 0;
min-width: 100px;
max-width: 200px;
min-height: 235px;
}

#centerleft{
left: -1;
right: 0;
min-width: 172px;
max-width: 200px;
min-height:100px;
}

#right {
position:relative;/*ie needs this to show float */
min-width:1px;
max-width:200px;
float:right;
}
#footer {
width:100%;
text-align:center;
position:relative;
margin:0;
height:79px;
clear:both;

}
#navigation {
max-width: 1000px;
vertical-align; top;
text-align: left;
}


table {
border-collapse: collapse;
}




please help.

Ok so here I am yet again with another mess on my hands. I know tables are tales of yore so I have recently dived into the world of divs. Well now I find myself with a coding issue that I could easily achieve with a table no problem.

If I was using a table I could set a BG image and then I could put text over the image or another transparent image over that. I am wanting to achieve the same effect but with divs. If I am not mistaken all I have to do is create a div and float another div on top of that div however this I am finding is not as easy for the CSS beginner. Mind you I am not new to programming. So how is it done?

here is a link to the site I am working on DeeJayOctane I am wanting to put text on top of the image in the nav div. But yet again this alludes me for some odd reason.

Any help would be appreciated! Thanks

Hi,

Background: I have a small page that need to be embeded into a bounch of other html pages.

Help needed:
1. Please provide the html chunk that I can use to embed the small page in to other html pages.
2. Is there a way of not using iframe? Can I use <Object> or <embed>? How?
---------------------------
mba colleges in london
hospitality management diploma

Some mouses today have horizontal scroll, some call the tilt.
It looks something like:
http://www.htmlforums.com/attachment...1&d=1242556560

I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward)

How do I code like that? Or any examples?