I am spending a considerable amount of time adopting this whole css and div- based site design and am making some headway. But there are a couple of things that look basic but I'm just not getting. Here is the site layout:
(Page is 770px wide)
'title' and 'navigation' are both working ok, called from a css sheet. Also got some nice navigation buttons going. Also in the css sheet is 'main' and on the html page itself I have created two layers inside 'main' for 'main content' and 'supplementary content' as seen in the diagram.
I want 'main content' and 'supplementary content' to be the same height, depending on whichever of the two columns is longer at the time. How would I do this?
Also related to this, how do I get the very bottom layer to move up and down according to the height of the two main columns?
Here is the code. It's not rocket science for many of you guys on here, hopefully you can help.
(Page is 770px wide)
'title' and 'navigation' are both working ok, called from a css sheet. Also got some nice navigation buttons going. Also in the css sheet is 'main' and on the html page itself I have created two layers inside 'main' for 'main content' and 'supplementary content' as seen in the diagram.
I want 'main content' and 'supplementary content' to be the same height, depending on whichever of the two columns is longer at the time. How would I do this?
Also related to this, how do I get the very bottom layer to move up and down according to the height of the two main columns?
Here is the code. It's not rocket science for many of you guys on here, hopefully you can help.
Code:
<body>
<div id="top">
</div>
<div id="nav">
<div id="navmenu">
<ul class="navmenu">
<li class="navmenu"><a href="index.html">Home</a></li>
<li class="navmenu"><a href="index.html">About</a></li>
<li class="navmenu"><a href="index.html">Building services</a></li>
<li class="navmenu"><a href="index.html">Clients</a></li>
<li class="navmenu"><a href="index.html">Contact</a></li>
</ul>
</div>
</div>
<div id="main">
<br />
<br />
<div style="width=500px; height:100px; position:absolute; float:left; display:inline">
main content
</div>
<div style="width=220px; height:auto; position:relative; float:right; display:inline">
supplementary content
</div>
<div align="center" style="vertical-align:bottom; margin-right:10px; position:relative; display:block" >
</div>
</div>
</body>
Cheers.