No replies
katjaewers
katjaewers's picture
Offline
newbie
Vienna, Austria
Last seen: 10 years 33 weeks ago
Vienna, Austria
Timezone: GMT+2
Joined: 2010-04-13
Posts: 1
Points: 2

Hello,

I decided to finally move on to DIVs and have weird problems. I have the following DIV structure:

<div class="globalcontainer" style="width: 800px; height: 100%; background: url('bg.png') repeat-y;">
 
  <div class="headerdiv">
      <div class="logo" style="float: left">...</div>
      <div class="menu" style="float: right">...</div>
  </div>
 
  <div class="content">...</div>
 
</div>

So, I have a container div with fixed width that stretches to 100% vertically and provides content with background.
While there is just one "headerdiv" with floating div's with logo and menu inside, it stretches fine, but as soon as I add some other div inside ("content", in this case), it stretches in a really weird way - it does stretch, but not for 100% for sure, and content that is physically inside it is displayed above the container div if it doesn't fit.
It happens in IE and Safari, didn't check other browsers.
Setting "overflow: hidden" to "globalcontainer" solves stretching problem, but part of the content I need gets clipped.

I'm a newbie to DIV layots and have absolutely no idea what's going on and how to fix it. What I want to achieve in the end is DIV.globalcontainer, plus several divs inside - header with logo and menu, content and footer - with everything except content div having fixed height and content div stretching vertically to fill in space that's left. Is it at all possible?