How do you get fixed top and bottom borders?

Forum Moderators: not2easy

Message Too Old, No Replies

How do you get fixed top and bottom borders?

Is there any code out there that can do this?

Michizzle

12:38 am on Aug 15, 2008 (gmt 0)

okay, well i've been wanting to put two borders on my page (a top and bottom one). but the thing is i want these borders to be fixed so that when you scroll, the borders will still be showing. i don't have that much experience in all this. but i've been lookin at some posts about fixed headers and footers and thinkin that i could just swap the codes to borders. but i don't understand haha.. and i've tried the simple:

border-attachment:fixed;

..it seemed simple enough for me. but it didn't work. i'm hoping it will work nicely on myspace.

can anyone help a girl out? :]

csuguy

12:50 am on Aug 15, 2008 (gmt 0)

you could look into using a position:fixed and overflow:auto combo. It's not well supported by older browsers but if your just looking for a quick fix that could work.

Simply give your content area something like the following code:


#contentArea
{
  position:fixed;
  top:#%; /*Use a % so that it works for all browser sizes*/
  height:#%; /*Use a % so that it works for all browser sizes - and keep in mind how much of a top and bottom border you want - usually double w/e you set for top and subtract that from 100*/
  overflow:auto;
}

if you want your content centered horizontally - put the content area in a div with the following property:


#container
{
  margin: auto;
}

Finally - if you haven't done so - you'll probably want to insert the following into your css as well:


body
{
  margin:0px;
}

Hope that helps - I've never messed with myspace so I don't know if this would be a good solution for the site or not, but try it out and see if it works for you.

Michizzle

10:41 pm on Aug 15, 2008 (gmt 0)

i've tried it out but it didn't do anything. i don't really know where exactly to put those codes. could there be like a separate code so that i wouldn't have to look for it through the layout code? once again i'm not so much experienced with this. also, when you say that i needa put it in a div, would i have to put it in the div tags?

csuguy

12:38 am on Aug 16, 2008 (gmt 0)

Here's the layout for an html page:


<html>
  <head>
   ...
  </head>  <body>
   ...
  </body>
</html>

Now, in the head section of the html put the following:


<style>
  ...
</style>

Replace the '...' with all of your CSS code.

If you haven't done so already - you'll need to add an id to the relevant HTML elements. For example:


<body>
<div id="container">
  <div id="contentArea">
   ...
  </div>
</div>
</body>

Hope that helps.

Michizzle

12:49 am on Aug 17, 2008 (gmt 0)

hmm....idk it didn't work. =/ i think it has to do with where i put it in the code.

this is hard stuff!

csuguy

2:08 am on Aug 17, 2008 (gmt 0)

No individual piece of this stuff is too hard - but ya trying to step into it and do it all at once can be difficult. It would probably help if I had experience with myspace - but I always made a note to stay away from it, lol.

Why don't you post all of your code on here so I can see where your putting it and all.

csuguy

2:56 am on Aug 17, 2008 (gmt 0)

Also - what browser are you using? Like I said - its not a well supported feature?

Michizzle

11:47 pm on Aug 17, 2008 (gmt 0)

okay well here's the code that im using now:

#profilelinks {
padding-right:25px;}

#profilelinks select {
top: inherit !important;
visibility:visible !important;
WIDTH: 125px !important;
display:inline !important;
position:static !important; }

body DIV DIV DIV#profilelinks{
VISIBILITY: visible !important;
display:inline !important;
position:static !important;
padding-right:15px; }

table div div#tkn_leaderboard,table div div#tkn_leaderboardDiv{
visibility:visible !important;
display: inline !important; }

#googlebar{
VISIBILITY: visible !important;
display:inherit !important; }
</style>

