Hey all I'm trying to make a website layout that has a container div floated to the right side.. with some minor padding of course for cleaner look. Within that container div I would like to have 4 small div's close to each of the 4 corners of the container. However I've been having quite a few problems trying to do this...

Code in HTML file:

<div id='rightContainer'>

<div id='poster2'></div>
<div id='poster3'></div>

</div>
<div id='poster1'></div>

Heres the CSS sheet:

#poster1{
height:366px;
width:592px;
margin-left:19px;
background-color:black;


}

#rightContainer{
	float:right;
	margin-right:425px;
	height:366px;
	overflow:hidden;
	position:relative;
	
	
	

}

#poster2{

height:171px;
width:205px;
background-color:black;
margin-left:23px;
margin-bottom:23px;




}

#poster3{
	

height:171px;
width:205px;
background-color:black;
margin-left:23px;




}

#poster4{
height:171px;
width:205px;
background-color:red;
position:relative;
float:right;



}

Thanks all!

Recommended Answers

All 5 Replies

Very helpful script for me i like to bookmark it or save it for my future help.

commented: the sig spammer returns from another ban only to be banned again... -3

What is the problem exactly - you don't say?

I believe this is what you're trying to achieve.

<div style="float:right; position:relative; width:250px; height:250px; background-color:#BBB;">
	<div style="position:absolute; top:10; left:10; width:100px; height:100px; background-color:#333;"></div>
	<div style="position:absolute; top:10; right:10; width:100px; height:100px; background-color:#555;"></div>
	<div style="position:absolute; bottom:10; left:10; width:100px; height:100px; background-color:#777;"></div>
	<div style="position:absolute; bottom:10; right:10; width:100px; height:100px; background-color:#999;"></div>
</div>

I tried doing something similar to it , and In my browser(IE,Firefox & Chrome) I see the same result..which is I only see one of the 4 divs in the container... It's weird it blocks out three of them because all 4 of them are using absolute...

This is what Im trying to do here is an image of it:
http://darkmagicstudios.net/help.png

Did you make you parent div have position:relative ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.