Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Positioning a div to the right of its containing div

Tags:

html

css

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>
like image 312
manraj82 Avatar asked Mar 27 '11 17:03

manraj82


1 Answers

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.

like image 173
Matthew Lehner Avatar answered Sep 20 '22 16:09

Matthew Lehner