{ Table Properties }
table table{
border:0px solid !important;
border-color:000000;
background-color:000000;
background-image: url(http://example.com/example.gif);
background-repeat:repeat;
background-attachment:scroll;
background-position:center center;}

table table table{
background-color:000000 !important;
width:100%;
border:1px solid !important;
border-color:000000;
background-image:none;}

table table td{
padding:4px !important;}

td.text td.text a img {
width:70px !important;}

table, tr, td, .userprofileurl div{
height:0%;
border:0px !important;
padding:0px !important;
background-color:transparent;}

.navigationBar, div td form, table div div{display:visible;}

td
{text-align:justify;
letter-spacing:-1px;}

table
{width:450px;}

.blurbs table{
width:300px;}

table table table table, table table table td{
border:0px!important;
padding:0px!important;}

div table{
background-color:transparent;
border:0px!important;
background-image:none !important;}

div td font{
visibility:hidden;}

table table table table table,table table table table table td {
width:0px !important;}

.bro-hoes {
Text Properties }

table, tr, td, li, p, div, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover {
color:ffffff;
font-family:arial;
font-size:8pt;
font-weight:normal;}

.btext {
color:8fd300;
font-family:arial;
font-size:8pt;
font-weight:normal;}

.blacktext10 {
font-family:arial;
font-size:8pt;
color:00abc9;
text-transform:uppercase;
font-weight:bold;
text-decoration:underline;
display:block;
width:200px;}

.blacktext12 {
color:f13d6a;
font-family:arial;
font-size:8pt;
font-weight:bold;}

.lightbluetext8 {
font-family:arial;
font-size:8pt;
color:f13d6a;
text-align:left;
text-transform:none;
line-height:10px;
font-weight:bold;
background-color:black;
display:block;}

.orangetext15 {
color:8fd300;
font-family:arial;
font-size:12pt;
font-weight:bold;
letter-spacing:-1px;}

.redtext {
color:670087;
font-family:arial;
font-size:8pt;
font-weight:normal;}

.redbtext {
color:670087;
font-family:arial;
font-size:8pt;
font-weight:bold;}

.text {
color:ffffff;
font-family:arial;
font-size:8pt;
font-weight:normal;}

.whitetext12 {
color:670087;
font-family:arial;
font-size:12pt;
font-weight:bold;
letter-spacing:-1px;

}a:active, a:visited, a:link {
color:ffffff;
font-family:arial;
font-size:8pt;
font-weight:bold;
text-decoration:none;}

a:hover {
font-family:arial;
color:8fd300;
font-size:8pt;
font-weight:bold;
text-transform:none;
text-decoration:none; background-image:url("example.gif"); background-repeat:repeat repeat;
background-position:center center;}

a.redlink:active, a.redlink:visited, a.redlink:link {
color:8fd300;
font-family:arial;
font-size:8pt;
font-weight:bold;
text-decoration:none;}

a.redlink:hover {
font-family:arial;
color:8fd300;
font-size:8pt;
font-weight:bold;
text-transform:none;
text-decoration:none; background-image:url("http://example.com/example2.gif"); background-repeat:repeat repeat;
background-position:center center;}

.nametext {
color:00abc9;
font-family:arial;
font-size:12pt;
text-transform:none;
font-weight:bold;
display:display;
background-color:transparent;
text-align:left;
letter-spacing:4px;}

u {
color:8fd300;
font-family:arial;
font-size:8pt;
text-transform:none;
font-weight:normal;
border-bottom:1px dotted;
border-color:f13d6a;
text-decoration:underline;}

b {
color:00abc9;
font-family:arial;
font-size:8pt;}

i {
color:670087;
font-family:arial;
font-size:8pt;}

{ Miscellaneous Properties }

.contentArea
{
position:fixed;
top:10%;
height:-80%;
overflow:auto;
}

body {
cursor:default;
margin:0px;}

.container
{
margin: auto;
}

a:hover {
cursor:crosshair;}

img {
border:0px;
filter:none;}

a:hover img {
border:0px;
filter:Alpha(Opacity=100, FinishOpacity=0, Style=1);}
</style>

div table {
visibility: visible };
</style>

well i'm using firefox as my browser..hope you can make it work :] do your magic hehe

[edited by: tedster at 11:41 pm (utc) on Aug. 18, 2008]

[edited by: DrDoc at 3:00 am (utc) on Aug. 19, 2008]
[edit reason] removed specific image urls [/edit]

Michizzle

11:49 pm on Aug 17, 2008 (gmt 0)

oh and if you do make it work..lemme know what you put in and where you put it. so that maybe i can just stick it in another layout and use it again :]

