Welcome to WebmasterWorld Guest from 54.198.3.15

Forum Moderators: not2easy

Message Too Old, No Replies

background-color for divs in firefox

     
1:36 pm on Feb 2, 2006 (gmt 0)

Preferred Member from GB 

10+ Year Member

joined:May 8, 2002
posts:442
votes: 0


I have a large div with smaller divs inside it. I want to give the large div a background color, but when I do is only displays a strip of color rather than filling the whole div - works fine on ie.

Is this anything to do with having other divs inside or is there another cause?

2:17 pm on Feb 2, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Nov 4, 2004
posts:214
votes: 0


Hi musicales
It depends on how you have styled the inner divs (e.g. float:left, position:relative etc) this will effect how the outer div can or cant wrap around these inner divs

Assuming that the inner div is not positioned or floated, you could achive this like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
#outer {
background: #000;
padding: 10px;
}
.inner {
background: #eee;
padding: 10px;
}

</style>
</head>
<body>
<div id="outer">
<p class="inner">text here</p>
<p class="inner">text here</p>
<p class="inner">text here</p>
<p class="inner">text here</p>
<p class="inner">text here</p>
</div>
</body>
</html>

Is this what you are looking for..?

Post your code up and I may be able to help

ZA

PS: Sorry I should have said.. IE may show it correctly but I imagine this is because of non-compliance in relation to floating or something similarly common. Fire Fox will 9.5 times out of 10 be rendering your layout correctly.

like I said post some code and we can have a look at what is going on :-)

7:23 pm on Feb 2, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:June 9, 2005
posts:190
votes: 0


I bet it's because all the containers inside your main div are floate.

Write overflow:auto; in the outer container (the one that collapses). Don't write a height for it or you'll get the little scroll bars.