Home/ Questions/Q 6970757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:45:03+00:00

I’m trying to create a template webpage that uses the golden ratio for proportion.

  • 0

I’m trying to create a template webpage that uses the golden ratio for proportion. However, it appears I’m not doing it correctly.

I would like some advice on the proper use of:

  1. div tags for laying out panels on a page
  2. CSS and the position attribute
  3. Any other tags or tips that will help me achieve an attractive page

HTML:

<html>
<head>
    <title>Golden Ratio</title>
    <link rel="StyleSheet" title="Default" href="gr.css" type="text/css">
</head> 
<body>          
    <div id="header">
    </div>  
    <div>
    </div>
    <div id="bodyleft">
    </div>      
    <div id="bodyright">
    </div>      
    <div id="footer">
    </div>
</body>
</html>

CSS:

body {
    background-color: white;
}

#header {       
    width: 960px;
    height: 100px;
    background-color: red;
}

#bodyleft {
    position: absolute;
    top: 100px; 
    width: 592px;
    height: 700px;
    background-color: blue;
}

#bodyright {
    position: absolute;
    top: 110px;
    left: 610px;
    width: 368px;
    height: 700px;
    background-color: green;
}

#footer {
    position: absolute;     
    top: 800px;
    width: 960px;
    height: 100px;  
    background-color: black;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I did some rather extensive golden ratio work in this post Is there a CSS way to position an HTML element vertically following the golden ratio? that may be helpful to you.

    • 0