csuguy

7:11 am on Aug 18, 2008 (gmt 0)

What about your html? Can you change the HTML or can you only change the styles? (post HTML either way)

csuguy

7:12 am on Aug 18, 2008 (gmt 0)

OH - I saw you had -80% for height for the contentArea - it should just be 80%.

Michizzle

10:00 pm on Aug 18, 2008 (gmt 0)

well i think you can only change the styles...and i didn't see that typo but i fixed that and it still didn't do anything.

csuguy

10:34 pm on Aug 18, 2008 (gmt 0)

Well thats the problem more likely than not - simply adding classes and ids to the style sheet doesn't do anything. You have to be referencing the tags, id, and classes used in the html.

So post the HTML and then we can work on it.

swa66

10:56 pm on Aug 18, 2008 (gmt 0)

Comments in CSS go between /* and */
e.g.:

/* comment */

not as

{ comment }

You do not need to stop and start <style> tags, jsut let them run through into one big one. A style should be given a type as in:


<style type="text/css">
    ...
</style>

A "#" should be there as such, not as the html entity "#"

Hexadecimal color values are written as

color:#00abc9

, not as

color:00abc9

alternatives are to use names (such as back), or rgb values in decimal notation.

The trick to get this to work is to first start with a far simpler example and build it up from there.

Also try to get a hold of a tutorial on the syntax of CSS.

swa66

11:37 pm on Aug 18, 2008 (gmt 0)

A basic approach would be to build it up step by step.

We know position:fixed keeps things locked to the browser window, unfortunately we also know it's not going to work well in IE (but that's nothing new IE sucks big time when it comes to CSS).

So we start from a basic xhtml template
(I know the xhtml is going to make it considerably harder on IE).


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>Untitled Document</title>
   <style type="text/css">
    * {
     border:0;
     padding:0;
     margin:0;
    }
   </style>
  </head>
  <body>
   <div id="wrapper">
    <h2>Ipso</h2>
   </div>
  </body>
</html>

What does that do: it resets all margins, padding and borders to allow us to work without having to worry about browser defaults. It can be a pain, so you might not want to do this, it's a choice. I like the reset as I've been stung a few times too many by unexpected browser defaults.

Now let's add a first paragraph


   <p id="top">Ipso lorem</p>

We'll push it to the top.
Adding:


   #top {
    position:fixed;
    top:0px;
    background-color:red;
   }

does that.
Note the background color in order to easily find it again.
The top:0px sets the top of this element at the top of the viewport.

Oops that goes over the H2 title.

So we need to make the wrapper stay away from the top line by adding


   #wrapper {
    margin-top:1em;
   }

to the CSS.

1em is the line height regardless of the font sized forced upon us by the browser and/or the user, so it's a good match for our few words paragraph.

That'll work in firefox etc, but not in IE (but we're developing web pages), so we utterly ban IE for now.

But in order for it to become visible we need a bit more content under the <h2>, let's add a long paragraph of nonsense and make our window small so we can see it scroll.

Adding the bottom paragraph is quite similar except that we don't know where to position the top of the paragraph as we don;t have a clue how high the viewport is going to be, so we position the bottom of that paragraph at the bottom of the window.

We also need to make sure the wrapper keeps place for the line near the bottom.

