Home/ Questions/Q 8544173
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:29:26+00:00

I am trying to learn css. up to now I have been lagging behind

  • 0

I am trying to learn css. up to now I have been lagging behind and using tables to manage my page layout.

I want to migrate to css but am having a few issues aceiving this.

My current page layout using a table:

enter image description here

I tried to recreate this layout using css as per code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>page layout</title>
    <style type="text/css">

        html, body {
            text-align:center;
        }

        #wrapper {       
            margin: 0 auto;       
            width: 1200px; 
            text-align:left;}

        #header {
            height: 100px;
            overflow: auto;
            background: green;
        }

        #main {
            background: yellow;
            float: left;
            width: 800px;
            height: 400px
        }

        #menu {
            background: red;
            float: left;
            width: 200px;
            height: 200px
        }

        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px
        }
        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px
        }
        #adverts {
            background: pink;
            float: left;
            width: 200px;
            height: 400px
        }

        #footer {
            background: grey;
            float: left;
            width: 1200px;
            height: 100px
        }


    </style>

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

<div id="menu">
    menu
</div>
<div id="pics">
    pics
</div>
<div id="main">
    main
</div>

<div id="adverts">
    adverts
</div>

<div id="footer">
    footer
</div>

</body>
</html>

This produces the following output:
enter image description here

As you can see the pics div is in the incorrect place, this should be under the menu div not at the bottom of the page?

My questions, how do I get the pics div in the correct place? and secondly how do I center the entire page?

Lastly, is this the best method of managing my page layout? what will happen in the event that my ‘main’ div is too full of information? will it autoadjust its height in order to display all the info? is this what the overflow: auto will allow?

Appreciate the help as always,
R

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your pics div is out of sequence. It needs to appear before the footer div:

    You have this:

    <div id="footer">
    footer
</div>

<div id="pics">
    pics
</div>

    You need to have this:

    <div id="pics">
    pics
</div>

<div id="footer">
    footer
</div>

    In order to get the menu and pics divs arranged the way you want, create a div that wraps (contains) them both (menupics in my CSS/HTML below).

    This code works just as you have it laid out above:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>page layout</title>
    <style type="text/css">

        html, body {
            height: 100%;
            width:1200px;
            text-align:center;
        }

        #header {
            height: 100px;
            overflow: auto;
            background: green;
        }

        #main {
            background: yellow;
            float: left;
            width: 800px;
            height: 400px;
        }

        #menupics {
          float: left;
          width: 200px;
          height: 400px;
        }

        #menu {
            background: red;
            float: left;
            width: 200px;
            height: 200px;
        }

        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px;
        }

        #adverts {
            background: pink;
            float: left;
            width: 200px;
            height: 400px;
        }

        #footer {
            background: grey;
            float: left;
            width: 1200px;
            height: 100px
        }


    </style>

</head>
<body>

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

<div id="menupics">
  <div id="menu">
    menu
  </div>
  <div id="pics">
    pics
  </div>
</div>

<div id="main">
    main
</div>

<div id="adverts">
    adverts
</div>


<div id="footer">
    footer
</div>

</body>
</html>
    • 0