HTML - Fluid Layouts

Recently one heck of a lot of stuff about why you should use tabless layouts, but I have yet to find any reason to use tabless layouts, apart from their fashionable and W3C say so.

However I have found several not to use them. Let me start with a plain simple myth about:

Tabless layouts are more browser compatibly.

Right? I frequently seen Mozilla Firefox, and IE process tabless layouts in quite different ways. Yet every time I have seen a table based layout, virtual browser has processed it exactly the same. The only exception I have seen is a percentage height on a table.

Conitinuing on:

Positioning

Also has anyone here found with nested div's, a reliable way of positioning a nested div and still keeping firmly fixed to the parent? Ok, you can use the absolute position and make sure the div is within the area of the parent, what happens if you move or resize the parent div? I have yet to find of way of making sure the child stay in a position relative to is parent, apart from not using positioing at all. If their is a way of reliably positioning a div relative to its parent, then I would be very glad to know.
Fixing a 'div' to another div.

Secondly, if you got a multiple column layout, without using JS, I yet to see a way of fixing two or more divs to together to make sure that they are always the same height.

With a table layout, you just had three columns in the table, and they will be fixed together, no faffing about

Overflowing Content.

Anyone here ever had a content div nested in a parent div, What happens when the content divs hot taller than the parent. In a very large number of setups, the contents of the content will flow straight out the parent. To sort the problem out you resize the parent.

With a table, whats in the table stays in the table. I have yet to see it happen any other way.


This is how things are my experience, I have yet to see any article that tells any way of doing that completely avoids all of these problems. If you know a way of avoiding these problems please, if not, and I ask the question, what is the practical point of tableless layouts?

Hi I want to give the visitors the option to view a layout of their choice when they enter my site can someone tell me how to do this please but instead of basically making 3 sites for 3 lots of HTML which is useless when i can do something simpler in just one go if this makes sense thanx

I want it to be like so:

first page visitors see will have previews of the layouts they click one then for the rest of the site that's there layout i dont want them to enter and be able to choose a different one while browsing the rest of the site with like a banner at the top of the page with the different layout options

I have made 3 layouts for 3 headers

Hello guys and girls!

I'm currently working on a Web Design assignment for College, and I'm having a hard time trying to find the second way of building a lay out using HTML. We have done the table way of doing it, and I have got that way down, but i can't find out the other way.

Could you guys maybe give me a little help, or at least a push in the right direction?

Thank you!

Hi

I hope someone can help me here, please view my site at www.sydneycivilcelebrant.com/divsite/index.html - when I zoom in or out using ie, the layout becomes all out of order, yet when I do it in firefox its fine.

viewing the site with chrome or safari doesnt work yet as im still trying to figure out the css for both sets of browsers, but any help you could afford would be greatly apreciated!

thanks

i recently learned html, still a n00b though, lol

i made a layout, which im proud of

but i wanna know how to make a layout changer, which i can pput as a topic and have links, when ppl click them, the layout changes, and u can always chnge it bak to the original or something else


mind helping me out?

Hello,

I am trying to get a fluid page design going, however it won't work I have a div called content set up, and I am trying to get it so that whatever the information amount it will conform to that size, because information gets populated into that div. How do i get this to happen?

here is the code that I have for the page.
Code:

#content { 
width : 880px;
color : #333;
background : #f6f6ea url(images/bbg.jpg);
margin : 0 0 0 0;
padding-top : 10px;
padding-left : 20px;
}

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.