Trouble with CSS in header

[jeremyapp]

Hi, I'm pretty new to CSS so I apologize in advance if this is a simple question or if I did something completely wrong.

 

I have the following CSS in my page:

 

http://www.sylvandellpublishing.com/eBooks/gen2/Kersplatypus/index_hybrid.html

 

<style type="text/css">
<!--

#bookcontent {

position:fixed;
top: 68px;
width: 100%;
height: 91.5%;

}

img.logosmall {
position:absolute;
top:21px;
left:10px;
height:30px;
}

#select {
position:relative;
left: 350px;
top:20px;
width: 150px;
}

#audiocontrol{
position:absolute;
top:2px;
right:2px;
height:65px;
}

p.select{

font-size: 10px;
text-align: center;
font-family: arial;
background-color: #ffffff;
color:black;
font-weight: bold;
}

select.select{

font-size: 10px;
text-align: center;
font-family: Arial;
background-color: #ffffff;
color:#006699;
}
.style1 {font-family: arial}
.style3 {
font-family: arial;
font-size: 10px;
font-weight: bold;
}
-->
</style>

 

What I would like is to have the 3 divs in my header stay relative to one another so that when the window is resized they stay the same distance apart.  I have tried a number of things but I can't seem to make it work.  Any help would be greatly appreciated.  Thanks!

[secoxxx]

Try creating a "wrap" div.

 

for instance.

 

css being for wrap:

 

#wrap {

margin: 0pt auto;

width: 1024px;

}

 

<div id="wrap">

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

</div>

 

that will contain everything ina  1024px div.