Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 571
  • Last Modified:

CSS- Containg div not expanding to meet 'contained' div's size in firefox

PROBLEM: WRAPPING DIV NOT EXPANDING TO MEET THE SIZE OF THE CONTENT CONTAINED IN ANOTHER DIV WITHIN THE WRAPPER.

I am designing a website, pure CSS layout, which is giving me a little grief. Everything was working, or so i thought, until i added some more content to a page. I have a "gutter" wrapping div which was going to pad  out the contents inside and have a border around it. The contents were in another div inside the gutter. The idea was that the gutter would scroll to fit the size of the content, but it doesnt. If the content is bigger than the minimum height i set for the gutter, the gutter still stays the same size, the contents just get overlayed on top of it.

This is only happening in FIREFOX, IE7 is fine. Is there a way to fix this???

GUTTER CSS CODE:

#gutter2 {
margin:0px;
padding:10px;
border-left: 1px solid #000;
text-align:center;
background:white url(../Graphics/bgContent.png) no-repeat top left;
width:800px;
min-height:200px;
}

EXAMPLE OF HTML:
                                 <div id="gutter2">
                                    <ul id="contentLayout">
                                          <li class="header">HEADER HERE</li>
                                          <li class="main"> CONTENT HERE</li>
                                    </ul>
                           </div>

So in the example above, if i write lots of content into the "main" section of the UL with the id of "contentLayout", it will break the gutter2 box!

Any help would be greatly appreciated. Thanks

Phil
0
Artform04
Asked:
Artform04
  • 4
  • 2
  • 2
2 Solutions
 
VirusMinusCommented:
the shouldn't be the behavior.

could you post a sample page with the problem. using the code you've given seems to work fine in IE7 and FF.

see:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<style>
#gutter2 {
margin:0px;
padding:10px;
border-left: 1px solid #000;
text-align:center;
background:white url(../Graphics/bgContent.png) no-repeat top left;
width:800px;
min-height:200px;
}
</style>
</head>

<body>

<div id="gutter2">
                                    <ul id="contentLayout">
                                          <li class="header">HEADER HERE</li>
                                          <li class="main"> Put lots of content here ... </li>
                                    </ul>
                           </div>


</body>
</html>

0
 
Artform04Author Commented:
Can you access this site?
http://www.pm-websolutions.com/digiart2.html

This is the example of what I mean. It has the full css behind. If you want to see the css go to
http://www.pm-websolutions.com/Styles/default2.css

This will highlight the problem. As i said, its just firefox thats giving me the problem.

Thanks, Phil
0
 
Artform04Author Commented:
if you look at the site in IE7, thats what it should look like. I cant see why firefox doesnt like this....

The problem in FF is, as you can see, the border not extending down the content and also the background not extending. So it just appears to be something witht that gutter not extending, everything else seems fine?

Phil
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Eternal_StudentCommented:
Add this:

<br style="clear:both;" />
                           </div>      
<!-- END OF GUTTER2 -->
0
 
Eternal_StudentCommented:
You only need to add the <br style="clear:both" /> I just left the closing div tag and comment in so you could see where to add it.
0
 
Artform04Author Commented:
That works great, thanks, but why exactly does this fix it?? Did it just need another HTML tag to make it realise?
0
 
VirusMinusCommented:
no, its a method of clearing floats. floated divs are taken out of the flow of the normal document. its parent wont take it into account when ending. unless you use a clearing method.

read this to understand: http://www.ejeliot.com/blog/59
0
 
Artform04Author Commented:
Thanks, that was really helpful!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now