Resizing page causes floated div to move (Firefox) [Archive]

Click to See Complete Forum and Search --> : Resizing page causes floated div to move (Firefox)

LizzyB

11-04-2007, 10:07 AM

Hi,

I have a two column site with a header and footer.
The 2 columns are floated and I want the left to be a fixed size as it will have a flash module in it. the right column I want to be fluid and resize to fit the page.
The problem is that when resizing in Firefox the right column drops under the left.

I have tried setting a min and max width on both the containing box of the 2 columns and also on the right column. Its working fine in IE7.

Any ideas please?

Thanks
Liz

HTML
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
</ul>
</div>

<div id="content">

<div id="flash">This box will hold the flash
</div> 

<div id="main">
<p>Magic is the perfect icebreaker, and is enjoyed by people of all ages. David's act will give your guests a truly unique experience, ensuring your event will stand out and be talked about for a long time after.</p>

<p>Watch as coins burst into flames, cards float in the air, bank notes magically print, and minds are read under impossible conditions.</p>

<p>For any information with regards to a potential booking, please don't hesitate to get in touch.</p>
</div> 

</div>

<div id="footer">

</div>

CSS

/*layout*/

html, body{
margin:0px;
padding:0px;
}

#nav{
background-color:#EBEBEB;
height:80px;
min-width:850px;
}

#nav ul{
margin: 0px 0px 0px 80px; /*cant just set margin left property as it adds in other margins*/
padding-top: 50px;
list-style: none;
}

#nav ul li {
display: inline;
}

#nav a {
float: left;
color:#595959;
padding:0px 40px;
border-right: 1px solid #595959;
letter-spacing:1px;
text-decoration:none
}

#nav a:hover {
text-decoration:underline;
}

#content{
height:300px;
min-width:800px;
max-width:1000px;
padding:10px 25px;
}

#main{
float:left;
min-width:450px;
max-width:650px;
padding:10px;
border:1px solid #ebebeb;
}

#flash{
float:left;
width: 300px;
height:300px;
margin-left:25px;
border:1px solid #000000;
}

#footer{
background-color:#EBEBEB;
height:80px;
min-width:850px;
}

/* TEXTS */

body, th, td, input, textarea, select {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #595959;
}

p, blockquote, ul, ol, dl {
margin-top: 0px;
text-align: justify;
}

/** LINKS */

a {
color: #000000;
}

a:hover {
text-decoration: none;
}
or view the page here:
http://www.whizzliz.co.uk/DavidAbel/index.php

WebJoel

11-04-2007, 01:44 PM

Remove the floats and use margins.<!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>David Abel - Close Up Magic</title>

<base href="http://www.whizzliz.co.uk/DavidAbel/" />

<style type="text/css">
/*layout*/

* {margin:0; padding:0;}/* Removes margin & padding from EVERYTHING */

#content {min-height:100%;} /* 100% height for compliants, enwraps content*/
* html #content {height:100%;}/* and feed IE what it needs */

#nav {/*cant just set margin left property as it adds in other margins*/
background-color:#EBEBEB; height:80px;
padding:50px 0 0 30px; list-style-type: none;}

#nav li {display: inline; white-space:nowrap;}

#nav a {color:#595959;padding:0px 40px;border-right: 1px solid #595959;
letter-spacing:1px; text-decoration:none}

#nav a:hover {text-decoration:underline; }

#content{position:relative; height:100%; width:100%; margin-bottom:30px; overflow:hidden;}

#main{border:1px solid #ebebeb; padding:30px 25px 30px;}

#flash{float:left; width:300px; margin:20px; height:300px;border:1px solid #000;}

#footer{background-color:#EBEBEB;height:80px;}

