CODEWITHSUNDEEP
cssheight
samyb8
samyb8

Reputation: 2588

CSS column on the right, same height as container

I have a container with 2 divs inside it. One takes the left side of the container and the second one (rightBarItems) should be positioned on the right side but I want its height to be the same as the Container's height. Basically, I am creating a column to the right.

HTML:

<div class="container">
        <div class="itemMain"><?php include("itemMain.php"); ?></div>
        <div class="rightBarItems"><?php include("rightBarItems.php"); ?></div>
</div>

CSS:

.container {
    overflow: hidden;
    background: white;
    padding-right: 20px;
    -webkit-box-shadow: 4px 2px #492409,  -4px 0 2px #492409;
    -moz-box-shadow: 4px 0 2px -6 #492409,  -1px 0 2px #492409;   
    box-shadow: 4px 0 2px  #492409,  -4px 0 2px #492409;
}

Upvotes: 2

Views: 335

Answers (2)

Olli Tyynel&#228;
Olli Tyynel&#228;

Reputation: 576

Two drity solutions (both of them have their issues)

The first:

1) postion relative the container 2) and float the left element. 3) position absolute the right element and set its top:0 and bottom:0, right and the width

The issue of course with this is that the left cotainers content should be larger than the right ones

The second (if you can add more elements to the html): 1) postion relative the container 2) float the right and the left container 3) create a new div that is the "bg" for the right element 4) position absolute that the same way in the previous: right:0, top:0, bottom:0 and the width 5) tweak the z-index if necessary

:O

edit:

quick sample of the latter solution: http://jsbin.com/ecaced/1

Upvotes: 2

Kwon
Kwon

Reputation: 390

height: auto; or height: 100%; should work.

Upvotes: 0

Related Questions