CSS flow error

benjaminmartin

hey all,
After many many many hours of trying to get this to work i am at my wits end. Have had a few people try to help but nothing seems to solve the problem. Basically the site works fine in IE but in Firefox or Opera the content div is not being stretched down when i add in content to the main div.

Here is the code

Expand|Select|Wrap|Line Numbers

  
<style type="text/css">

body

{

padding:0px;

margin:0px;

font-size: 12px;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

color: #3f3f3f;

}
 
p

{

font-size: 12px;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

text-align: left;

margin-left: 15px;

margin-right: 15px;

} 
 
H2{

font-size: 10pt;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

color: #3f3f3f;

padding-left: 10px;

}
 
H1{

font-size: 12pt;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

color: #3f3f3f;

padding-left: 10px;

}
 
#wrapper

{

width:750px;

/*removed for testing */

margin:0 auto 0 auto;

position:relative;
 
background-color:#333333;
 
/*added for testing

height:100%; */

}
 
#inside_wrapper

{

width:700px;

background-color:#DEDEDE;

/*height:100%;*/

margin:0 25px 0 25px;

}
 
#header

{

top:0px;

left:0px;

height:300px;

background-image:  url(/Header.jpg);
 
}
 
#main_menu

{ 

background-color:red;

height: 25px;

width:700px;

}
 
#content

{ 

width:700px;

background-color:#DEDEDE;

position:relative;

}
 
#main

{

top:25px;

right:0px;

width:500px;

background-color:#DEDEDE;

float:right;
 
}
 
#left_column

{

top:25px;

width:200px;

float:left;

background-color:#DEDEDE;

/*height:700px;*/

}
 
#linkList

{

top: 0px;

padding-left: 10px;

color: #3f3f3f;

float:left;

width: 197px;

}
 
#footer

{

display: block; 

text-align: center;

font-size: 10px;

background: #333333; 

}
 
li a

{

color:#CCCCCC;

display: block;

font-weight: bold;

font-size: 12px;

text-transform: none;

padding: 2px 0 3px 0;

}
 
li a.c

{

font-size:12px;

font-weight: normal;

display: inline;

padding: 0;

text-transform: uppercase;

}
 
ul,li

{

list-style: none;

padding: 0;

margin: 0;

}
 
li

{

color:#CCCCCC;

background: #3f3f3f;

padding: 5px 7px;

border-bottom: 1px solid #dedede; 

text-transform: uppercase; 

font-size: 9px;

}
 
li:hover

{

background: #7D7D7D; 

} 

</style>

</head>
 
<body>

<!--start wrapper-->

<div id="wrapper">
 
<!--start inside_wrapper-->

<div id="inside_wrapper">
 
<!--start header-->

<div id="header">
 
<!--end header-->

</div>
 
<!--start mainmenu-->

<div id="main_menu">

<h2><a href=>Homepage</a>&gt;</h2>

<!--end mainmenu-->

</div>
 
<!--start content-->

<div id="content">
 
<!--start left_column-->

<div id="left_column">

<!--start linkList-->

<div id="linkList">

<ul>

<li><a href=>Home</a> </li>

<li><a href=>Wombat</a></li>

<li><a href=>Numbat</a></li>

<li><a href=>Koala</a></li>

<li><a href=>Kangaroo</a></li> 

</ul>

<!--end linkList-->

</div>

<!--end left_column-->

</div>
 
<!--start main-->

<div id="main">
 
<H1>    HOMEPAGE </H1>

<p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia.  Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>

<p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia.  Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>

<br>

</br>

<img src="/KANGA1.jpg" width="342" height="500" />

<!--end main-->

</div>

<!--end inside_wrapper-->

</div>

<!--end wrapper-->

</div>
 
<div id="footer">

footer...

</div>
 
</body>
 
</html>

Any solutions would be very helpful as i am completely stuck !

Thanks

Ben

benjaminmartin

Please ignore the code above as it wasn't the right version

here is the code:

Expand|Select|Wrap|Line Numbers

  
<!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>Australian Animals</title>
 
<style type="text/css">

body

{

padding:0px;

margin:0px;

font-size: 12px;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

color: #3f3f3f;

}
 
p

{

font-size: 12px;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

text-align: left;

margin-left: 15px;

margin-right: 15px;

} 
 
H2{

font-size: 10pt;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

color: #3f3f3f;

padding-left: 10px;

}
 
H1{

font-size: 12pt;

font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;

color: #3f3f3f;

padding-left: 10px;

}
 
#wrapper

{

width:750px;

/*removed for testing */

margin:0 auto 0 auto;
 
background-color:#333333;
 
/*added for testing */

height:100%;

}
 
#notepad

{

width:700px;

background-color:#DEDEDE;

height:100%;

margin:0 25px 0 25px;

position:relative;

}
 
#header

{

height:300px;

background-image:  url(file:///N|/Ben%27s%20stuff/Header.jpg);
 
}
 
#main_menu

{ 

background-color:#DEDEDE;

height: 25px;

}
 
#content

{ 

background-color:#DEDEDE;

position:relative;

}
 
#main

{

background-color:#DEDEDE;

float:right;
 
}
 
#left_column

{

width:200px;

float:left;

background-color:#DEDEDE;

}
 
#linkList

{

top: 0px;

padding-left: 10px;

color: #3f3f3f;

float:left;

width: 197px;

}
 
#footer

{

display: block; 

text-align: center;

font-size: 10px;

background: #333333; 

}
 
li a

{

color:#CCCCCC;

display: block;

font-weight: bold;

font-size: 12px;

text-transform: none;

padding: 2px 0 3px 0;

}
 
li a.c

{

font-size:12px;

font-weight: normal;

display: inline;

padding: 0;

text-transform: uppercase;

}
 
ul,li

{

list-style: none;

padding: 0;

margin: 0;

}
 
li

{

color:#CCCCCC;

background: #3f3f3f;

padding: 5px 7px;

border-bottom: 1px solid #dedede; 

text-transform: uppercase; 

font-size: 9px;

}
 
li:hover

{

background: #7D7D7D; 

} 

</style>

</head>
 
<body>

<div id="wrapper">

<div id="notepad">

<div id="header">

</div>
 
<div id="main_menu">

<h2><a href=>Homepage</a>&gt;</h2>

</div>
 
<div id="content">

<div id="left_column">

<div id="linkList">

<ul>

<li><a href=>Home</a> </li>

<li><a href=>Wombat</a></li>

<li><a href=>Numbat</a></li>

<li><a href=>Koala</a></li>

<li><a href=>Kangaroo</a></li> 

</ul>

</div>

</div>

<div id="main">
 
<H1>    HOMEPAGE </H1>

<p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia.  Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>
 
<br>

</br>

<img src="file:///I|/Documents%20and%20Settings/Ben/My%20Documents/1Assignment%204/KANGA1.jpg" width="342" height="500" />

</div>

</div>

</div>

<div id="footer">

footer...

</div>

</div>

</body>
 
</html>

drhowarddrfine

As usual, the problem is IE and I am seeing this problem brought up constantly. This is a IE bug. Divs are NOT to expand to enclose floated elements. Firefox and Opera are performing correctly. If you want the div to expand, then you must add overflow:auto; to your #notepad div.

I need to warn you about using upper-case in your code. Case matters in xhtml and css.

CSS flow error

Post your reply

Similar topics