0

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!

4
Contributors
5
Replies
6
Views
5 Years
Discussion Span
Last Post by wilch
-1

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

Votes + Comments
the sig spammer returns from another ban only to be banned again...
0

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>
0

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

Edited by soapyillusion: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.