/* TEXTS */
body, th, td, input, textarea, select {font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color: #595959;}

p, blockquote, ul, ol, dl {text-align: justify;}

/** LINKS */
a {color: #000;}

a:hover {text-decoration: none;}

</style>

</head>
<body>

<div id="content">
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
</ul>

<div id="flash">This box will hold the flash
</div> 

<div id="main">
<p>Magic is the perfect icebreaker, and is enjoyed by people of all ages. David's act will give your guests a truly unique experience, ensuring your event will stand out and be talked about for a long time after.</p>

<p>Watch as coins burst into flames, cards float in the air, bank notes magically print, and minds are read under impossible conditions.</p>

<p>For any information with regards to a potential booking, please don't hesitate to get in touch.</p>
</div> 

</div>

<div id="footer">

</div>

</body>
</html> Here, we get by without any "min-width" or "max-width", and this looks the same for IE6 and Fx 2.0.0.9. Validates with TIDY.
:)

Note: try to write  with the whitespace after "". Writing like "" can cause a problem in Firefox and under certain conditions, even though the text in invisible, it can be be revealed if you 'click-hold-and-drag' your pointer-tool over the visible page. And, although invisible, it 'occupies space', causing mysterious 'margin space' between elements. Rare, -but I have seen this happen. (May have been a bug in Firefox... ver. 2.0.0.8 had 'some issues' that were corrected in the newest release of 2.0.0.9). :)

LizzyB

11-04-2007, 02:30 PM

WebJoel

11-04-2007, 06:07 PM

Hi WebJoel,

Thats great - thank you!

I had no idea about the comments problem either.

Just some quick questions if you dont mind as you obviously know your stuff.

Do you think its better to put the margin and padding setting to 0 on * or on body? I have seen it done both ways.

Also - why do you set a content min-height of 100%? Is this to make it expand to fit the text?

Thanks
Liz
body, html {margin:0: padding:0;}

removes margins and padding from BODY and HTML -only. The "universal selector" method ( * {margin:0: padding:0;} ) removes margins and padding from everything... body, html, div, table, form, p, h1-h6, object, frame, -everything. Every browser has a different idea how much 'margin' and how much 'padding' an element should have. 'Zero-ing' these ALL out and re-setting them to a default ensures that EVERY browser reads the SAME amount.

Yes, -I have seen "margin:0; padding:0" also used on BODY, used on BODY, HTML too. If that is the offending element in an already-created page and this cures the stated complaint, it is fine. If using "universal selector" wrecks existing padding and margins, better to leave it for BODY, HTML.
If you start a new build, better to zero-out all margins and all paddings.
If you always start your CSS with * {margin:0: padding:0;}, you will FAR fewer problems with cross-browser issues later on. I never build a page without the "universal selector method".

IE prior to IE7, InternetExploder does not understand "min-height/max-height" or "min-width/max-width". It treats it as "height" and "width" respectively. This is a big problem if the browser (again, IE) thinks that the (maximum)height can only be the height of the visitor's browser on first load, instead of the actual full height based on it's content. So we 'trick' IE into treating "min-height" is the same as "height".
So we "hack" IE:

#content {min-height:100%;} /* 100% height for compliant browsers (Firefox, Mozilla, Opera, Netscape, Konqueror, Seamonkey, etc etc etc), enwraps content*/
* html #content {height:100%;}/* and feed IE what it needs */

The " * html #content ~...." (not a 'universal selector', but instead, an 'IE hack') 'tricks' IE into playing fair. The "parent element" of HTML is made "100% height" in IE's eyes, which allows us to make the child element (in this case, "#content") also be "100% height". Without this (I think it's called the "star hack for IE"), "#content" will only be 100% of your screen height when the page first loads. -A problem if your screen-height is 800px and your content is more than >800px tall (more than one screen-height)...

I know, -it sounds complicated. I hope that I have explained it correctly. In short, -get a working template (or three!) that work on all-browsers, SAVE it and use it as seed for every page-build. -Saves much headaches.
I'm sure that this template isn't perfect but today it seems to have solved the problem and works in both IE6 and Fx2.0.0.9.
...The more you work with IE, the more you'll come to loathe the way it makes you have to work. :(

LizzyB

11-05-2007, 10:14 AM

Hi again,

Thats really helpful. Thanks very much for your time and effort.

Liz