Forum Moderators: not2easy
I am having a problem with css on Safari 1.2.2 and IE 5.2 on my mac.
The issue is as follows:
In the html code I have the following:
<div id="body">
<div id="bloc1">a</div>
<div id="bloc2">b</div>
<div id="bloc3">c</div>
</div>
In the css I have the following:
#body {
width: 751px;
background-color: #AE2C2F;
margin-right: auto;
margin-left: auto;
left: 0px;
top: 0px;
position: relative;
} #bloc1 {
background-color: green;
width: 100px;
height: 40px;
float: left;
margin-left: 20px;
padding: 10px 5px 10px 5px;
position: absolute;
left: 0px;
top: 0px;
}
#bloc2 {
background-color: blue;
width: 100px;
height: 500px;
float: left;
margin-left: 20px;
padding: 10px 5px;
position: relative;
}
#bloc3 {
background-color: yellow;
width: 100px;
height: 40px;
float: left;
margin-left: 20px;
padding: 10px 5px 10px 5px;
}
When the content on the bloc expands it is as though is is outside the body div. The bloc divs expand in height to fit the content but I need the body div in which they site to also expand. At the moment they just overlap and contnue down the page without pushing the body div at all.
Am I missing something really obvious?
You don't need to create a div to apply behavior to the <body> tag... just use
body {
}
in your CSS.
Unless of course, you're actually naming one of the interior divs "body", which I would recommend you DON'T do. Applying names that are already in use by the DTD(i.e., 'body', 'head') is usually a recipe for confusion, if not destruction. DIVs that encompass all positioned content within the <body> of an html page are usually referred to with an ID of "wrapper", so feel free to use that name.
Also you might want to brush up on positioning... you've got a mutt-like mix of absolute positioning, relative, and float... some of which is negating itself when used in the same selector, like #bloc2.
FYI, that is an older version of Safari and I can tell you from personal experience that it was a bit quirky with CSS... IE:Mac is in a world all its own when it comes to CSS layouts... and it's not a pretty world. Good thing very few of your users will have IE:Mac, and even less as time goes by, due to Microsoft's discontinuation of it. I wouldn't worry too much about what the site looks like in IE:Mac.
