Hello all,

I'm trying to create a CSS layout for a web application I am developing. The layout that I am aiming for is the following:

  • Header: Fixed height, 100% width, situated at the top.
  • Footer: Fixed height, 100% width, situated at the bottom.
  • Control panel: Fixed width, situated on the left and has scrollable content.
  • Map container: This is the main content area. I want this to expand to fill the remaining space between the other three items.

A picture describing what I would like can be found here.

My attempts so far have gotten me very close to my target. Everything works as I want it to apart from the content area. The right edge of the content area is not the right edge of the browser, but is even further to the right than that.

How can I change my CSS to match my aim?

Here is the CSS I currently have:

<style type="text/css">
        <!--
        html { overflow: hidden;}

        body {
          margin: 0;
          padding: 0;
          height: 100%;
        }

        #header, #footer, #controlpanel, #mapcontainer
        {
            position: absolute;
            width: 100%;
            left: 0;
            background: #BDBDBD;
        }

        #header 
        {
            top: 0;
            height: 50px;
            text-align: center;
        }

        #footer
        {
            bottom: 0;
            height: 50px;
            text-align: center;
        }

        #controlpanel 
        {
            top: 50px;
            bottom: 50px;
            width: 250px;

            overflow: auto;

            padding-bottom: 20px;

            text-align: center;
            background: #E6E6E6;
        }

        #mapcontainer 
        {
            top: 50px;
            bottom: 50px;
            left: 250px;
            right: 0;
            background: #F00
        }
            #btnShowHQ
            {
                width: 113px;
            }
            #Button1
            {
                width: 72px;
            }
            #btnAddressSearch
            {
                width: 70px;
            }
        -->
    </style>

Thanks

--Amr

2 answers

0
points
This was chosen as the best answer

Thanks for your suggestion Stephen. I have been thinking some more about my original attempt and have discovered by it wasn't working.

My original style declares this section:

#header, #footer, #controlpanel, #mapcontainer
        {
            position: absolute;
            width: 100%;
            left: 0;
            background: #BDBDBD;
        }

As you can see, all the div containers have width declared to 100%. It turns out that in my #mapcontainer section, this width declaration was overriding my right: 0; statement. Removing #mapcontainer from this declaration and adding position absolute to the individual declaration for #mapcontainer makes the style work fine. Here is my modified version:

<style type="text/css">
        <!--
        html { overflow: hidden;}

        body {
          margin: 0;
          padding: 0;
          height: 100%;
        }

        #header, #footer, #controlpanel
        {
            position: absolute;
            width: 100%;
            left: 0;
            background: #BDBDBD;
        }

        #header 
        {
            top: 0;
            height: 50px;
            text-align: center;
        }

        #footer
        {
            bottom: 0;
            height: 50px;
            text-align: center;
        }

        #controlpanel 
        {
            top: 50px;
            bottom: 50px;
            width: 250px;

            overflow: auto;

            padding-bottom: 20px;

            text-align: center;
            background: #E6E6E6;
        }

        #mapcontainer 
        {
            position: absolute;
            top: 50px;
            bottom: 50px;
            left: 250px;
            right: 0;
            background: #F00
        }
        -->
    </style>
Answered over 6 years ago by Amr Bekhit
  • You should not award yourself a "best answer". Richard Grevers over 6 years ago
0
points

I gave it a shot: added a container to the 2 middle sections and some tweaks to the positioning.

<style type="text/css">
        <!--
        html { overflow: hidden;}

        body {
          margin: 0;
          padding: 0;
          height: 100%;
        }

        #header, #footer, #controlpanel, #mapcontainer, #container
        {
            position: absolute;
            width: 100%;
            left: 0;
            background: #BDBDBD;
        }       

        #header 
        {     
            top: 0;
            height: 50px;
            text-align: center;
        }

        #footer
        {
            position: relative;
            bottom: 0px;
            height: 50px;
            text-align: center;
        }

        #container 
        {
            position: relative;
            top: 50px;        
            height: 95%;
        }

        #controlpanel 
        {              
            width: 20%;
            height: 100%;
            text-align: center;
            background: #E6E6E6;
        }

        #mapcontainer 
        {             
            left: 20%;
            background: #F00;
            width: 80% !important;
            height: 100%;
        }

        -->
    </style>

...

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

  <div id="container">
        <div id="controlpanel"></div>
        <div id="mapcontainer"></div>
  </div>

  <div id="footer"></div>
Answered over 6 years ago by Stephen