Forum Moderators: not2easy

Message Too Old, No Replies

Need to wrap container around absolutely placed items

         

blurredline

4:03 pm on Jun 9, 2004 (gmt 0)



I am rather new and rather confused. I have two absolutely placed items (log-section and header). I am trying to wrap #container around the two in order to provide a background color as well as a border. The container seems to act independently of the logo and headers (or vice versa). Can I wrap container around these two items or is it a lost cause?

<style type="text/css">
#container {
width: 950px;

border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
height: auto;
left: 0px;
top: 0px;
background-color: #CCCCCC;
}

#banner {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}

#content {
padding: 5px;
margin-left: 215px;
background-color: gray;
}

#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}

#footer {
clear: both;
padding: 5px;
margin-top: 5px;

background-color: rgb(213, 219, 225);
}
#logo-section {

z-index: 2;
position: absolute;
left: 10px;
top: 40px;
}
#header {

position: absolute;
left: 125px;
top: 0px;
}
</style>
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<!--Top Row Logo-->
<div id="container">
<div id="banner">
<div id="logo-section"><a href="/"><img src="logo_inv.gif" border=0></a></div>

<div id="header"><img src="#randrange(1,11)#.jpg" width="758" height="139" border="0"></div>

</div>

createErrorMsg

5:10 pm on Jun 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Your <div id="banner"> doesn't have a closing tag in the source code you provided. That could be the problem.

DrDoc

5:26 pm on Jun 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to Webmaster World!

No, the problem is that the logo and header are moved out of the banner div when positioned. You need to position the banner div itself as well.

[w3.org...]
[w3.org...]