How to do this basic site design...

5tephen · 30 May 2006 at 20:26

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.

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>

iCraig · 30 May 2006 at 20:38

Google for a technique called "Faux columns".

Conrad11 · 30 May 2006 at 21:15

Like above,

If the widths are fixed: Click Here

If the widths are liqiud (percentages): [urlhttp://www.ilovejackdaniels.com/design/faux-columns-for-liquid-layouts/]Click Here[/url]

Important: Watch the England match before proceeding

Sic · 31 May 2006 at 08:59

just thought i'd give you my own css layout that'll allow you to put anything you want in there, but it's really basic and will probably need some tweaking to get it how you want it.

put everything in #container

Code:

#container {
width: 770px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#title {
width: 770px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#nav {
width: 770px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#leftContent {
float: left;
position: relative;
top: 0px;
left: 0px;
width: 570px;
text-align: left;
margin: 5px 5px 5px 5px;
}
#rightContent {
float: right;
width: 190px;
margin: 5px 5px 5px 5px;
position: relative;
top: 0px;
right: 0px;
}
#footer {
clear: both;
width: 760px;
margin: 5px 5px 5px 5px;
}

that should give you something similar to what you're after...like i said, you'll want to tweak it, and for the right column, you might need to change the top: 0px; attribute for bottom: npx; (where n is a number

) to get it flush with #nav.

hope that helps a little

5tephen · 31 May 2006 at 11:40

Thanks for the replies. Will take these suggestions on board and see what I come up with, I never thought of putting the whole site in its own div container.
No doubt I'll be letting you know if I have any problems

Cheers.