Equal div heights

Hello good people!
Need a little bit newbie type help for working on CSS.
Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META content="text/html; charset=windows-1257" http-equiv="Content-Type">
<TITLE>
</TITLE>
<STYLE type="text/css">
body {
background-color:#FFFFFF;
margin-top:50px;
#container {
width: 750px;
margin: 0px auto 0px auto;
#header {
background:#CCCCCC;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
#left {
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:130px;
padding:10px;
float:left;
height:auto;
#center{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:430px;
padding:10px;
float:left;
#right{
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:130px;
padding:10px;
float:right;
#footer{
background:#CCCCCC;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
clear:both;
</STYLE>
</HEAD>
<BODY>
<div id="container">
<div id="header">This is header.</div>
<div id="left">Some text on left. It's good to see it.</div>
<div id="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent massa massa, mattis eget rhoncus ut, egestas eget orci. Fusce hendrerit tempor nibh quis gravida. Donec vehicula est tristique massa facilisis nec tempus augue porttitor. Aliquam erat volutpat. Nulla pellentesque, nibh vel auctor ultrices, tellus eros gravida tellus, vehicula volutpat odio dui vel tortor. Cras semper risus in felis rhoncus adipiscing. Vivamus feugiat facilisis varius. Pellentesque venenatis lectus sem, tincidunt placerat mi. Aliquam interdum ultrices dui. Nam vitae ante et massa lobortis facilisis sed id libero. Aenean ac porta lectus. Donec euismod condimentum quam eu viverra. Sed consequat massa vel elit condimentum eleifend nec at nunc. Donec lacus velit, euismod quis elementum vel, tempor tincidunt mi. Pellentesque odio nunc, tempor dapibus.</div>
<div id="right">It is the right column.</div>
<div id="footer">This is some piece of text in the footer.</div>
</div>
</BODY>
</HTML>
And the question is:
The problem is, that I can not make #left and #right to be set to the same height as the #center div. Please help.
Thank you.
Mykolas

Equal height CSS columns are challenging because divisions do not speak to each other. Their height is determined by content and can vary from page to page and by end-user's browser settings.
You have three options:
1) Start your project with a special template that provides for equal height CSS columns:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
2) Fake it with a 2 or 3-toned background image that repeats vertically down the page. This method is called Faux Columns.
http://alt-web.com/TEMPLATES/2-column-fixed-width-template.shtml
3) Use a Javascript.
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Equal column heights ?? Help!

I am trying to use example from projectseven:
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm.
It looks ok in firefox, but does not in IE . The left sidebar does
not equal maincontent div. Your help would be appreciated and if
you have a easy fix that would be great. Thanks. Den

