By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Div Issues in FireFox

P: 27
I have a page with the following code:
[HTML]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" rel="stylesheet" href="styles/default.css" media="screen" />

<title>Untitled Document</title>

</head>

<body>

<div id="header">

<p>&nbsp;</p>

<ul id="nav">

</ul>


</div><!--/header -->

<div id="content-wrap">

<div id="bottom-background">

<div id="content">

<div class="post">

<h2>content - post</h2>

<p>Lorem ipsum </p>

</div><!--/post -->

<div class="post">

<h2>content - post</h2>

<p>Lorem ipsum </p>

</div><!--/post -->

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

<div id="sidebar">

<br />
<br />

<ul id="project_accordian">

<li>
<ul class="project_nav">
<li class="project"><h4>project 1</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>

<li>
<ul class="project_nav">
<li class="project"><h4>project 2</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>

</li>

<li>
<ul class="project_nav">
<li class="project"><h4>project 3</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>

</li>

<li>
<ul class="project_nav">
<li class="project"><h4>project 4</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>

</li>

</ul><!--/project_accordian -->

</div><!--/sidebar -->

</div> <!--/bottom-background -->

</div>
<!--/content-wrap -->

<div id="footer">

<div id="footer-wrap">

<div id="footer-col1">

<h3>footer-col1</h3>

<p>Lorem ipsum </p>

</div><!--/footer-col1 -->

<div id="footer-col2">

<h3>footer-col2</h3>

<p>Lorem ipsum .</p>

</div><!--/footer-col2 -->

<div id="footer-col3">

<h3>footer-col3</h3>

<p>Lorem ipsum </p>

</div><!--/footer-col3 -->

</div>
<!--/footer-wrap -->

</div>
<!--/footer -->

</body>

</html>[/HTML]

here is the css:

/*--------------------------------------------------------------------------------*/

* {padding: 0; margin: 0;}

body {
font: 75%/160% Arial, Helvetica, sans-serif;
background-color:#3E4B3E;
background-image:url(../images/backgroundCircles.gif);
background-position: top center;
background-repeat:no-repeat;
}

/*--------------------------------------------------------------------------------*/

#header {
height: 440px;
width: 960px;
margin: 0 auto;
position: relative;
}


#header h1 {
position:absolute;
left: 444px;
top: 22px;
width:330px;
height:133px;
line-height:25px;
}


/* content wrap
---------------------------------------------------------------------------------*/
#content-wrap {
width: 960px;
margin: 0 auto;
background-image:url(../images/middle-repeat.gif);
background-position: top left;
background-repeat:repeat-y;
position:relative;
}

#content {
width: 500px;
float: left;
padding: 35px 0 20px 94px;
z-index: 5;
position:relative;
}
#bottom-bg {

}

/* post
---------------------------------------------------------------------------------*/
.post {
width: 490px;
}

.post p{
padding-top:10px;
}

.post h2 {
height:38px;
line-height:38px;
padding-left:50px;
color:#D1D4BC;
font-size:20px;
background-image:url(../images/header-bg.jpg);
background-position:top left;
background-repeat:no-repeat;
}

/* sidebar
---------------------------------------------------------------------------------*/
#sidebar {
width: 267px;
float:right;
z-index: 5;
overflow: hidden;
position:relative;
top: 0px;
right:80px;
}

.project_nav, .project_nav_content {
padding: 0;
margin: 0 0 5px 0;
}
/* footer
---------------------------------------------------------------------------------*/
#footer {
clear: both;
}

#footer-wrap {
width: 960px;
height: 400px;
margin: 0 auto;
background-image:url(../images/footer-main-bg.gif);
background-position:top left;
background-repeat:no-repeat;
}


#footer-wrap p{
padding-top:10px;
}

/* footer-col1 */
#footer-col1 {
width: 240px;
float: left;
padding: 23px 5px 0 108px;
}

/* footer-col2 */
#footer-col2 {
width: 240px;
float: left;
padding: 23px 5px 0 0;
}

/* footer-col3 */
#footer-col3 {
width: 240px;
float: left;
padding-top: 23px;
}



This is I am having is that the bg image for the content-wrap div is not show correctly. It seems the content-wrap div is not straching in relation to the divs within it.

Any Ideas?
Feb 4 '08 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
Firefox is performing correctly. Parent elements are never to expand to contain floated elements. You are probably seeing IE expand but this is an IE bug and another reason to never use IE as a reference for how things work.

To get proper, modern browsers to do what you want, add 'overflow:auto' to the containing element.
Feb 4 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.