Fabrice's weblog

Tools and Source

News

My .NET Toolbox
An error occured. See the script errors signaled by your web browser.
No tools selected yet
.NET tools by SharpToolbox.com

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

.NET jobs

Emplois .NET

Tuneo

ASP.NET Hosting transatlantys

Contact

Me

Others

Selected content

Archives

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