CODEWITHSUNDEEP
htmlcss
manraj82
manraj82

Reputation: 6325

Positioning a div to the right of its containing div

I know this question will sound very basic but i just am not able to fix it.I have got a div container and im trying to position the a child div to the right.I tried positioning the container div with relative and then positioning the child div with absolute,but the parent div loses its width.enter image description here

please have a look at the image above,i need the div1 to position itself right of the divContainer. I have got other nested divs in divContainer, i need only div1 to be postioned on the right.

div#divContainer{
    margin-left:auto;
    margin-right:auto;
    top: 0px;
    width:1000px;
    background:#666;
    position:relative;

}
div#div1{
    height:45px;width:200px;
    background:yellow;
    position:absolute;

}

HTML CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title></title>

    </head>
    <body>
        <div id="divContainer">
            <div id="div1"></div> 
        </div>
    </body>
</html>

Upvotes: 8

Views: 70916

Answers (2)

Paul D. Waite
Paul D. Waite

Reputation: 98956

#divContainer shouldn’t lose its width based on your description, but it will lose its height if all its child divs are absolutely positioned.

The best method for positioning #div1 depends on whether you want it to affect the position of the other chid divs. If so, apply float: right; to #div1. If not, position: absolute; is the way to go; you may want to add padding to the right of #divContainer so that #div1 doesn’t sit on top of the other child divs.

Is this what you’re aiming for?

Upvotes: 2

Matthew Lehner
Matthew Lehner

Reputation: 4027

Assuming that #div1 is a nav type div, you should just float it to the side you want it.

div#div1{
  height:45px;width:200px;
  background:yellow;
  float:right;
}

This will position it absolutely within your document. If you're having trouble with this, you may want to spend some time reading some good resources about CSS positioning. A List Apart has great resources for CSS.

Upvotes: 13

Related Questions