Forum Moderators: not2easy
Im trying to make this layout, where #cright & #cleft stretch to their contents. A div is inclosing these two with a background image behind them.
1111111111111
1222222333331
1222222333331
1222222333331
1222222333331
1111111111111
Someting like that ^^
The only problem is that internet explorer is showing the background, but firefox is not. As firefox is allways doing what its supposed to do I still cant find the problem.
I searched on these forums & on the internet for days but I cant find a solutions, and I dont want to switch over to tables!
Here is the relevant piece of my css & html code:
<div id="main">
<div id="boven">
<div id="menu">
</div>
</div>
<div id="fietser"></div>
<div id="banner">
</div>
<div id="info">
<div id="titel"><span class="koptekst">Welcome</span></div>
<div id="nieuws_kop"><span class="koptekst">Nieuws</span></div>
</div>
<div id="agrond">
<div id="cleft">left</div>
<div id="cright">right</div>
</div>
<div id="footer">Footer</div>
</div>
And the css sheet thats I guess mattering :)
#agrond {
width: 726px;
background-image: url(images/bg_content.gif);
background-repeat: repeat-y;
background-position: center;
display: block;
}
#cleft {
width: 537px;
float: left;
display:block;
}
#cright {
width: 189px;
float: right;
display:block;
}
Sorry about my bad english :) It would be awesome if you guys could help me!
I also tried the first suggestion but it doesnt work neither, any ideas?
If I give the div a background color instead of a background image you can see it doesnt stretch with the 2 other colums, I can fix it by giving it a min-heigth but my customer wants it to be stretchable :)
Again, thanks for your answer! :D
First, when you stare at something long enough you begin to overlook the obvious. :-) Verify the BG image absolutely, positively is where you think it is. Type it into your browser:
[yoursite.com...]
Once verified, you should not need to add the quotes. Also if you ever *do* move the CSS into a file that may or may not be in a directory, you can still access the BG image by starting at the domain root with a slash:
background:url(/images/bg_content.gif);
I would then isolate the problem to its specific part:
#agrond {
width: 726px;
background-image: url(images/bg_content.gif);
background-repeat: repeat-y;
background-position: center;
display: block;
}
.....
<div id="agrond></div>
Put that in a page, all by itself. If it works, it's some other issue. Are there other elements we cannot see here that may be "covering up" the BG image with a color?
(But the way, divs are block by default, you may eliminate that selector, I think.)
If the above does not work, it may be a page coding error or the document type.
What document type are you using? Is it a valid document type? In FireFox, right-click on the background area of the page and select "View Page Info." On the General tab, next to Render Mode, if it says "Standards compliance mode" no need to go further - my guess is it will say "Quirks mode". Dig around here for documents on using a valid document type and validating the page. Many CSS methods will cease to function in one mode or the other.
I can fix it by giving it a min-height
So is there anything in the div to give it a height? If there isn't any content in it, it will be a flat line.
<added>
The div's inside it are both floated so they won't actually give that div any height.
after the floated div's add:
<div style="clear:both;"></div>
that should force the height to be the same as longest column.
[edited by: XtendScott at 11:46 pm (utc) on Nov. 10, 2007]
