1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to do this basic site design...

Discussion in 'HTML, Graphics & Programming' started by 5tephen, 30 May 2006.

  1. 5tephen

    Wise Guy

    Joined: 16 Oct 2003

    Posts: 1,520

    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:

    [​IMG]
    (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>
     
  2. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    Google for a technique called "Faux columns".
     
  3. Conrad11

    Soldato

    Joined: 12 Jun 2005

    Posts: 5,362

    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
     
  4. Sic

    Capodecina

    Joined: 9 Nov 2004

    Posts: 15,365

    Location: SO16

    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.

    [​IMG]

    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 :p) to get it flush with #nav.

    hope that helps a little :)
     
  5. 5tephen

    Wise Guy

    Joined: 16 Oct 2003

    Posts: 1,520

    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.