Is this an impossible layout?

I'm trying to create menu that looks like this...<snip>

The code below is a fixed width version. Is there anyway to make this layout stretch/shrink when the menu links change?

<html>
<head>
<style>
 div { border: 1px dotted red; font: 12px arial; }
 .menu { width: 270px; float: left; background: #aac; }
 .menuLinks { float: left; width: 215px; background: #fff;}
 .menuPicture { width: 50px; height: 50px; float: right; }
 .menuPicture2 { width: 50px; height: 50px; float: left; }
</style>
</head>
<body>
<div class="menu">
 <div class="menuLinks">
 <a href="test">Menu Link 1</a>
 <a href="test">Menu Link 2</a>
 <a href="test">Menu Link 3</a>
 </div>
 <div class="menuPicture">
 </div>
 <div class="menuPicture2">
 </div>
 <div class="menuLinks">
 <a href="test">Menu Link 4</a>
 <a href="test">Menu Link 5</a>
 <a href="test">Menu Link 6</a>
 </div>
</div>
</body></html>

[edited by: SuzyUK at 5:04 am (utc) on Dec. 3, 2006]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

Is this an impossible layout?

Simple layout only uses 4 divs. Only seems possible if the width is fixed.

bluemeany

coopersita

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week