How to position a Div within another Div in HTML/CSS?

N

Nathan W

New member
My structure's like this:

<div id="container">

<div id="example">
Content Content Content
</div>

</div>

What css code do I need to use so that I can position this Div anywhere I want in the container. I have tried to use: position:absolute; but it doesn't flow so to speak as it's in a world of it's own. Any ideas will be appreciated, thanks!
 
Positioning Div tags in an HTML document is tricky, and made doubly so because different browsers do interpret your CSS differently.

First of all, when you are trying to get it right, make sure that you color the div tags so you can see where they are:

<div id="container" style="background-color:blue;">

<div id="example" style="background-color:green;">
Content Content Content
</div>

</div>

From there, there are a number of different ways that you could go about it. I'll show you a lilttle and then you can play with it from there to get exactly what you were looking for.

Remember to first clear the body (margins and so on) just to make sure your div tags have the option of moving right up to the top or sides.

Also try to play with adding display:block to one or the other div tags and seeing what that does. I use that a lot for floating two columns nexto each other.

with postition:absolute:

<html><head><style type="text/css">
body{margin:0;padding:0;border:0;}

#container{
position:absolute;
margin:10px;
padding:10px;
postion:absolute;
background-color:blue;
}

#example{
margin:20px;
padding:10px;
postion:absolute;
background-color:green;
}

</style></head><body>

<div id="container">
stuff stuff stuff
<div id="example">
Content Content Content
</div>

</div>

</body></html>

Or with position:relative;

Just do the same, but change absolute to relative and see what changes.

Or take them out and add float:left to one or both divs.

You can leave out any position or float as well.
 
Back
Top