Adding it together we come up with this:

 
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Untitled Document</title>
  <style type="text/css">
   * {
    border:0;
    padding:0;
    margin:0;
   }
   #top {
    position:fixed;
    top:0px;
    background-color:red;
   }
   #bot {
    position:fixed;
    bottom:0px;
    background-color:green;
   }
   #wrapper {
    margin-top:1em;
    margin-bottom:1em;
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
   <p id="top">Ipso lorem</p>
 
   <h2>Ipso</h2>
   <p>Lorem ipsum dolor sit amet, id sed tellus vitae, 
   tempus sed, quam elit, consectetuer pede tellus sagittis
   tincidunt vitae pellentesque. Diam lectus eu velit,
   orci justo ut. Aptent omnis non morbi donec, est sodales
   maecenas neque nec vel egestas, dictum congue suscipit
   morbi, semper velit orci, feugiat mattis. In amet in,
   nec a quidem non ac ligula felis, justo sapien sed wisi
   nec, mollis amet ligula amet. Vestibulum consequat
   vestibulum morbi nulla velit vitae, dictum unde vestibulum
   vestibulum dictum eu, provident mauris nibh enim
   ultricies. Nec purus nunc amet nostra et. Quis massa,
   arcu arcu fermentum, risus metus suspendisse risus ac,
   vulputate lectus, sed rhoncus nunc pellentesque congue
   nulla. Aliquam neque proin dictumst ultrices volutpat
   laoreet, sed lectus nihil, nam eu pellentesque tempor
   neque. Dolor lectus luctus hendrerit nisl feugiat, vel
   posuere, nunc malesuada nec aenean faucibus dolor.</p>
 
   <p id="bot">Ipso lorem</p>
  
  </div>
 </body>
</html>

As said before never tested in IE, and I doubt it'll work there as well.

The trick is to test it in Firefox, safari, opera, etc and then add what IE wants to see in conditional comments (but that's for a next post).

csuguy

11:51 pm on Aug 18, 2008 (gmt 0)

Lorem ipsum dolor sit amet, id sed tellus vitae,
tempus sed

I've seen this kind of text used a lot in web design. What is it exactly? Is there a tool to produce the text?

csuguy

11:53 pm on Aug 18, 2008 (gmt 0)

LOL - best CSS ever:

table table table{

swa66

8:56 am on Aug 19, 2008 (gmt 0)

Lorem ipsum dolor sit amet, id sed tellus vitae,
tempus sed

I've seen this kind of text used a lot in web design. What is it exactly? Is there a tool to produce the text?

It's based on an old habit in layout. Dating back to the medieval times. It's latin, but the generators probably make no sense at all to those who do understand Latin.

I use it when I lack content or don;t want distraction by the content in doing layout work. It can easily be generated for any length of text you need it. Since it contains no unintended optical effects it gives you a feel for the layout without distraction onto content.

Search for "lorem ipsum generator" to find generators out there.

csuguy

9:51 am on Aug 19, 2008 (gmt 0)

thanks!

swa66

1:00 pm on Aug 19, 2008 (gmt 0)

Just looked at my code above in IE6: well it's beyond repair I'm afraid. (At least I've no clue how to repair it) so suggestions are welcome there, I guess it'll involve javascript. Even trying to keep the code from going to quirks mode doesn't seem to do a thing.

In IE7 the damage is less severe: The bottom margin isn't honored allowing the content to scroll high enough to clear the bottom line.
The easiest solution is to add some padding instead of the margin that's collapsing.


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Untitled Document</title>
    <style type="text/css">
      * {
        border:0;
        padding:0;
        margin:0;
      }
      #top {
        position:fixed;
        top:0px;
        background-color:red;
      }
      #bot {
        position:fixed;
        bottom:0px;
        background-color:green;
      }
      #wrapper {
        margin-top:1em;
        margin-bottom:1em;
      }
    </style>
<!--[if IE 7]>
    <style type="text/css">
      #wrapper {
        padding-bottom:1em;
      }
    </style>
