Fabrice's weblog

Tools and Source

News


Read sample chapters or buy LINQ in Action now!
Our LINQ book is also available on AMAZON

.NET jobs

Emplois .NET

The views expressed on this weblog are mine alone and do not necessarily reflect the views of my employer. The content of this weblog is independent from Microsoft or any other company. transatlantys hot news

Contact

Me

Others

Selected content

CSS frame

Similar to everyone's favorite CSS tip to have scrolling areas in html pages, here is what I'd call a CSS frame.

This quick and easy tip let's you, for example, have a fixed menu on a page without frames.

The secret sauce is in the source. Extract:

<STYLE>
#menu
{
float: left;
margin-right: 10px;
margin-top: 10px;
}
#content
{
overflow: auto;
height: 95%;
border-style: solid;
border-width: 1px;
border-color: black;
padding-left: 10px;
line-height : 1;
}
</STYLE>

Comments

Emil Stenström said:

I made a post about how to <a href="http://friendlybit.com/css/frames-or-iframes-with-css/">fake frames</a> some time ago for those interested. The idea is the same as your example above.

# July 17, 2006 6:08 PM

Lewis said:

hi, i found that by combining the overflow property with anchor points really helps the feel of frames, you can actually position the width of the 'frame' behind a floating div to hide the scroll bar too. by repeating the anchor navigation in the same place on each seection of content gives a good impression of frames. ANy one tried this?
# October 10, 2006 5:44 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)