Home/ Questions/Q 9082043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T20:27:46+00:00

I have a simple webpage consisting of 3 DIVs. I need a descent CSS

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0