Stack 3 DIVs to fill the screen using CSS, with middle DIV having fixed height

Question

I have a simple webpage consisting of 3 DIVs. I need a descent CSS styles that would do the following:

top and bottom divs have to be of fixed minimal width (e.g. 20 px, if not possible, down to 0 px).

middle div should be of fixed width, eg 1000 x 700 px.

When I set fixed width/height for every div, everything is fine except the screen is not stretching. If I set top and bottom divs height to auto, I have second (fixed size) div to be attached to the top side of the screen, and top div size is 0, also bottom size di is strange size.

HTML code with all CSS attributes:

<body style="background-color:#030303; margin:0px; padding:0px;">
<!--head-->
<div style="margin:0 auto; width:100%; height:auto; border:0px solid red; background-color:#181818; position:relative;">
 (some images)
</div>
<!--gallery-->
<div id="galleria" style="height:700px;width:1000px; margin:0 auto; border:1px solid green;   ">
    <a href="img/img1.jpg"><img src="img/thumb1.jpg" data-title="My title" data-description="My description"></a>
    <a href="img/img2.jpg"><img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>
<!--footer-->
<div style="  margin:0 auto; top:0px; width:100%; height:auto; position:relative; border:1px solid red; line-height:128px; background-color:#181818">
    <div align="center" >
     (some images)
     </div>

</div>
</body>

Semicolon · Accepted Answer · 2013-01-02 19:11:26Z

0

Your question is a bit confusing (when you say width, do you mean height?). If I understand right, you want the three divs to add up to the total height of the viewport. I know of two ways to do this -- with absolute positioning or with display: table styles. In my experience, the first is more efficient.

<div id="topbar">Top</div>
<div id="mainarea">Middle</div>
<div id="footbar">Botton</div>

#topbar, #mainarea, #footbar { position: absolute; overflow: auto; }
#topbar { height: 20px; top: 0; left: 0; right: 0; }
#mainarea { top: 20px; left: 0; right: 0; bottom: 20px; }
#footbar { height: 20px; left: 0; right: 0; bottom: 0; }

If you want to actually assign a width, too, then get rid of the 'right' styles and assign the same width to all three (it's generally unwise to force a width on people, though).

answered Jan 2, 2013 at 19:11

Semicolon

7,6232 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shrey Gupta Over a year ago

The issue is that absolute positioning for just a site layout is a bad idea, as it messes up with the flow of the page from the very get-go. Also, many declarations like vertical-align would break in absolutely positioned parent divs.

Semicolon Over a year ago

It's hard to know whether that's true without knowing what the site is intended to be, Bagavatu. This kind of layout is standard and essential for web apps for example, where you want scrolling to take place, if at all, within a 'workspace' area. I'm curious what you mean about vertical-align, though, because I've had no problem with vertical align in absolutely positioned layouts before.

Lowkase · Accepted Answer · 2013-01-02 19:10:39Z

0

First lets get the styling out of your HTML and into a proper CSS format. Next I stripped the HTML down to a simple form so you you can help define your question better:

http://jsfiddle.net/HF6Cc/

HTML:

<body>

<!--head-->
<div class="head">header</div>

<!--gallery-->
<div id="galleria" class="middle">
    <a href="img/img1.jpg"><img src="img/thumb1.jpg" data-title="My title" data-description="My description"></a>
    <a href="img/img2.jpg"><img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>

<!--footer-->
<div class="footer">footer</div>

</body>

CSS

body { width:1000px; margin:0; padding:0; }

.head { margin:0 auto; background-color:orange; }

.middle { margin:0 auto; background-color:lime; }

.footer { margin:0 auto; background-color:yellow; }

Now, what exactly are you looking to do with this layout?

answered Jan 2, 2013 at 19:10

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

2 Comments

onkami Over a year ago

Of course I would use classes but for tweaking the direct approach is better, as I do not have to jump between HTML and CSS files. It keeps work fast. The middle div should hold a gallery of images so it needs certain width and height. Fixed W/H is also necessary for the internals of the JS gallery (galleria.io). Yet again: I need middle div to stay the same and height of head/footer change to fill the rest of the page. Their heights should change according to browser's size. If they are required to be less than 20 px height, they should stay at 20px and scroller should appear.

Semicolon Over a year ago

Does this work? Try setting different heights for #galleria to see if it's the behavior you have in mind: jsfiddle.net/cdyub/23

Collectives™ on Stack Overflow

Stack 3 DIVs to fill the screen using CSS, with middle DIV having fixed height

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related