Home/ Questions/Q 7947197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:21:51+00:00

I always seem to have problems with CSS layouts. What is the best to

  • 0

I always seem to have problems with CSS layouts. What is the best to position ‘div’ elements on the page. For example i have created the following:

See my jsfiddle: http://jsfiddle.net/JJw7c/3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example</title>
</head>
<body>
    <div class="container">
        <div class="header">
            this is the header
            <div class="menu">
                menu goes here
            </div>
        </div>
        <div class="main">
            main content goes here
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</body>
</html>

body
{
    margin:10px;
}
.container
{
    border:1px solid black;
    min-height:400px;
    width:100%;
}

.header
{
    border:1px solid red;
    height:100px;
}

.menu
{
    border:1px solid green;
    height:20px;
    width:50%;
    float:right;
}

.main
{
    border:1px solid grey;
    min-height:100px;
    margin:20px;
}

.footer
{
    border:1px solid green;
    width:100%;
    padding-top:10px;
}

Lets say i want to position an icon within the lower right of the header but i want to be specific.

Do i use position relative then top:20px etc etc.. or position:absolute? or do i use margin-right:200px? or could i use floats and then position absolute? <<< Please can you explain when I would use these and if possible update my jsfiddle with each example.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use 

    position:absolute;
bottom:0px;
right:0px;

    to the icon class and add position:relative; to .header

    • 0