Member Avatar for soapyillusion

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
  • 138 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by wilch

Dani AI

Generated

Quick checklist and debugging notes that tie together the thread so far (especially 's suggestion about a positioned parent):

  • The parent container must have position: relative so absolutely positioned children use it as their containing block. Confirm all four small divs are actually inside that parent in the HTML—from the snippet posted by one of the posters was outside the container and another ID was missing, which would explain missing corners.

  • Don’t mix float or position: relative on the child boxes if you intend them to be absolute. Absolutely positioned elements should use explicit offsets (top, right, bottom, left) — and remember to include units (for example use top:10px, not top:10). Invalid declarations are ignored by the browser and can make elements stack unexpectedly.

  • When multiple absolutely positioned elements share the same offsets they will overlap; the later DOM element will paint on top. Use distinct offsets for each corner (top+left, top+right, bottom+left, bottom+right) and add z-index only if you need to change stacking order. For reference, see the CSS position and z-index docs on MDN: position and z-index.

Practical troubleshooting steps:

  1. Verify HTML structure: all four corner divs inside the container.
  2. Give the container position: relative.
  3. Give each child position: absolute and set its corner offsets with px (or %) values.
  4. Remove float and unnecessary margins from those children.
  5. Temporarily set contrasting background colors/borders to see each box, and inspect with the browser dev tools to confirm coordinates and computed styles.
  6. If children are being clipped, check the parent’s overflow (overflow:hidden will cut off anything placed outside).

Following those steps will show whether the issue is incorrect HTML placement, invalid/absent offsets, overlapping stacking, or clipping by overflow.

Recommended Answers

All 5 Replies

Member Avatar for logoonlinepros

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
Member Avatar for simplypixie

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

Member Avatar for wilch

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>
Member Avatar for soapyillusion

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:

Edited by soapyillusion because: n/a
Member Avatar for wilch

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.