<![endif]-->
  </head>
  <body>
    <div id="wrapper">
      <p id="top">Ipso lorem</p>
         
      <h2>Ipso</h2>
      <p>Lorem ipsum dolor sit amet, id sed tellus vitae, tempus sed,
      quam elit, consectetuer pede tellus sagittis tincidunt vitae
      pellentesque. Diam lectus eu velit, orci justo ut. Aptent omnis non
      morbi donec, est sodales maecenas neque nec vel egestas, dictum
      congue suscipit morbi, semper velit orci, feugiat mattis. In amet
      in, nec a quidem non ac ligula felis, justo sapien sed wisi nec,
      mollis amet ligula amet. Vestibulum consequat vestibulum morbi nulla
      velit vitae, dictum unde vestibulum vestibulum dictum eu, provident
      mauris nibh enim ultricies. Nec purus nunc amet nostra et. Quis
      massa, arcu arcu fermentum, risus metus suspendisse risus ac,
      vulputate lectus, sed rhoncus nunc pellentesque congue nulla. Aliquam
      neque proin dictumst ultrices volutpat laoreet, sed lectus nihil,
      nam eu pellentesque tempor neque. Dolor lectus luctus hendrerit
      nisl feugiat, vel posuere, nunc malesuada nec aenean faucibus
      dolor.</p>
       
      <p id="bot">Ipso lorem</p>
        
    </div>
  </body>
</html>

csuguy

1:42 pm on Aug 19, 2008 (gmt 0)

I plugged it in - certaintly looks a bit different in IE and FF. You forgot to add a height to the content area and to give it an overflow. Other than that seems to be structured ok.

swa66

3:33 pm on Aug 19, 2008 (gmt 0)

Why would I want to give it overflow and a height ?

I fail to see the reason of doing so.

But I did fix the IE6 and IE7 issues already, not yet posted ... doing so right now.

swa66

3:41 pm on Aug 19, 2008 (gmt 0)

Searching a bit I found following thread on WW:
[webmasterworld.com...]

The expressions there do work as-is for the fixed top position, but I'd need to know a bit more of that scripting language's variables to change to also work for bottom ...
Instead of trying to debug my code, I remembered Dean Edwards' IE7.js and that works too. Adding it in fixes IE6 to behave just like IE7, so the fix for IE7 needs to be made available to IE6 as well:


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Untitled Document</title>
    <style type="text/css">
      * {
        border:0;
        padding:0;
        margin:0;
      }
      #top {
        position:fixed;
        top:0px;
        background-color:red;
      }
      #bot {
        position:fixed;
        bottom:0px;
        background-color:green;
      }
      #wrapper {
        margin-top:1em;
        margin-bottom:1em;
      }
    </style>
<!--[if lt IE 8]>
    <style type="text/css">
      #wrapper {
        padding-bottom:1em;
      }
    </style>
<![endif]-->
<!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" 
    type="text/javascript"></script>
<![endif]-->
  </head>
  <body>
    <div id="wrapper">
      <p id="top">Ipso lorem</p>
        
      <h2>Ipso</h2>
      <p>Lorem ipsum dolor sit amet, id sed tellus vitae, tempus sed,
      quam elit, consectetuer pede tellus sagittis tincidunt vitae
      pellentesque. Diam lectus eu velit, orci justo ut. Aptent omnis non
      morbi donec, est sodales maecenas neque nec vel egestas, dictum
      congue suscipit morbi, semper velit orci, feugiat mattis. In amet
      in, nec a quidem non ac ligula felis, justo sapien sed wisi nec,
      mollis amet ligula amet. Vestibulum consequat vestibulum morbi nulla
      velit vitae, dictum unde vestibulum vestibulum dictum eu, provident
      mauris nibh enim ultricies. Nec purus nunc amet nostra et. Quis
      massa, arcu arcu fermentum, risus metus suspendisse risus ac,
      vulputate lectus, sed rhoncus nunc pellentesque congue nulla. Aliquam
      neque proin dictumst ultrices volutpat laoreet, sed lectus nihil,
      nam eu pellentesque tempor neque. Dolor lectus luctus hendrerit
      nisl feugiat, vel posuere, nunc malesuada nec aenean faucibus
      dolor.</p>
        
      <p id="bot">Ipso lorem</p>
        
    </div>
  </body>
</html>

I hope the link to IE7.js is authoritative enough to be allowed.
If not, somebody will surely zap it and you'll need to search for it on google.

