Re-coding problem

garfunkle · #1 Jul 1st, 2007, 22:34

Well i've been re-coding my sites so that they don't use tables. But instead use divs for layout.
The first site went very well, almost no difference. But now i'm on the second site and have come across only one problem that needs fixing. Theres a screenie to illustrate, but basically i need the seperator (for navigation and main content) to stretch from the bottom of the banner to the top of the footer. In the diagram i need the pink oval to stretch to the fit the blue oval.

To have the navigation at the left of the content i had to float it to the left using { float: left; } (only way i knew how).

I've uploaded it to some free hosting i have if you need to look at the code:
http://funkydesigns.zeeblo.com/Sites/non-table/

This is a quick screenshot to illustrate what my problem is:
http://www.webforumz.com/attachment....1&d=1183329218

moojoo · #2 Jul 2nd, 2007, 20:08

You need a left column and to margin left your right column the width of the left one to keep it from wrapping under.

garfunkle · #3 Jul 2nd, 2007, 20:43

I got lost after the left column bit :S

Marc · #4 Jul 3rd, 2007, 11:33

Try this (im not sure that it will work, but it should):

CSS (default.css):

Code: Select all

  {
    background-color: #DCDBDB;
    color: #000000;
    font-family: "Times New Roman", Arial, sans-serif;
  }
 
h3
  {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
    font-size: 110%;
    font-weight: bold;
    text-align: left;
    color: #C30E0E;
  }
 
h4
  {
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 5px;
    font-size: large;
    color: #C30E0E;
  }
 
a:link  
  { 
    color: #302b27;
  }
a:hover 
  {
    color: #10C5F0;
    font-weight: bold;
    font-size: 80%;
  }
 
a.footer:hover
  {
    color: #10C5F0;
    font-size: 12px;
    text-decoration: underline;
  }
 
a.side_nav
  {
    font-size: small;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 30px;
  }
 
p.paragraph
  {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  text-indent: 10px;
  }
 
#main
  {
    width: 70%;
    height: 100%;
    background-color: #fefefe;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    margin-left: auto;
    margin-right: auto;
  }
 
#logo_area
  {
    border-bottom-style: dotted;
    border-bottom-color: black;
    border-bottom-width: 1px;
  }
 
#logo
  {
  width: 282px;
  height: 71px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  }
 
#navigation
  {
    float: left;
    width: 20%;
    height: 100%;
    margin-top: 0;
    margin-right: 10px;
    border-right-style: dotted;
    border-right-color: black;
    border-right-width: 1px;
  }
 
#content
  {
    margin-top: 0;
 float:right;
 width:78%;
  }
 
#footer
  {
    text-align: center;
    font-size: small;
    border-top-style: dotted;
    border-top-color: black;
    border-top-width: 1px;
clear:both
  }
#w3c
  {
    text-align: center;
  }

HTML:

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample 2</title>
  <link rel="stylesheet" type="text/css" href="default.css" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body> 
<br />
<div id="main">
  
<!-- LOGO AREA -->
  <div id="logo_area" height="20%">
    <img id="logo" src="images/logo.png" alt="Logo" />
  </div>
<!-- END LOGO AREA -->
  
  <br />
  
<!-- NAVIGATION AREA -->
  <div id="navigation" height="70%">
      <h3>Navigation</h3>
        <a class="side_nav" href="#">Link</a><br />
        <a class="side_nav" href="#">Link</a><br />
        <a class="side_nav" href="#">Link</a><br />
      <br />
      <h3>Navigation</h3>
        <a class="side_nav" href="#">Link</a><br />
        <a class="side_nav" href="#">Link</a><br />
        <a class="side_nav" href="#">Link</a><br />
  </div>
<!-- END NAVIGATION AREA -->
 
<!-- MAIN CONTENT AREA --> 
    <div id="content" height="70%">
      <h4>Title</h4>
      <p class="paragraph">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non turpis. Integer sed nibh non purus eleifend 
        egestas. Vivamus urna ipsum, volutpat ac, viverra in, ornare vel, mi. Sed sapien elit, imperdiet eget, gravida 
        vitae, posuere vitae, nisi. Vivamus pellentesque. Pellentesque mattis vehicula ante. Praesent aliquam nisl nec 
        nulla. Mauris lobortis. Vestibulum justo quam, blandit quis, aliquet ut, lacinia sed, tellus. Nulla ac lorem at 
        lectus vulputate posuere. Nulla rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
        cubilia Curae; Suspendisse potenti. Fusce vitae odio in elit interdum tempus. Sed urna. Integer blandit lacus non 
        augue. Cras dignissim.
      </p>
      <p class="paragraph">
        Aenean eu dolor ac sem faucibus nonummy. Morbi interdum, velit non placerat aliquam, neque leo auctor libero, 
        volutpat egestas mauris nisi id dolor. Aliquam facilisis enim ultricies sapien. Cras aliquam sagittis nibh. 
        Curabitur tellus neque, viverra ut, porta non, luctus a, elit. Maecenas pede. Morbi massa. Aliquam erat volutpat. 
        Nullam volutpat lectus nec nibh. Ut tincidunt, purus eu faucibus rhoncus, eros dui molestie leo, vel molestie 
        eros mi ac ante.
      </p>
    </div>
<!-- END MAIN CONTENT AREA -->
<!-- FOOTER AREA -->
    <p id="footer" height="10%">
      <br />

Marc

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Font Problem In My Css Coding	balaji	Web Page Design	1	Jul 2nd, 2007 11:59
coding	crackafaza	Web Page Design	2	Jun 15th, 2007 13:31
I am a <div> at coding	DregondRahl	Web Page Design	8	Jun 7th, 2007 13:02
Coding Problem (I believe)	haze	Web Page Design	2	Sep 5th, 2005 08:07
This coding problem	netwarriorgizmo	JavaScript Forum	12	Jul 28th, 2004 19:04

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Re-coding problem