CODEWITHSUNDEEP
cssxhtml
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

positioning div elements using css

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

Upvotes: 0

Views: 648

Answers (2)

user1432124
user1432124

Reputation:

Use 

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

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

Upvotes: 3

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you could use position absolute + relative
assign position: relative to the .header element, then add your icon within using position: absolute: top and left property applied to the icon will be referred respect to the header element (because it's the first non-static element parent of the icon)

The main advantage of this technique is that the presence of the icon won't affect at all the position of other elements inside header (since is absolute positioned)

Upvotes: 2

Related Questions