Michizzle

11:21 pm on Aug 19, 2008 (gmt 0)

omgosh you guys.. lol i have no idea what your talking about. is this html code work well in myspace? it would be nice if my layout code and your html code were combined cause if i were to combine it myself im afraid i would mess everything upp.

oh, and to answer why there's so many style tags...it was how i found the code. i knew there was a lot and i could've cleaned it up but im lazy. and that # ....well i already had it as the # but everytime i would save the changes and then go back to it, it would just automatically change to # so i can't help that part

csuguy

12:53 am on Aug 20, 2008 (gmt 0)

Why would I want to give it overflow and a height ?
I fail to see the reason of doing so.
But I did fix the IE6 and IE7 issues already, not yet posted ... doing so right now.
...
The expressions there do work as-is for the fixed top position, but I'd need to know a bit more of that scripting language's variables to change to also work for bottom ...

The overflow and height would fix the issue with the bottom margin without having to deal with any scripting. if you don't specify the height (and width for that matter) - its just going to expand to fit the content. By setting the height (preferably with a %) you know that there will always be some space left at the bottom of the screen - providing you set overflow to auto or scroll.

csuguy

12:56 am on Aug 20, 2008 (gmt 0)

omgosh you guys.. lol i have no idea what your talking about. is this html code work well in myspace? it would be nice if my layout code and your html code were combined cause if i were to combine it myself im afraid i would mess everything upp.
oh, and to answer why there's so many style tags...it was how i found the code. i knew there was a lot and i could've cleaned it up but im lazy. and that # ....well i already had it as the # but everytime i would save the changes and then go back to it, it would just automatically change to # so i can't help that part

Like I said - post YOUR html and we'll show you how to make your CSS work around it. If you don't know how to access your html code - simply go to your page and right click it. Then select view source from the menu. If you know how - please remove your content when posting, but if not dont worry.

Michizzle

3:58 pm on Aug 20, 2008 (gmt 0)

hmm...i tried to post it all but it said that it was too much data to process or something =/

alt131

5:55 pm on Aug 26, 2008 (gmt 0)

it would be nice if my layout code and your html code were combined cause if i were to combine it myself im afraid i would mess everything upp

Once you've messed with code you'll discover its nothing to be frightened off ;}

There are many ways to do this, and most have problems. Keep in mind you are changing the user interface - which many users don't appreciate and can create accessibility issues
This code is pared back so you can see what is required, and I've used large measurements to make changes more obvious.

This example uses a border to give the page header and footer some colour. Adjust the border and heights until the div (#mydiv) holding the content is the correct measurement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
html {
border:10em solid blue;
border-style: solid none;
overflow:hidden; /*stops scroll bars*/
}
html, body {
margin:0;
padding:0;
}
#mydiv {
height:14em;
overflow:auto;/*generates scroll bars*/
}
</style>

</head>
<body>
<div id="mydiv">
<h1>My heading here</h1>
<p>My paragraph here</p>
<ol>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
<li>My numbered list here</li>
</ol>
</div>
</body>
</html>

This example uses three seperate divs to allow images, etc into the page header and footer sections.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
html {
overflow:hidden; /*stops ordinary scroll bars*/
}
html, body {
margin:0;
padding:0;
}
body {
background-color:olive;
}
#header {
height:10em;
}
#mydiv {
background-color:teal;
position:absolute;
top:10em; /*Have absolutely positioned div, must tell it where to sit*/
width:100%;
height:14em;
overflow:auto; /*generates scrollbars*/
}
#footer {
position:absolute!important;
bottom:0;
width:100%;
}
</style>
</head>
<body>
<div id="header">
<img src="" width="100px" height="100px" alt="My Logo" >
<h1>A Heading</h1>
</div>
<div id="mydiv">
<h2>Page heading here</h2>
<p>Paragraph here</p>
<ol>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
<li>Numbered list item here</li>
</ol>
</div>
<div id="footer">
<h3>Something in the footer</h3>
</div>
</body>
</html>