Layout question

Hi all. I just receive a layout, from one of the famous Photoshop designers, which you can see here. I don’t have any problems with the two div’s on the right since I can use one of Paul O’B s techniques with absolute div’s. I only wonder how to line up those two pictures on the left (aligned with the bottom of the div’s right). Any suggestions would be highly appreciated.

Thanks in advance

OK I think I made it

<style type=“text/css”>
<!–
html,body {
height:100%;
}
.wrapper {
background-color: #CCCCCC;
width:600px;
margin:0 auto;
overflow:hidden;
position:relative;
}
.middle {
background-color: #FFFF00;
width:200px;
float:right;
}
.right {
background-color: #33CC66;
height:100%;
width:200px;
float:right;
}
.top {
background-color: #000000;
height:100px;
width:50px;
}
.bottom {
background-color: #ffffff;
height:150px;
width:100px;
border:1px solid;
}
.container {
height:250px;
position:absolute;
bottom:10px;
left:10px;
width:150px;
}
–>
</style>
</head>

<body>

<div class=“wrapper”>

<div class=“container”>

&lt;div class="top"&gt;&lt;/div&gt;

&lt;div class="bottom"&gt;&lt;/div&gt;

</div>

<div class=“middle”>
<p>sdfsdf</p>

</div>

<div class=“right”><p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>dfsdf</p>
<p>sdfsdfsdf</p>
<p>sdfsdf</p>
<p>sdf</p>
<p>111111</p></div>

</div>

</div>

With this you can stretch green column depending on content. 2 divs which represent two images in your design will always be in a same position in regard to wraper div which means they will always be at the bottom.

You know those two right div’s will grow accordingly to the content in the left one. So that is not a solution in my opinion.

So when the content inside the middle panel becomes longer the image panes to the left should stay aligned to the bottom, correct? Though, thinking about it that doesn’t make much sense since given a very long piece of content those image panes will be at the very bottom. Also, there is no reason to use absolute positioning here, floating will be much more flexible.

The part where you see the word Homepage will be different over different pages. Some of them will be feeded by database content. Like I said I don’t have any problem with the two right columns it’s more that I need to line up the pictures on the left, even if the height of those two right columns will be different over the different pages.

Which part of page will contain changeable content?

Make three divs, one with two photos on the left, one with homepage box and one with photos on the right side. You should put them all in some kind of container or wrapper div. Then specify height of first of three divs with two photos and position it on bottom of first div (shorter then 2 others) and put two divs (one for each photo) in it (smaller on top of bigger). Am I making sense?

This is roughly what I meant:

<style type=“text/css”>
<!–
.wrapper {
background-color: #CCCCCC;
height:600px;
width:600px;
margin:0 auto;
}
.left {
background-color: #33CCFF;
height:600px;
width:199px;
float:left;
position:relative;
}
.middle {
background-color: #FFFF00;
height:600px;
width:200px;
float:left;
}
.right {
background-color: #33CC66;
height:600px;
width:200px;
float:right;
}
.top {
background-color: #000000;
height:100px;
width:50px;
}
.bottom {
background-color: #ffffff;
height:150px;
width:100px;
border:1px solid;
}
.container {
height:250px;
position:absolute;
bottom:0px;
}
–>
</style>

<div class=“wrapper”>

<div class=“left”>

<div class=“container”>

&lt;div class="top"&gt;&lt;/div&gt;

&lt;div class="bottom"&gt;&lt;/div&gt;

</div>

</div>

<div class=“middle”></div>

<div class=“right”></div>

</div>

</div>

Elements are sorted like on your picture. They just need little margin-padding work and that should be it.

Hi AntunTun,

Sorry for the late reply, was away for a while. I still don’t see how this will line up those pictures at the bottom of those other divs. Any other alternative is more than welcome.

Thank you in advance

As oddz said if your middle container is very long then those two images will also be way down the page but if you are happy with that then the method suggested by AntunTun is the way that I would do it and will work. The images are absolutely placed at the bottom of the container and will always be at the bottom no matter how much text is added. You would just need to ensure that the container has a min-height to start with so that the images don’t overlap the top.

The equal columns can be done with my absolute overlay techniques as you mentioned (or if ie8+ support only is required then you could use display:table and table cell for the whole thing).

Hi Paul, somehow I can’t get the content left to align with the other two columns. AntunTun’s method as you suggested. In my case there are a few other divs as wel but that should not be of any problems, I guess. You can see the temporary page here. Can you see what I’m doing wrong?

Thank you in advance

HI,

You didn’t add the absolute positioning to push it to the bottom.


.bottom {
    background: url("../images/site/content.png") repeat scroll 0 0 transparent;
 [B]   bottom: 0;[/B]
    height: 250px;
   [B] left: 0;
    position: absolute;[/B]
    width: 430px;
}

Hi Paul Thank you very much, I simply didn’t see it any longer. @ AntunTun thank you very much, your method works great.