Posted by UKuser on 04/24/07 09:42

Hi folks,

I'm trying to display data in a div, with a rounded corner image in
each corner. The layout I'm trying to achieve is:

[ Name F ] [ Tel ] [Logo N]
[Description N ] [ logo ]
[Description N ] [ logo ]
[Email | Web | More info N][logo]

F = flexible height - the name may be long enough to force 2 rows
N = no change - static height

I have run into a number of problems:
1) Images won't overflow in IE meaning that a relative description
begins at the bottom of the logo not underneath the name
2) You cannot position more than 1 image as a background image in a
div
3) My latest attempts use an absolutely positioned box containing the
description and email however if the Name (which varies in height) is
too big, it will go behind the description rather than forcing it
down.

Apologies if thats not clear - so heres the code in nice colours.

Thanks

A

HTML
<div class="enhdiv">

<span class="b1">b1</span>
<span class="b2">logo</span>
<span class="b3">b3</span>

<span class="b4">b4g<br>b4b
<span class="b5">b5</span>
</span>
<span class="b6">b6</span>

</div>

CSS
..enhdiv{
position:relative;
float:left;
clear:both;
margin-top:5px;
margin-bottom:5px;
height:auto;
width:496px;
font-family:arial,helvetica,sans-serif;
background-color:purple;
}

..b1{
display:block;
float:left;
width:70%;
background-color:blue;
height:auto;
}

..b2{ /* logo */
display:block;
float:left;
width:auto;
height:70px;
}

..b3{
width:10%;
float:right;
display:block;
background-color:yellow;
}

..b4{
position:absolute;
display:block;
clear:both;
bottom:0px;
left:0px;
background-color:green;
width:70%;
height:55px;
}

..b5{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:auto;
background-color:lightblue;
}

..b6{
width:10%;
right:0px;
background-color:yellow;
position:absolute;
bottom:0px;
}

[Back to original message]