CSS Frames

**balushahi** · 03-13-2008, 02:32 PM

I got a CSS frames layout from Dynamic drive (http://www.dynamicdrive.com/style/la...frames-layout/) with left, top & main divs. However I need another div before main which works just like it except it doesn't scroll. Just wondering how do I place that frame?

Thanks in advance for your help.

**Nile** · 03-13-2008, 02:55 PM

What do you mean by one that doesn't scroll?

**boogyman** · 03-13-2008, 02:56 PM

Code:

overflow:scroll;

apply that CSS style to whatever element you wish to scroll

**balushahi** · 03-13-2008, 03:13 PM

Thanks I know how to scroll or not:

what I"m looking for is I need to put a top most css frame with 100% width for breadcrumbs. It would move the left, header & main frames down by whatever height I would set that to, like 50px;

the other one I need to place it below header and left of main frame. Please view the example page and you'll know what I'm talking about. Its on dynamic drive itself & I need to just modify it a little by adding 2 more frames.

Thanks

**balushahi** · 03-13-2008, 03:18 PM

Thanks for your reply.

I know how to scroll a div with overflow property.
Please view the example on dynamic drive. I need to modify that page by adding 2 more frames on that page
1 - on top of the page with 100% width, so left=0

2- one under the header and to the left of main frame.

[breadcrumbs header]
------------------------------
left frame | main header frame
--------------------
| middle frame | main frame

**Medyman** · 03-13-2008, 03:20 PM

Is this what you're looking for?

HTML:

Code:

<div id="header">
       Header
</div>

Add that right below the <body> tag

CSS:

Code:

div#header {  height:50px; width:100%; }

For your second one:

Code:

<div id="middleframe">
     Middle Frame
</div>

Place this INSIDE the maincontent div

CSS:

Code:

div#middleframe { float:left; background:red; height:300px; }

**balushahi** · 03-13-2008, 04:04 PM

When I added your given code for new divs, the results were like this -

In FF -
new header
------------
left | old top frame
| new middle layer [old main frame] (the new middle layer also scrolls with the main frame, it needs to be separate independent frame. Main frame picked the height of this new middle layer and doesn't show the scrolls)

{The above layout is what basically I'm going for. all those layers need to behave like independent frames}

In IE, however, its like this:
left | old topframe
| new header
| middle layer (this should not scroll - overflow:hidden & no set height, needs to be independent frame (should behave just like the left frame)
| old mainframe (scroll doesn't show at all)

Does that make sense?

Thread: CSS Frames

Thread Tools

Search Thread

CSS Frames

The Following User Says Thank You to Medyman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions