percentage widths problem!!

[adamhhh]

right this has been bugging me for a few days now,

 

ive played around with a lot of sites and when you resize the browser (assuming their using % widths rather than absolute) the divs get smaller but dont go down the page etc as my page is doing..

 

http://www.studybot.net/studentsite/index2.php

 

here this is a header div with 2 divs inside. When i reduce the browser window eventually the logo2 div goes outside the header div rathern than scrunching up, as i want it to??

 

the html..

<code>

<div id="header">

  <div id="logo"><img src="images/studybot_logo.jpg" alt="Study Bot logo" width="171" height="30" /></div>

  <div id="logo2">Content for id "logo2" Goes </div>

</div></code>

 

the css..

 

<code>#header {

width: 100%;

background-color: #E8E8E8;

padding-left: 28px;

padding-top: 20px;

float: left;

margin-top: -20px;

margin-bottom: -20px;

margin-left: -20px;

height: 40px;

}

#logo {

float: left;

margin-bottom: 10px;

}

 

#logo2 {

height: auto;

width: auto;

float: left;

margin-top: 12px;

margin-left: 60px;

}

</code>

 

any ideas??

 

 

[ToonMariner]

yep remove the height of the header div and give it some padding.