Forum Moderators: not2easy
CSS:
#bakred {
position: absolute;
top: 250px;
left: 20px;
width: 700px;
background-color: #992222;
background-image: url("../img/redtop.jpg");
background-repeat: repeat-x;
}
#main {
position: relative;
margin: 20px;
padding-top: 15px;
padding-bottom: 18px;
width: 656px;
background-color: #EFEEE9;
border: 1px solid #555555;
}
#bg {
position: relative;
background-image: url("../img/streck_vert.gif");
background-repeat: repeat-y;
background-position: 225px 0px;
}
.leftfloat {
margin-left: 18px;
padding-right: 40px;
float: left;
width: 185px;
}
.rightfloat {
margin-right: 18px;
float: right;
width: 392px;
}
HTML:
<div id="bakred">
<!-- main DIV -->
<div id="main">
<div id="bg">
<!-- right DIV -->
<div class="rightfloat">
<p>content</p>>
<!-- end right DIV -->
<!-- left DIV -->
<p>content</p>
<!-- end left DIV -->
<!-- content hack -->
<div style="clear: both;"></div>
<!-- end main DIV -->
</div>
</div>
-------------------
Now this worked fine in IE and safari, but mozilla wouldnt display the y-repeated background in the br div. Strange_ I almost gave up. But then I tried diferent solutions, and I discovered that adding some padding to the bg div, it would stretch as desired. So by changing the bg div in the css to:
#bg {
padding-top: 1px;
padding-bottom: 1px;
position: relative;
background-image: url("../img/streck_vert.gif");
background-repeat: repeat-y;
background-position: 225px 0px;
}
Now, it works perfect in all main browsers above version 5.
If anyone has a neater solution or an explanation regarding this issue, it would be greatly apprechiated.
regards
_David
Bump!
I looked at this a couple of times, and couldn't work it out.. but seeing as how DrDoc bumped it I feel guilty now ;)
First the HTML code you have above is not valid (divs not closed and no left float div in place) so it's quite hard to work out what you're actually seeing. it took me a few attempts to recreate what you explain and that's possibly why no answers..
there are numerous "fixes" that I found, but I think what you're seeing is that Moz is no longer "honouring" the clear:both hack/fix.
This I *think* is due to "collapsing" bottom margins between the "bg" div and the "clearing" div.
So I've learned something ;)
When we talked about using that method to put "fake" content into a div it wasn't actually content that was there but a "margin" seperation.. now by default they are collapsing.
Here's some "fixes" for the code as it stands...{well with closed divs and left float div put in ;)}
1. If you put some content in that empty div it will work, but I presume is not what you want.
2. if you give the "clearing" div some height {1px} it will work
3. similar to 2. padding or border (top or bottom) on the clearing div works
4. if you add a bottom border to the "bg" div it stops the margins touching and stops them collapsing so it too will work
5. padding-top on the "bg" div on its own doesn't work
6. padding-bottom on the "bg" div on its own does work
Ok so that doesn't help you really. as it's no "neater" than what you 're doing.
Why bottom padding (on the #bg div) works I don't know it doesn't actually fit with the collapsing margin theory...?
this layout also "suffers" from other collapsing margin problems in Opera namely the very bottom red "border" collpses so my solution was to pad the #bakred div instead, which also then makes the width calculations easier later in design...
One Solution (though not necessarily simpler is neater)
Moz's neater solution would be to float the #bg div too as a floated "parents" will stretch to contain their floated children, but then you would need to float you main div too to make it "stretch" to contain the #bg div. Note: This layout is already triggering some IE float bugs already so this may complicate things even further...
Don't know if that's any help
here's some modified code I came up with.. but don't know if actually fits with what you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html {}
body {}#bakred {
position: absolute;
top: 50px;
left: 20px;
width: 660px;
padding: 20px;
background-color: #992222;
background-image: url(../img/redtop.jpg);
background-repeat: repeat-x;
}#main {
position: relative;
float: left;
width: 660px;
border: 1px solid #555555;
padding: 15px 0 18px 0;
background-color: #EFEEE9;
}#bg {
background-color: lime;
float: left;
width: 100%;
}.leftfloat {
float: left;
margin-left: 18px;
width: 145px;
background: #fcf;
}.rightfloat {
float: right;
margin-right: 18px;
width: 392px;
background: #ffc;
}/* different margins for IE double bug */
* html .rightfloat {margin-right: 9px;}
* html .leftfloat {margin-left: 9px;}p {margin: 0; padding: 10px 0;} /* collapsing margin override */
</style>
</head>
<body>
<div id="bakred">
<div id="main">
<div id="bg"><div class="rightfloat"><p>content</p></div>
<div class="leftfloat"><p>content</p></div>
<!-- end bg div --></div>
<!-- end main div --></div>
<!-- end bakred div --></div>
</body>
</html>
You should adjust the width of the left/right floats accordingly to suit.. rather than use margin/padding this will help avoid further IE float bugs. The colors are there to show what is happening.. then the background image can be positioned to suit "between" the 2 floats (but on the #bg div}..
Suzy
Now Im a littlw bit wiser (I think). Of course, I misplace my html. The correct should be:
<!-- background DIV -->
<div id="bakred">
<!-- main DIV -->
<div id="main">
<div id="bg">
<!-- right DIV -->
<div class="rightfloat">
<p>content</p>
</div>
<!-- end right DIV -->
<!-- left DIV -->
<div class="leftfloat">
<p>content</p>
</div>
<!-- end left DIV -->
<!-- content hack -->
<div style="clear: both;"></div>
<!-- end main DIV -->
</div>
</div>
<!-- end background DIV -->
</div>
Now, the explorer margin hack you added, I added the same hack too. But only for IE5+ on PC; mac IE displays the margins correctly.
My hacks where:
/* The following hack corrects the -9px margin on floating DIVs in IE5/Win */
/* star-hack & backslash-hack for IE/WIN \*/
* html body div.leftfloat {
margin-left: 9px;
background-position: 206px 0px;
}
* html body div.rightfloat {
margin-right: 9px;
}
/* end hack */
So you are saying, that floating the containing divs would solve the bg problem? That could be a good solution. Or if I gave the clearing DIV a height? didnt try that one either.
For now Ill stick with the padding trick (but removing the non-working top-padding). But I really aprechiate your alternative solutions.
Thanx for a great forum!
-
David
yes the margin fix hacks you use are what I would do too to feed the value to IE/Win only.... I forgot about mac :(
and yes I'm saying that floating the containers will correct the problem (and it's correct behaviour according to the CSS specs) and then there is no need to use a "clearing" div hack at all so you avoid any pixel differences (that all of the previous suggestions create) in your layout.. therefore making it neater *I* think
Note IE doesn't implement the CSS specs mentioned above but they "stretch" the container anyway so that's why it works there ;)
also all "hacks" are then confined to the CSS so can be amended/removed much easier and it avoids the extra HTML markup.
Suzy
[added]I'd really like to know why padding works for your original code though....hmmm ;)[/added]