Also, XHTML requires "onload" rather than onLoad.
Change this:
<body
onLoad="P7_equalCols2(1,'sidebar','P','maincontent','P')">
to this:
<body
onload="P7_equalCols2(1,'sidebar','P','maincontent','P')">
John
"carbiz" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to use example from projectseven:
>
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm.
It
> looks
> ok in firefox, but does not in IE . The left sidebar
does not equal
> maincontent
> div. Your help would be appreciated and if you have a
easy fix that would
> be
> great. Thanks. Den
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <title>PVII Equal Height Columns</title>
> <script type="text/javascript"
src="p7_eqCols2_10.js"></script>
> <style type="text/css" media="screen">
> 
> </style>
> 
> 
> </head>
> <body
onLoad="P7_equalCols2(1,'sidebar','P','maincontent','P')">
>
> <div id="wrapper">
>
> <h1>masthead</h1>
>
> <div id="maincontent">
> <h2>layout examples</h2>
> <p>A re-engineering of your current world view
will reaffirm your online
> presence enabling a more effervescent solution.
Upscaling voluminous
> networking
> exchange solutions will result in your achieving an
excellent systemic
> electronic data interchange synchronization, thereby
exploiting technical
> environments for mission critical broad-based
capacity-constrained
> systems.
> This will fundamentally cause a morphing into a well
designed and
> actionable
> information infrastructure whose semantic content is
downright null. To
> more
> fully clarify the current concept, a few aggregate
issues will require
> addressing to facilitate a distributed communication
venue. In integrating
> non-aligned structures into existing legacy systems, an
even more
> effervescent
> (bubbly) gateway blueprint in a backward compatible
package of tangible
> and
> immeasurable strategic value will result in right-sizing
the conceptual
> frameworks, but only when thinking outside the box. This
being said, the
> ownership issues inherent in dominant thematic
implementations cannot be
> understated vis-a vis David Bowie, for
instance.</p>
> <h3>additional content</h3>
> <p>A re-engineering of your current world view
will reaffirm your online
> presence enabling a more effervescent solution.
Upscaling voluminous
> networking
> exchange solutions will result in your achieving an
excellent systemic
> electronic data interchange synchronization, thereby
exploiting technical
> environments for mission critical broad-based
capacity-constrained
> systems.
> This will fundamentally cause a morphing into a well
designed and
> actionable
> information infrastructure whose semantic content is
downright null. To
> more
> fully clarify the current concept, a few aggregate
issues will require
> addressing to facilitate a distributed communication
venue. In integrating
> non-aligned structures into existing legacy systems, an
even more
> effervescent
> (bubbly) gateway blueprint in a backward compatible
package of tangible
> and
> immeasurable strategic value will result in right-sizing
the conceptual
> frameworks, but only when thinking outside the box. This
being said, the
> ownership issues inherent in dominant thematic
implementations cannot be
> understated vis-a vis David Bowie, for
instance.</p>
> <p>A re-engineering of your current world view
will reaffirm your online
> presence enabling a more effervescent solution.
Upscaling voluminous
> networking
> exchange solutions will result in your achieving an
excellent systemic
> electronic data interchange synchronization, thereby
exploiting technical
> environments for mission critical broad-based
capacity-constrained
> systems.
> This will fundamentally cause a morphing into a well
designed and
> actionable
> information infrastructure whose semantic content is
downright null. To
> more
> fully clarify the current concept, a few aggregate
issues will require
> addressing to facilitate a distributed communication
venue. In integrating
> non-aligned structures into existing legacy systems, an
even more
> effervescent
> (bubbly) gateway blueprint in a backward compatible
package of tangible
> and
> immeasurable strategic value will result in right-sizing
the conceptual
> frameworks, but only when thinking outside the box. This
being said, the
> ownership issues inherent in dominant thematic
implementations cannot be
> understated vis-a vis David Bowie, for
instance.</p>
> </div>
>
> <div class="columns" id="sidebar">
> <ul id="navbar">
> <li><a href="col2fixed.htm"
id="uberlink">2-col fixed</a></li>
> <li><a href="col4fixed.htm">4-col
fixed</a> </li>
> <li><a href="col2fluid.htm">2-col
fluid</a></li>
> <li><a href="col3fluid.htm">3-col
fluid</a></li>
> <li><a href="index.htm">Return to
Article</a></li>
> </ul>
> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam
> nonummy
> nibh euismod tincidunt ut PVII excelsior magna aliquam
erat very cool. Ut
> wisi
> enim ad minim veniam, quis nostrud exerci tation
suscipit lobortis nisl ut
> aliquip ex ea commodo sound asleep.</p>
> <p> </p>
> </div>
>
> <div id="footer">
> <p>© Copyright information here
</p>
> </div>
>
>
> </div>
>
> </body>
> </html>
>

Dreamweaver adding div height in tooltip?

I dont normally use dreamweaver, but I must for this project,
in dreamweaver for some bizarre reason the tooltip says height 50px
(54px) and has added 4pxs to an image in a div. Anyone know why? It
aligns in the browsers, IE 6, firefox, but why has dreamweaver
added these 4 pixels and given it a gap in dreamweaver?
Picture example:
http://homepage.ntlworld.com/spensley/dreamweaverbug.jpg
anyone know why and what this is all about?
The css:
#logo{
top: 30px;
width:126px;
height: 51px;
padding:0px;
float: left;
html:
<div id="logo"><a href="index.html"><img
src="media/images/gtfLogo.jpg" title="GTF logo" alt="GTF logo
design" longdesc="three circles showing the letters G, T and F in
orange and green" width="126"
height="51"/><a/></div>

