Forum Moderators: not2easy
I'm just starting out with CSS-based layout, and I'm discovering that learning CSS is really an experimental science.
I have two questions related to the simplified layout code below. I want two or more boxes (boxes 3a,b,c etc) to be side by side within a "row" called box2. I want box2 to expand in height to correspond to the highest item inside it.
I can put the boxes side by side (as opposed to vertically, which happens when everything is position:relative) by specifying one of the box3's with relative positioning and the rest with absolute. The problem with this is that only the relative box defines the height of box2, and box2 is completely unaware of the absolute box3's, so they can fall outside of box2. Of course, I realize what's happening is due to the definition of absolulte positioning.
My questions are:
1) Is this general approach worth considering at all?--is there a CSS alternative, or should I just use tables?
2) Can this approach be made to work so that box2 is aware of the absolutely-positioned boxes inside of it, and adjusts its height to contain them?
Thanks in advance for any advice.
<html>
<head>
<style type="text/css">
#box1{
position: absolute;
left: 200px;
top: 50px;
width: 600px;
height: 600px;
background-color: #AAA;
}
.box2{
position: relative;
margin-top: 10px;
margin-left: 10px;
left: 20px;
top: 0px;
width: 500px;
background-color: #CCC;
}
.box3a{
position: relative;
top: 0px;
left: 0px;
width: 100px;
background-color: #FF0;
}
.box3b{
position: absolute;
top: 0px;
left: 200px;
width: 100px;
background-color: #FFF;
}
.box3c{
position: absolute;
top: 0px;
left: 350px;
width: 100px;
background-color: #F0F;
}
</style>
</head>
<body>
<div id="box1">
<div class="box2">
<div class="box3a">
<p> xxxxx xxxxx xxxxx xxxxx </p>
</div> <!--box3a-->
<div class="box3b">
<p> xxxxx xxxxx xxxxx xxxxx xxxxx
xxxxx xxxxx xxxxx xxxxx</p>
</div> <!--box3b-->
<div class="box3c">
<p> xxxxx xxxxx xxxxx </p>
</div> <!--box3c-->
</div> <!--box2-->
</div> <!--box1-->
</body>
</html>
SN
If there are max 3 boxes in the row, then a way to simulate the effect is similar to some of the common 3-column layout techniques. e.g. have them all start at the same absolute position, but for the middle one, define a left and right margins the same width as the left and right boxes respectively; then have the background colour of the containing div be the same colour as the left and righ boxes (assuming they are the same).
Shawn
.box3{
float: left;
margin-left: 1em;
width: 100px;
background-color: #FF0;
}
Now box2 is the height of the largest of the box3's. There is not a lot of flexibility for horizontal positioning, but it works for my current need.
Thanks folks.
