By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,662 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

Vertical spacing with Fixed top-banner

P: 2
My problem is that to fix the top banner (div), I get some strange side effects with the letf_div and the c_div (central area) - the vertical scroll bar dosen't respect the size ove the window (grows past it). With the browser maximized I manage to get a nice look using:

height:83%;

The problem is that as soon as the browser is resized it all falls apart! Any clues on how to make this work properly?

here's my page:

[HTML]
<html>
<style type="text/css">
* { margin:0; padding:0; font-family:Tahoma,Geneva,Arial,Helvetica,sans-serif; font-size:12px; text-decoration:none; }
a { color: #000000; text-decoration: none; }
a:hover { color: #f98f01; }

#main { overflow:hidden; }
#div_top { position:fixed; width:100%; height:104px; background-color:#ddc4c2; }
/* top div contents */
#top_menu { position:absolute; left:1.7em; top:33px; }
#logo { position:absolute; float:right; top:30px; right:30px; }
#section_name { position:absolute; font-size:3em; color:white; top:52px; left:0.8em; }
/* end of top div contents */

#container { position:absolute; top:104px; width:100%; height:100%; overflow:hidden; }
#left_div { visibility:hidden; position:relative; float:left; width:20%; height:83%; background-color:#ffcc44; overflow:hidden; }
#c_div { position:relative; float:left; width:80%; top:104px; height:83%; overflow:auto; }

</style>

<body id="main">

<div id="div_top">

<div id="top_menu">{{for menu in [('Index', 'index'),
('About the company', 'about'), ('Sports','sporting'),\
('News', 'novelties'), ('Pictures', 'pictures'), ('Contact', 'contact')]:}}
{{=A(menu[0], _href=menu[1])}}
{{if menu[0] != 'Contact':}} |
{{pass}}
{{pass}}
</div>

<div id="logo"><img src="/{{=request.application}}/static/companylogo.gif" alt="The company"></div>
<div id="sectionname">{{=sectionName}}</div>

</div>

<div id="container">

<div id="left_div">left area menu<br/>

</div>

<div id="c_div">central area - contents<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
</div>

</div>
</body>
</html>
[/HTML]
txs for all the help,
The web Malik
Jan 22 '08 #1
Share this Question
Share on Google+
1 Reply


harshmaul
Expert 100+
P: 490
Firstly visit w3c and get your mark to validate.

Then....

you always gonna get this problem if you mix heights as a percentage, and hieghts as pixels.

i would say use percentages and make sure they add up to 100.
Jan 25 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.