PDA

Click to See Complete Forum and Search --> : Create a dynamic sized DIV

devinpitcher
06-05-2009, 03:10 PM
Ok, so here is the situation. I have a page with a div on the side, on top, and on bottom. The div on the side is on the left at 225px. The div on top is 25px, and the div on bottom is 20px. What I want is a div in the middle of them all, and so it resizes (and is scrollable) based on the visitors browser size.
What I have works, but will not scroll, and is not the right width so I have to center all my content in it. Its just using the width of the browser, but pushed over a bit with a margin, so its actually hanging over underneath the sidebar.

A quick sketch of what I have is in the attachments.

Any ideas?

Key:
menu is the top.
bottom_menu is the bottom menu.
content is the part I need help with, in the center.
sidebar is what goes on the side.

CSS:

@charset "UTF-8";
/* CSS Document */

html **
height:100%;
}

img
**
border-style: none;
color: #FFF;
text-align: center;
}

body **
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:#000;
}

.sidebar **
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
width:225px;
min-height:100%;
position:fixed;
top:25px;
left:0px;
overflow:hidden;
padding-left:5px;
padding-top:5px;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}

.menu **
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:25px;
position:fixed;
top:0px;
left:0px;
overflow:hidden;
padding-left:5px;
}

.content **
width:100%;
top:25px;
height:100%;
overflow:hidden;
position:fixed;
padding-left:5px;
padding-top:5px;
background-color:#FFF;
margin-left:112px;
font: 14px Helvetica, Arial, Sans-Serif;
}

.bottom_menu **
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:20px;
position:fixed;
bottom:0px;
left:0px;
overflow:hidden;
padding-left:5px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
}


HTML (DIV Placement):

<body>
<div class="sidebar">CONTENT IN SIDEBAR</div>
<div class="menu">CONTENT IN TOP MENU</div>
<div class="bottom_menu">CONTENT IN BOTTOM MENU</div>
<div class="content">CONTENT IN CONTENT</div>
</body>
peachskittle
06-05-2009, 04:27 PM
What did you mean you want the middle content to resize and be scrollable? Do you want the middle content area to have its own scroll bar? As for resizing, do you mean you want a layout that will change widths depending on the browser and move around as you make the browser bigger or smaller?
devinpitcher
06-05-2009, 05:36 PM
What did you mean you want the middle content to resize and be scrollable? Do you want the middle content area to have its own scroll bar? As for resizing, do you mean you want a layout that will change widths depending on the browser and move around as you make the browser bigger or smaller?

Yes and Yes.
I have the resizing as they change the size of the browser working already. I just need the content part fixed.
I just want the content are take up the rest of the space that the other DIVs did not take up in the middle.
peachskittle
06-05-2009, 09:28 PM
Is there a reason you wanted to fix all of the divisions on your page as you have? As opposed to making the top div, well the top, as that's where it will default to. Then float the sidebar to one site and and just let the bottom bar display at the end of your sidebar/content? Like that, the content should naturally take up the remaining space.