CSS: Absolute Positioning problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

CSS: Absolute Positioning problem

Post 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?
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post 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;
}
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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>
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

Easy to forget when you're concentrating on the CSS :wink:
Post Reply