Oops - sorry - missed the CSS.
You have a munged <a> tag -
orange and green" width="126" height="51"/><a/></
should be -
orange and green" width="126" height="51"/></a></
Does that solve the problem?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"spongebobcirclepants" <[email protected]>
wrote in message
news:[email protected]...
> <?xml version="1.0" encoding="utf-8"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
> <head>
> <title>GTF - Gardens, Tools &
Furniture</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <meta name="keywords"
>
content="tools,gardens,furniture,spades,water,toys,toy,gardening,uk,giant
>
toys,giant,lawnmowers,tool,diy,outdoor,outdoors,pool,shovels,hoses,hose,fish,aqu
> atics,benches,tables,chairs" />
> <meta name="description" content="GTF Company Site"
/>
> <meta name="author" content="Roy Spensley" />
>
> <link rel="stylesheet" type="text/css"
href="style/textformat.css"/>
> <link rel="stylesheet" type="text/css"
href="style/layout.css"
> title="default"
> />
>
> </head>
>
> <div id="wrapper">
>
> <div id="topSpace"></div>
> <div id="logo"><a href="index.html"><img
src="media/images/gtfLogo.jpg"
> title="GTF logo" alt="GTF logo design" longdesc="three
circles showing the
> letters G, T and F in orange and green" width="126"
> height="51"/><a/></div>
> <div id="logoRight"></div>
> </div>
> </body>
> </html>
>
>
> css
>
>
>
> /*BODY*/
>
> body{
>
> margin-top:0px;
>
> margin:0px;
>
> left:0px;
>
> padding:0px;
>
> font-family: arial, Helvetica, sans-serif;
>
> font-size: 100.1%;/*fixes bug in IE*/
>
> color:#333333;
>
> text-align: center;
>
> background-color: #666666;
>
> overflow: auto;
>
> }
>
> /*ALL IMAGES*/
>
> img{
>
> border-style: none;
>
> }
>
>
> /*CONTAINING WRAPPER*/
>
> #wrapper{
>
> width: 800px;
>
> margin-top: 0px;
>
> height: 597px;
>
> background-color: #000;
>
> margin: 0 auto; /*This will now centre in firefox as
well*/
>
> }
>
> #topSpace{
>
> width: 100%;
>
> height: 30px;
>
> padding:0px;
>
> background-color: #fff;
> }
>
> #logo{
>
> top: 30px;
>
> width:126px;
>
> height: 51px;
>
> padding:0px;
>
> float: left;
>
> }
>

Resizing div height using ExternalInterface makes window jump in safari

I only notice this problem in safari, no other browser.
My application loads in modules as it needs them and changes the height of the HTML div that contains the movie, I do this using ExternalInterface.call. (This is because scrolling in flex/flash is downright awful, I like the scrollbar in the browser to work).
However, If I load in a module and inside of that module I change the external interfaces height, I find that the flash movie seems to jump down then jump back up about 150-200 pixels.
I want the movie to just stay anchored to the top of the div, no matter what the size of the div is. How can I enforce that policy on the player?
I have tried align: "t" and salign: "t" in the movies params, but I'm not exactly sure what that did as it still jumped down.

hey, thanks for the direction. I'm guessing that when i styled the attribute, any existing css style for the object still overrid the attribute styling.
Here is a simple version of my solution:
<code>
function autoWide (myID, minWide) {
var targetA = document.getElementById(myID);
var currWidth = self.innerWidth;
if (currWidth < minWide) {
targetA.style.width = minWide;
else {
targetA.style.width = '100%';
</code>
If anyone else is interested the innerwidth method doesn't work in all browsers, here is a link to an explaination.
http://www.quirksmode.org/viewport/compatibility.html
thanks again.
G5 Mac OS X (10.4.6)

How do I get fluid div height as % of width?

This question follows on from a different discussion I had but is on a different issue so apologies for starting a new thread.
I have a responsive layout with a header div which is set as a percentage of the screen width.
I have a background which is set to fill as cover.
This works great, but I need to maintain a ratio of something like 7:1
So is there a way of setting an equation in the css so that the height of the div is determined as something like:
height:12% of width;
Thanks
Terry

Ah, you've found some interesting css there.
Here's something fairly similar without the :before selector ...
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Responsive Header</title>
<style>
#wrapper {
    position: relative;
    width: 100%;
#aspect {
    padding-top: 18%;
#header {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../img/refinery.jpg);
    background-size: 100% auto;
</style>
</head>
<body><div id="wrapper">
    <div id="aspect"></div>
    <div id="header">
        Your content here
    </div>
</div>
</body>
</html>

Reconciling Heights of Two Div Tags?

Hello everyone,
Okay so, I have two boxs with CSS styles. One is my side nav, floated to the left, clear:both (width:213) and postioned under a locked template div (with a set height and width),floated left. The other is the content div (width: 696), floated right. The content div grows as text is added and has no set height.
The problem is that I want the side nav div height to match the current height of the content div. Since they do not start at the same part of the page, I am having troubles reconciling the heights to match up evenly. Ideally, I would like the side nav div to grow as the content div does.
Any suggestions?

Nancy O. wrote:
Or you could use a script to force divisions to equal heights:
Good method, but if Javascript is turned off in a browser, it won't work... not too much of a drama I guess, probably only a small percentage of people have JS turned off, but something to be aware of.
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

DIV and Table Tag - height issue

Help. I'm using div tags to setup the structure for sections
of my Web page. But when it comes to populating these pages with
dynamically generated text, the height changes. Sure the table td
cell expands, but the div surrounding the table tags DOES NOT. Here
is the page where I am having the problem.
http://www.fuelcellmagazine.com/story2.cfm?id=17
Scroll down to the bottom of the page and you'll see the
table tag overflowing past the div tag settings.
Any suggestions?
D

That is quite a div soup you have there. Why so much absolute
positioning?
Two ticks of the enlarge text in FF and the page is
completely broken. Your
problem is not the div heights, it's the absolute
positioning.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"OnDemand Junkie" <[email protected]> wrote
in message
news:e246jj$1fb$[email protected]..
> Help. I'm using div tags to setup the structure for
sections of my Web
> page.
> But when it comes to populating these pages with
dynamically generated
> text,
> the height changes. Sure the table td cell expands, but
the div
> surrounding
> the table tags DOES NOT. Here is the page where I am
having the problem.
>
>
http://www.fuelcellmagazine.com/story2.cfm?id=17
>
> Scroll down to the bottom of the page and you'll see the
table tag
> overflowing
> past the div tag settings.
>
> Any suggestions?
>
> D
>

Stretching the width & height of a div in CSS

I have a page with a navigation bar div (at the top), and a
content div (everything underneath), and I would like the content
div to take up the rest of rest of the page.
Setting the the content div height & width to 100%
stretches the height too much, adding scroll bars. Do I have to
somehow subtract the height of the navigation bar div?
Anyone?

Anyone know what I am doing wrong?

CSS Equal Columns with a twist?

I need equal column heights for 2 DIVs, but here's the twist
- the
content in each must be bottom-aligned. All the hacks and JS
code I
found to make equal heights adds the extra space to the
bottom, meaning
content can't shift down to be bottom-aligned. Is this
possible (with
pure DIVs and no tables)?
Alec Fehl, MCSE, A+, ACE, ACI
Adobe Community Expert
AUTHOR:
Microsoft Office 2007 PowerPoint: Comprehensive Course
(Labyrinth
Publications)
Welcome to Web Design and HTML (Labyrinth Publications)
CO-AUTHOR:
Microsoft Office 2007: Essentials (Labyrinth Publications)
Computer Concepts and Vista (Labyrinth Publications)
Mike Meyers' A+ Guide to Managing and Troubleshooting PCs
(McGraw-Hill)
Internet Systems and Applications (EMC Paradigm)

Alec Fehl wrote:
> I need equal column heights for 2 DIVs, but here's the
twist - the
> content in each must be bottom-aligned. All the hacks
and JS code I
> found to make equal heights adds the extra space to the
bottom, meaning
> content can't shift down to be bottom-aligned. Is this
possible (with
> pure DIVs and no tables)?
>
>
Hummmm...... you may be able to use absolutely positioned
layers in
association with the Project Seven equal height javascript to
achieve
this...but it's a bit hit and miss I would say. Probably not
worth the
effort.
I don't particularly know of a bullet proof method unless the
content is
images in which case you can use background images.
Tables are king :)....in some instances.

How can i increase the stage height beyond 10000 px?

Im trying to build a long scrolling page and i need more than a 10000 px stage but edge only allows me a 10000px max height. How can i create a longer page and are their performance issues with a stage that size?

Here is the link to what i have so far. I was able to solve some problems along the road. I am dynamically placing individual pics next to each other in respond to windows resize. Main Div wraps all the images and its width is equal the sum of all widths. Stage width is 1024. My current problems are:
1 - Although I was able to activate the scroll bar, Swiping is not available on touch devices. I thought scroll bars automatically respond to user swipes
2 - I cant get rid of the vertical scroll bar. I tried to set the css value of overflowY: "hidden". It throws a syntax error when I type it as overflow-Y. I am interested to calculate the scroll height and correct my div-height though.
3 - In Firefox I get 2 vertical scroll bars
Field Recordings

Javascritp to determine div size?

Is it possible to use javascript to determine a div (or
table) height and width? For example I have layer 1 and layer 2, I
want to have layer 2 height to depend on layer 1's height.
Can it be done?

http://www.projectseven.com/
I believe that there is an equal column height extension
there.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"serg2049" <[email protected]> wrote in
message
news:fh1tur$tp$[email protected]..
> Is it possible to use javascript to determine a div (or
table) height and
> width? For example I have layer 1 and layer 2, I want to
have layer 2
> height to depend on layer 1's height.
>
> Can it be done?

Div moves down when window is resized

Hello,
Here's my problem: When I resize my browser window the main div is resized up until a certain point when it just falls below all of the other content.
How can I prevent this from happening? I have both the top and bottom div's set to auto width, so I can't figure out whats going wrong.
Here's the website if you want to see for yourself: www.hondovfd.org
Here's some code from my template file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
<meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
<link href="../stylesheet1.css" type="text/css" rel="stylesheet" />

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColLiqHdr">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<h3>Navigation : </h3>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="/index.php">Home</a></li>
<li><a href="/support.php">Support Hondo</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
    <ul>
      <li><a href="/people.php">Our People</a></li>
      <li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
      <li><a href="/medical.php">Medical</a></li>
      <li><a href="/apparatus.php">Apparatus</a></li>
      <li><a href="/training.php">Training</a></li>
      <li><a href="/volunteer.php">Volunteer</a></li>
      <li><a href="/statistics.php">Statistics</a></li>
      <li><a href="/patchtrading.php">Patch Trading</a></li>
    </ul>
</li>
<li><a href="/gallery2/main.php">Photo Gallery</a></li>
<li><a href="/calendar.php">Calendar</a></li>
<li><a href="/news.php">Blog/News</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/contact.php">Contact Us</a></li>
</ul>
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<span class="lefttext">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8567201">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
</img></input></input>
</span>
</form>
<span class="lefttext"><br />
</span>
<center>
<span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
</center>
</div>
<div id="sidebar2">
    <p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
    <a href="/membersonly/register.php">Register</a></p>
    <p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
    <p>Call Statistics as of:<br />
    <?php
$myFile = "/home/hondovf1/public_html/membersonly/month.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?><?php
$myFile = "/home/hondovf1/public_html/membersonly/date.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></p>
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
    <td width="60%">EMS Calls</td>
    <td width="40%"><?php
$myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
<tr>
    <td>Fire Calls</td>
    <td><?php
$myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
    <tr>
    <td>Other Calls</td>
    <td><?php
$myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
</table>
<hr />
     
    <div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
    var googleNumSearchResults = 5;
     var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
    customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
     
</div>

<div id="mainContent">
<div class="topleft"></div><div class="top"><div class="topright"></div></div>
<div class="wrap">

    <table width="95%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="47" class="h2">Header</td>
      </tr>
      <tr>
        <td>Text Goes Here!</td>
      </tr>
    </table>

</div><br class="clearfloat" />
<div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
</div>
</div>
</div>
     <br class="clearfloat" />
<div id="footer">
    <p align="center">© Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
</div>
</div>
<script type="text/javascript">

</script>
<?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
</body>
</html>
And here is my CSS file:
body {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     width: auto;
     color: #333333;
     margin-top: 0;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 0;
     padding-top: 0;
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 0;
     background-image: url(images/main-right.png);
     background-repeat: repeat-y;
.thrColLiqHdr #container {
     width: 95%; /* this overrides the text-align: center on the body element. */
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
     height: auto;
     background-image: url(/images/halftone1.png);
.thrColLiqHdr #header {
     padding: 0 10px;
     height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
     background-image: url(images/header.jpg);
     background-repeat: no-repeat;
     background-position:center;
     border-bottom-width: 5px;
     border-bottom-style: solid;
     border-bottom-color: #000;
.thrColLiqHdr #navbar {
     height:45px;
.thrColLiqHdr #header h1 {
     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
     padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.thrColLiqHdr #sidebar1 {
     float: left; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 15%; /* top and bottom padding create visual space within this div */
     height: 100%;
     padding-top: 15px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar2 {
     float: right; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 15%; /* top and bottom padding create visual space within this div */
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar3 {
     float: right; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 275px; /* top and bottom padding create visual space within this div */
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
     margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
     margin-right: 10px;
     text-align: center;
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.thrColLiqHdr #mainContent {
     margin-top: 10px;
     margin-bottom: 10px;
     float: left;
     width: 65%;
     background-image: url(images/main-right.png);
     background-repeat: repeat-y;
     background-position: right;
.h2 {
     color: #B4241B;
     font-size: 20px;
     letter-spacing: -2px;
     font-weight: 100;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     line-height: normal;
.thrColLiqHdr #footer {
     text-align: center;
     color: #666;
     font-size: 11px;
     padding: 10px;
     background: #f7f7f7;
     border-top: 1px solid #aaa;
     width: auto;
.thrColLiqHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
     float: left;
     margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
     clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.topleft {
     height:22px;
     width:19px;
     background-image:url(images/top-left.png);
     float: left;
.top {
     height:23px;
     background-image: url(images/top.png);
     background-repeat:repeat-x;
     width: auto;
.topright {
     height:22px;
     width:28px;
     background-image:url(images/top-right.png);
     float: right;
.textarea{
.wrap{
     text-align: justify;
     padding-right: 40px;
     padding-left: 40px;
     background-repeat: repeat-y;
     float:left;
     background-image: url(images/main-left.png);
     width: auto;
     clear: left;
.wrapright {
     width:4px;
     background-image:url(images/main-right.png);
     background-repeat: repeat-y;
     float: right;
.bottomleft {
     height:22px;
     width:19px;
     background-image:url(images/bottom-left.png);
     float: left;
     clear: left;
.bottom {
     height:23px;
     background-image: url(images/bottom.png);
     background-repeat:repeat-x;
     width: auto;
.bottomright {
     height:22px;
     width:27px;
     background-image:url(images/bottom-right.png);
     float: right;

That's one of the problems with liquid (%) based layouts. In your default.css file, replace the top 2o selector rules with the following:
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    margin:0;
    padding:0;
    background: url(images/main-right.png) repeat-y;
.thrColLiqHdr #container {
    width: 95%;
   min-width: 870px; /**keep page from collapsing**/
    margin:0 auto;
    background: url(/images/halftone1.png);
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

IE7 issue with Thumbnails div & Overflow

this has to do with layout of the the gallery page and an IE7
CSS issue.
I was playing with the Photo gallery demo and decided to
resize the thumbnails div to get different shape and found an issue
with IE7 and the overflow. if the tumbnail div height is set to say
100px, and set overflow:auto; it makes sense that the thumbnails in
the bottom 3 rows would not be visible unless you scrolled the div.
well it works fine in Firefox but IE draws thumbnails right
over the height boundry and on into the next div below. I thought
IE7 was supposed to fix the CSS hacks needed.
what is the hack to fix this?

It could be a function of how the script is written and
changes being
made at the object-level. Rather than set position to
relative, you
might try using the proprietary Microsoft zoom property to
give the
naughty container layout.
your-container {zoom: 1;}
If that doesn't work, then you can resort to position:
relative.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

How to increase height of the row in template in smartforms

dear friends,
i have developed a smartform with template. i have 7 no of paragraphs in that.
my problem is,
i want to give equal row heights for 3 paragraphs and different heights for other 4 paragraphs as per the text of those paragraphs depends
how can i do this
it s urgent. help me. (don't suggest me manual dragging)
regards
saathi

DEar Saathi,
1. In the left pane, When u db.click on the template,
in the right pane, a tab strip will be displayed, in that select the tab Template..
2. When u create each column, there try by giving LN instead of MM/CM/inches
after checking tel me if it works or not..
With Rgds,
S.Barani

CSS height property use in Fluid grid layout

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">


<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.css
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
          max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
          Dreamweaver Fluid Grid Properties
          dw-num-cols-mobile:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          10;
          dw-gutter-percentage:          25;
          Inspiration from "Responsive Web Design" by Ethan Marcotte
          http://www.alistapart.com/articles/responsive-web-design
          and Golden Grid System by Joni Korpi
          http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 85.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
          width: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/$min\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1),maxw:D.match(/$max\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advance

Height is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O.

Equal div heights

Similar Messages

Maybe you are looking for