|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
July 27th, 2006, 01:08 AM
|
|||
|
|||
Newbie need help on CSSP floats problem
hello guys!
im new to CSS positioning and i would like to ask for guidance about my test layout using floats. i have a some divs that is inside my #container div. but my problem is, it displays ok in IE but not in mozilla or opera  here's my layout that i want to achieve,Code:
|-----Container------| ||------------------|| || Header || ||------------------|| ||left | right || || | || || | || || | || || | || || | || ||------------------|| || Footer || ||------------------|| |--------------------| and here's my code Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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" />
<style type="text/css">
*{
border:0px;
padding:0px;
margin:0px;
}
body{
font-family:"Trebuchet MS", Arial, sans-serif; font-size:12px; font-weight:bold;
}
#Container{
width:720px;
padding:10px;
border:1px black solid;
margin:0 auto;
background:#CCC;
}
#Header{
width:700px;
padding:0px 9px;
height:99px;
border:1px black solid;
margin:0 auto;
background:#FFF;
}
#leftFloat{
float:left;
width:500px;
padding: 0px 9px;
border:1px black solid;
background:#EEE;
}
#rightFloat{
float:right;
width:180px;
padding: 0px 9px;
border:1px black solid;
background:#DDD;
}
#footerFloat{
float:left;
clear:both;
width:700px;
padding: 0px 9px;
border:1px black solid;
background:#777;
}
</style>
<title>Test Float</title>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>Header</h1>
</div>
<div id="leftFloat" >
leftfloat<br />leftfloat<br />leftfloat<br />leftfloat<br />leftfloat<br />
</div>
<div id="rightFloat">
rightfloat<br />rightfloat<br />rightfloat<br />rightfloat<br />rightfloat<br />
</div>
<div id="footerFloat" >
footerfloat footerfloat<br />footerfloat footerfloat footerfloat
</div>
</div>
</body>
</html>
i hope that you can help me with my problem im totally newbie in CSS... wah!
|
|
#2
July 27th, 2006, 02:06 AM
|
|||
|
|||
|
i solved my problem by using overflow:hidden in my container div but my new problem is when i fill my leftFloat with a lot of break tags <br /> my rightfloat div does not expand down to my footer. also, in firefox, my rightfloat is pushed down at the bottom!
how can i align both my left and right floats together? how can i also solve my firefox bug? i hope that you can help me with my problem guys
|
|
#3
July 27th, 2006, 08:27 AM
|
||||
|
||||
|
Get it working in Mozilla first, you can always go back and fix it for IE...not the other way around.
Try removing all padding from your container and floats...then re-adjust your width to and padding until it fits in Mozilla. Then, go back and use IE Conditional Comments to fix it for IE.
__________________
ShepherdWeb :: Charging Rhino Wizard I know of no more encouraging fact than the unquestionable ability of man to elevate his life by conscious endeavor. {Henry David Thoreau} § shepherdweb.com § fariswheel productions § reagan administration
|
|
#4
July 27th, 2006, 10:57 PM
|
|||
|
|||
|
great advice banker!
 i did first work my page on mozilla and i also removed all the padding and borders in my div. but i have another problem that i want to resolve. 1.) how can i achieve same height in my leftfloat and rightfloat? once my leftfloat is long... how can i make my rightfloat long to make it align with my layout? 2.) how can i also put my footer always at the bottom of my page if my leftfloat and rightfloat is short? here's my layout looks like after revision Code:
|-----Container------| ||------------------|| || Header || ||------------------|| ||left | right || || | || || |-------|| || |///////|| || |///////|| || | right || || |/float/|| || |//is///|| || |/short/|| || |///////|| || |///////|| ||------------------|| || Footer || ||should always here|| ||------------------|| |--------------------| and also, here's my revised code Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{
border:0px;
padding:0px;
margin:0px;
}
body{
font-family:"Trebuchet MS", Arial, sans-serif; font-size:12px; font-weight:bold;
}
#Container{
width:740px;
border:1px black solid;
margin:0 auto;
background:#CCC;
overflow: hidden;
}
#Header{
width:740px;
margin:0 auto;
background:#FFF;
height:100px;
}
#leftFloat{
float:left;
width:520px;
background:#EEE;
}
#rightFloat{
float:right;
width:220px;
background:#DDD;
clear:right;
}
#Footer{
float:left;
clear:both;
width:740px;
height:50px;
background:#777;
}
</style>
<title>Test Float</title>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>Header</h1>
</div>
<div id="leftFloat" >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="rightFloat">
rightfloat<br />rightfloat<br />rightfloat<br />rightfloat<br />rightfloat<br />
</div>
<div id="Footer" >
footerfloat footerfloat footerfloat footerfloat footerfloat
</div>
</div>
</body>
</html>
i'm so frustrated about my layout simple as it looks but its so cumbersome to do. 
|
|
#5
July 28th, 2006, 08:02 AM
|
||||
|
||||
|
This is a classic problem with floats. I've solved this problem two ways:
|
|
| Viewing: ASP Free Forums > Web Design > Web Layout > Newbie need help on CSSP floats problem |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
