Page 1 of 1

CSS: Absolute Positioning problem

Posted: Tue Oct 14, 2003 9:48 pm
by nigma
Say you have two boxes, one absolutely positioned at the right edge of browser and has a width of 150px, the other not absolutely positioned.

Box1 has a lot of content inside it.

Is there a way to alter the following CSS so that Box1's content drops down a line when it encounters Box2?

Body:

Code: Select all

body {
	margin: 0;
	padding: 0;
}
Boxes:

Code: Select all

#box1 {
	margin: 0;
	padding: 0;
	border: 1px dashed black;
	background: #999;
}

#box2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	border: 1px dashed red;
	background: #eee;
}
Thanks for any help provided?

Posted: Tue Oct 14, 2003 10:53 pm
by McGruff
Not sure what you're trying to do. Do you want box1 to wrap around box2?

This will do the trick (stick box2 div inside box1 div).

Code: Select all

#box1 {
   border: 1px dashed black;
   background-color: #999;
   height: 500px;
}

#box2 {
   width: 150px;
   border: 1px dashed red;
   background-color: #eee;
   height: 100px;
   float: right;
}

Posted: Tue Oct 14, 2003 11:21 pm
by nigma
Hey McGruff, thanks a bunch for being patient and not chewing me out for posting something that might seem simple if you have read some tutorials. I was doing the opposite of what you are saying.

I had:

Code: Select all

<div id="box1"> <!-- should float left -->
stuff here
</div>
<div id="box2"> <!-- should float right and box1 should wrap around -->
stuff here
</div>

Posted: Tue Oct 14, 2003 11:28 pm
by McGruff
Easy to forget when you're concentrating on the CSS :wink: