All geek questions in one place

Positioning a div to the right of its containing div

I know this question will sound very simple, but I just can't fix it. I have a div container and I'm trying to put the child div to the right. I tried positioning the container div with relative, and then positioning the child div with the absolute, but the parent div loses its width. enter image description here

please take a look at the image above, I need div1 to be located directly from divContainer. I have other nested divs in divContainer, I only need div1 to be placed 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>
+4
source share
2 answers

Assuming # div1 is a nav div, you should just put it in the direction you want.

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

This will position it completely inside your document. If you are having problems with this, you can spend some time reading good CSS positioning resources. A List Apart has great resources for CSS.

+10
source

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

The best way to position #div1 depends on whether you want it to affect the position of other divs. If so, use float: right; to #div1 . If not, position: absolute; - this is the way; you may want to add an indent to the right of #divContainer so that #div1 does not sit on top of other child divs.

Is that what you strive for?

+2
source

Source: https://habr.com/ru/post/1345441/

More articles:


All Articles