Float & Display Problem

Forum Moderators: not2easy

Message Too Old, No Replies

Float & Display Problem

chenry

5:28 pm on Aug 21, 2008 (gmt 0)

Hi everyone! I've been having a problem getting a simple float and display to work in both IE and Firefox. I want the pink box to be at the top of the screen and the blue box to be 25px from the top. I've tried everything I know and can't get it done. I've been reading about the IE Box Model and the problems IE has with display: inline. Any help would be wonderful, thanks!


<div id="site-outline">
<div id="post-it">Content for id "post-it" Goes Here</div>
 <div id="header"></div>
 <div class="clear"></div>
</div>


body {
margin-top: 0px;
margin-bottom: 0px;
background-color: #000000;
}
#site-outline {
width: 950px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 300px;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 25px;
background-color: #000099;
}
#post-it {
background-color: #CC0066;
float: left;
height: 150px;
width: 200px;
margin-left: 50px;
display: inline;
}
.clear {
clear: both;
margin: 0px;
padding: 0px;
display: inline-block;
}

D_Blackwell

5:49 pm on Aug 21, 2008 (gmt 0)

Reordering the HTML might do the trick for you. It works for the sample. Of course, I've no way to know what else might be added that might break it again:))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<html>
<head>
<style>
body {
margin-top: 0;
margin-bottom: 0;
background-color: #000;
}
#site-outline {
width: 950px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 300px;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 25px;
background-color: #009;
}
#post-it {
background-color: #c06;
float: left;
height: 150px;
width: 200px;
margin-left: 50px;
display: inline;
}
/**********
.clear {
clear: both;
margin: 0px;
padding: 0px;
display: inline-block;
}
*/
</style>
</head>
<body>
<div id="site-outline">
<div id="header">
<div id="post-it">Content for id "post-it" Goes Here
</div>
</div>

</div>

</body>
</html>

Fotiman

6:04 pm on Aug 21, 2008 (gmt 0)


body { 
margin: 0; 
background-color: #000; 
} 
#site-outline { 
position: relative; 
width: 950px; 
margin: 0 auto; 
padding: 25px 0 0; 
} 
#post-it { 
position: absolute; 
top: 25px; 
left: 50px; 
height: 150px; 
width: 200px; 
background-color: #C06; 
} 
#header { 
height: 300px; 
width: 900px; 
background-color: #009; 
}


<div id="site-outline"> 
<div id="post-it">Content for id "post-it" Goes Here</div> 
<div id="header">x</div> 
</div>

chenry

6:05 pm on Aug 21, 2008 (gmt 0)

The problem with the one code you posted is the pink box is not at the top of the browser window. It is stuck inside the the header div. Any other ideas?

Fotiman

6:31 pm on Aug 21, 2008 (gmt 0)

I thought that was where you wanted it. Instead, just modify this part:

#post-it {
position: absolute;
top: 0px;
left: 50px;
height: 150px;
width: 200px;
background-color: #C06;
}