Hi everyone,
I'm trying to set-up a simple 2 column layout, with % widths and heights, so
that whichever column is longest, sets the height of the parent block.
Nav on the left, expands if content ( a <ul> with a number of <li>) increases.
Image on the right, with width as 100% and height at 100% so it changes
accordingly as the browser increases or decreases.
However, because the image height is a %, the parent block doesn't inherit its
height and expand accordingly. Its height is set only by the height of the nav
block content.
And on a similar vein, the image then has transparent stripes that sit on top
of it. In Firefox these stay at 100% of the image size as the browser size
changes. But in IE they won't expand to 100% of the image height, they sit at
one line-height.
I've read a lot of articles on various css websites, and the only one which
really addressed this exact problem said that it couldn't be done! Am I asking
the impossible, or can css deliver the flexible design I need?
Many thanks for any help / advice / links etc!
Charlotte.
As I don't have a staging server to put this onto, the code snippets are copied
below.
----- HTML code -------------------------------------
<body>
<div id="headercontainer">
<div id="containerleft">
<div class="mainmenu">
<ul>
<li>Visiting</li>
<li>Learning About</li>
<li>Looking After</li>
<li>Living In</li>
<li>Visiting</li>
<li>Learning About</li>
<li>Learning About</li>
<li>Looking After</li>
<li>last one</li>
</ul>
</div>
</div>
<div id="containerright"><div id="column1">1</div><div
id="column2">2</div><div id="column3">3</div><div id="imagecontainer"> <img
src="homepage630.jpg" width="100%" height="100%"/></div>
</div>
</div>
</body>
</html>
----CSS code -----------------------------------
#headercontainer{
width:100%;
height:inherit;
background-color : #cc0000;
position:absolute;
left:0;
top:0;
}
#containerleft
{
width:20%;
height:auto;
float:left;
background-color : #aeaa91;
}
#mainmenu
{
height:auto;
}
#containerright
{
width:80%;
height:inherit;
float:right;
background-color: #aeaa91;
position:absolute;
left:20%;
}
#imagecontainer
{
width:100%;
height:100%;
z-index:1;
}
#column1{
width:13%;
height:100%;
padding:0;
margin:0;
background-color : #aeaa91;
opacity: .5;
line-height: 100%;
filter: Alpha(Opacity=70);
position:absolute;
left: 0;
top:0;
z-index:2;
}
#column2{
width:5%;
height:100%;
line-height:100%;
display:block;
padding:0;
margin:0;
background-color : #798161;
opacity: .3;
filter: Alpha(Opacity=30);
position:absolute;
left: 4%;
top:0;
z-index:3;
}
#column3{
width:5%;
height:100%;
padding:0;
margin:0;
background-color : #798161;
opacity: .5;
filter: Alpha(Opacity=70);
position:absolute;
right: 0;
top:0;
z-index:2;
}
This email contains information intended for the addressee only. It may be
confidential and may be the subject of legal and/or professional privilege.
Any dissemination, distribution, copyright or use of this communication
without prior permission of the addressee is strictly prohibited. Any views
or opinions presented are solely those of the author and do not necessarily
represent those of the Lake District National Park Authority. Although this
email and any attachments are believed to be free of any virus or other
defects which might affect any computer or IT system into which they are
received, no responsibility is accepted by the Lake District National Park
Authority for any loss or damage arising in any way from the receipt or use
thereof. Computer systems of this Authority may be monitored and
communications carried out on them recorded, to secure the effective
operation of the system and for other lawful purposes.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
