Question

Using html/CSS I am trying to put a little div with two images inside it to the bottom right outside of a large centered(with l/r margins set to auto)vertically elastic, but 400px wide div filled with lots of stuff inside. I just can’t seem to get exactly what I need.

Here is what I’m trying to get so that if the window is too wide, the green box stays right next to the red one with the empty space going to the right of both boxes. If the window isn’t wide enough, the user would have to scroll to the right to see the green box.

desired layout

I feel like I’m just missing some super easy solution to this. Float doesn’t work because that aligns the green box all the way to right and puts the empty space between the green and red. I tried a variety of ‘position’ css arrangements but had trouble with wanting the green box outside the red box.

EDIT(more details were requested):

I tried making the red box(#main) position relative, and the green(#sub) position absolute. I played around with various left:px, right:px coordinates but found that when I got it outside the red box it became invisible. I tried a variety of combinations of the position tags combined with align tags. I tried inline block(which I’m not even sure is relevant here!).

Then I was reading something about making a dummy wrapper parent div so I tried to do that and made a #wrapper which I tried to experiment with position relative/absolute but it ended up messing with the layout above the red block(really just a banner and an h1).

I’m sorry I don’t have actual code to post but every time I tried something and it didn’t work I just deleted the tags so I wouldn’t confuse myself with all this extra CSS around. I’ve been working on this little thing for a few days now. Right now my code is already little bits left over from previous attempts:

#main   {width:400px;
 margin-left: auto;
 margin-right: auto;
 padding-bottom:0px;
 overflow:hidden;}

#sub    {right:-10px;
 bottom:100px;
 float:right;}

Answer 1

HTML

<div id="bigbox">
  <!-- content goes here -->
  <div id="littlebox">SomeImages</div>
</div>

CSS

#bigbox {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

#littlebox {
  width: 150px;
  position: absolute;
  bottom: 5px;
  right: -160px; // width + a 10px margin if desired
}

http://jsfiddle.net/eLT9U/1/