Sorry, took a while to get back to this.
Quote:
|
Originally Posted by arch13
I want the lists to appear as two columns, I just want to adjust the spacing of the lists and not let the two list titles over-run the lists anymore.
|
I would dispense with the ULs, if you make them plain DIVs, modifying the spacing and padding is a lot more intuitive:
Code:
<html>
<head>
<style type="text/css">
<!--
.contents {
margin:0 0 0 0px;
text-align:left;
padding:15px;
border-top:2px solid #ccc;
background-color:#E6E4C3;
font-family: Verdana;
font-size: 11px;
}
.contents .header {
font-weight: bold;
float: left;
}
.contents .links {
float: left;
}
.defloat {
clear: both;
}
-->
</style>
</head>
<body>
<div class="contents">
<div class="header">Recent Architecture</div>
<div class="links">
Architecture - Sonoma Valley Windery<br>
Architecture - RISD: South Water Street
</div>
<div class="header">Recent Handwork</div>
<div class="links">
Damascus Steel Japanese Chisel Set<br>
Handcrafted Soap<br>
Photos - Diesel Plant
</div>
<div class="defloat"/>
</div>
</body>
Just add your desired formatting to .header and .links, they should behave more like you'd expect.
Quote:
|
Also, How on earth can I make sure that as these lists grow, the height of recent_nav increases to accomodate the text instead of the text overlapping between recent_nav and recent_wrapper?
|
That's actually trickier than it should be. In the simplest case - if you didn't have the 'float' and didn't need a minimum height - it's simple, you don't specify anything and the height grows to accomodate the contents. If you want a minimum height you get a compatibility problem: say you set 'height: 75px', IE will use that if the contents are smaller and grow that if the contents need more space, Firefox on the other hand, will follow the spec and always leave it at 75px, with excess text hanging off the bottom. What we really want here are the min-height and max-height properties which are CSS3 (I think) and not yet supported by either browser.
In our case we have the 'float's to arrange them in column, the "contents" div will ignore the size of it's floated components when calculating its size. That's why we need the "defloat" div - by setting 'clear: both;' we are disallowing floated components either side of it, so it will appear below the floated lists and force the "contents" div to grow (This element can be an inline element in IE, but has to be a block element in Firefox). The above still applies, I don't know how to solve that properly. You either have a box that grows dynamically (don't specify anything for height), or one with absolute height.