CODEWITHSUNDEEP
csshtml
Jon
Jon

Reputation: 3194

div box within another div

This should be really simple, and I thought I was doing it correctly...evidently not.

I need to get the light grey box that says "Test" into the darker grey area, to the right of the list on the left. It's supposed to be 270px tall (or whatever) and stretch to the right edge of the list on the left, and to the edge of the enclosing container on the right side.

Here's a Fiddle with my code. Easy peasy. Thanks, guys and gals.

Upvotes: 0

Views: 123

Answers (4)

Zuul
Zuul

Reputation: 16269

Just add float:left; to the .revision-gutter and your done!

YOUR CSS SHOULD BE

.revision-gutter {
    width:270px;
    height:inherit;
    background-color:#333333;
    overflow-y:scroll;
    float: left;
}

And he updated Fiddle!

Upvotes: 1

trapper
trapper

Reputation: 12003

You need to float:left or otherwise take the .revision-gutter div out of the flow

Floated left in my example: http://jsfiddle.net/trapper/f8yLh/1/

Upvotes: 1

David Kirby
David Kirby

Reputation: 98

add float: left; to your revision-gutter class, and that should get you started.

Upvotes: 0

justisb
justisb

Reputation: 7280

There are two approaches to solving the problem, which stems from your use of float: right. You can either 1) Move the .theater gray box above the sidebar, and it will properly float to the right side of it, or 2) You can change the sidebar to float: left, remove the float from the gray box, and add a left margin.

Here's an example of the second approach.

You could also float both the sidebar and the gray box, but I would not suggest that.

Upvotes: 3

Related Questions