Adding a fixed banner to a floating page

Question

I'm new to html and css and am trying to design a website having a fixed banner and sidemenu on every page, and then the contents in a center frame-like environment. At the moment I have everything in fluid form as follows:

<body>

<div id="banner">
<?php
include('banner.html');
?>
</div>

<div id="sidemenu">
<?php
include('sidemenu.html')
?>
</div>

<div id="content">
<?php
include ('content.html')    
?>
</div>

</body>

and as part of my style css code I have:

#banner
{
background-color:#6a2b93;
color:#FFDB00;
text-align:right; 
font-family:"Times New Roman", Times, serif;
width:100%;
height:10%;
position:fixed;
}


#sidemenu
{
background-color:#6B2B93;
color:#FFDB00;
text-align:left;
font-family:"Times New Roman", Times, serif;
padding-left:2%;
padding-right:1%;
padding-bottom:5px;
height:90%;
width:20%;
position:fixed;
top:10%;
float:left; 
overflow: auto;
}

#content
{
background-color:#FFFFFF;
color:#000000;
text-align:justify;
font-family:="Times New Roman", Times, serif;
margin-right:20px;
margin-left:23%;
padding-right:2.5%;
padding-left:2.5%;
padding-bottom:5px;
height:90%;
width:72%;
position:fixed;
top:10%;
float:left;
overflow:auto;
}

Ideally I want to have the height of the banner at 3em, but I cannot seem to find a way of doing so, whilst keeping the auto overflow option on the sidemenu and contents. Is this possible?

Henrik Janbell · Answer 1 · 2012-09-23T06:57:25.613

0

I'm not sure why you're using position:fixed on all elements, that is rarely a good solution for other elements than a header or a footer since they will not move along with the window when resized but rather remain fixed (obviously) in their position in the window. However, if you want #banner to be 3em high, then #sidemenu and #content needs to have top:3em as well, in order to not overlap the banner. See updated Fiddle

Update: This might be what you want in terms of structure (insert your own measurements), using a fixed header and full-height left/right below that - Fiddle.

Update 2: Ok, so let's try again, is this what you want? A fixed header and sidebar and a content section that scrolls when overflowed. You would have to change to your own measurements - Fiddle

edited Sep 23 '12 at 06:57

answered Sep 22 '12 at 20:38

Henrik Janbell

1,784
3
21
30

Thanks for the response. The reason for going for `position:fixed` is that it was the only way I could seem to guarantee that the content area filled 90% of the available space. Also the reason for having the `top:10%` was that if you mix percentages and em's you cannot make sure you get 100% overall, or is there a way around this. As I said, sorry for my ignorance, but I am very new to this. – David Ward Sep 22 '12 at 20:51
Nothing to be sorry about, we're all rookies at one point :) See updated answer for possible solution. – Henrik Janbell Sep 22 '12 at 21:11
Thanks for the example. The problem I keep having is getting the contents section to fill the rest of the height of the page and to have a scrollbar if and only if it overflows. I can get it to do one or the other, but not both! – David Ward Sep 22 '12 at 22:11
That may be what I'm looking for. Unfortunately I am unable to try it out today as I don't have the software on my home PC, but I'll try it tomorrow morning. – David Ward Sep 23 '12 at 09:11
This works in your Fiddle, but not on the website. I'm trying to use PHP in conjunction with the sidemenu, could this be complicating things? – David Ward Sep 24 '12 at 08:18
That depends, PHP itself will not cause problems since that us run server-side and CSS/HTML is client-side. In other words, the PHP will no longer impact the layout when the page is sent to the website visitor. However, if you do anything in your PHP code that server-side will change the HTML or CSS being sent, then that could be the cause of it not working. Moreover, if you have any other CSS / HTML in the same document that too can cause changes. Do you have an URL showing the problem? – Henrik Janbell Sep 24 '12 at 08:31
Late reply here, sorry about that. So what specifically not working on your website? – Henrik Janbell Sep 28 '12 at 15:50
Sorry about not updating this thread this morning. I posted a further question which simplified things on here to tray and ascertain the answer. although nobody was able to give the exact solution, answers there led to me finding a solution early this morning, hence why it looked fine when you looked at it 6 hours ago. Unfortunately I've been at a conference all day, and hence have been unable to update this thread or the other one. Sorry about that, but thank you all for your help. – David Ward Sep 28 '12 at 23:16
No worries. Good that you found a solution :) – Henrik Janbell Sep 29 '12 at 07:21

score 0 · Answer 2 · answered Sep 22 '12 at 23:41

#banner
{
background-color:#6a2b93;
color:#FFDB00;
text-align:right; 
font-family:"Times New Roman", Times, serif;
width:100%;
min-height:100px;
height:100px;
}


#sidemenu
{
background-color:#6B2B93;
color:#FFDB00;
text-align:left;
font-family:"Times New Roman", Times, serif;
padding-left:2%;
padding-right:1%;
padding-bottom:5px;
min-height:100px;
height:90%;
width:200px;
position:fixed;
top:100px;
float:left; 
overflow: auto;
}

#content
{
background-color:#FFFFFF;
color:#000000;
text-align:justify;
font-family:="Times New Roman", Times, serif;
margin-right:20px;
margin-left:23%;
padding-right:2.5%;
padding-left:2.5%;
padding-bottom:5px;
height:90%;
width:72%;
top:10%;
float:left;
overflow:auto;}

Adding a fixed banner to a floating page

2 Answers2