Div problem

timmytots · #1 (**permalink**) Sep 8th, 2007, 18:44

I can't get my 'wrap' (the div with all the main stuff in) to go 80px from top and 300px from bottom.

http://www.timothy-clark.com/store/

Any help?

alexgeek · #2 (**permalink**) Sep 9th, 2007, 03:03

what have you tried so far?
i have to say it's looks amazing!

timmytots · #3 (**permalink**) Sep 9th, 2007, 09:55

thanks very much.

i've tried just the 300 from bottom (without the top) and it goes correct but the top is right at the top over the header. i've tried most things. for some reason, i can't get both the top and bottom where i want.

alexgeek · #4 (**permalink**) Sep 9th, 2007, 13:56

have you tried stuff like:
margin-top: 100px;
and
margin-bottom: 300px;

?

timmytots · #5 (**permalink**) Sep 9th, 2007, 14:39

its ok, ive done something else.

karinne · #6 (**permalink**) Sep 10th, 2007, 13:16

Please post the solution for all to see. Someone else might be having the same problem as you

timmytots · #7 (**permalink**) Sep 10th, 2007, 13:55

there was no solution, i couldnt do it.

i have a new problem now. for some reason the div "bottom" doesnt go directly under the div "wrap". as youll see, the images of me are covered partially by the bottom div. why is this?

timmytots · #8 (**permalink**) Sep 10th, 2007, 17:32

anyone?

Rakuli · #9 (**permalink**) Sep 10th, 2007, 18:47

you could try adding

clear: both;

to the #bottom div so it clears the floated divs you have inside the #wrap.

timmytots · #10 (**permalink**) Sep 10th, 2007, 19:30

that didnt do anything.

my two problems now are:

1/. the image of the red sun doesn't touch the top of the bottom image. They should touch and theyre both just divs. why dont they?

2/. The bottom image doesnt go to the bottom.

timmytots · #11 (**permalink**) Sep 11th, 2007, 19:18

please help!!!

Lchad · #12 (**permalink**) Sep 12th, 2007, 11:29

In the #footer take out the position: relative and the footer will drop to the bottom.

In the #content you have a top margin added so the sun is not touching that div.
change the margin code to:
margin: 0px 0px 25px 0px

timmytots · #13 (**permalink**) Sep 12th, 2007, 12:42

i took the footer out completely in the html file and i altered the content, but the red sun is still a milimeter above the base image and the base image hasnt dropped to the bottom.

Lchad · #14 (**permalink**) Sep 12th, 2007, 13:14

Is there relative positioning set for the base image too?

timmytots · #15 (**permalink**) Sep 12th, 2007, 13:45

yeah, but taking that out hasn't done anything either.

welshstew · #16 (**permalink**) Sep 12th, 2007, 14:41

If you change your css for the 3 columns to the following it should work:

Code: Select all

#leftcolumn {
position:relative;
float:left;
width:230px;
text-align:left;
padding-top:20px;
margin-left:10px;
}

#middlecolumn {
position:relative;
width:230px;
float:left;
text-align:left;
padding-top:20px;
margin-left:10px;
}

#rightcolumn {
position:relative;
width:130px;
float:left;
text-align:left;
padding-top:20px;
margin-left:10px;
}

let me know if that helps

Stew

welshstew · #17 (**permalink**) Sep 12th, 2007, 14:54

also if you add margin-top: -5px; to you bottom div id then it should move it up to line up with the 'sun image'

i.e.

Code: Select all

#bottom {
    position: relative;
    margin: 0 auto;
    padding: 0;
    margin-top: -5px;
      width: 100%;
    height: 510px;
     clear: both;
      background: url('http://www.timothy-clark.com/store/bottom.jpg') no-repeat;
    }

welshstew · #18 (**permalink**) Sep 12th, 2007, 15:07

also, your top nav is a bit screwy in IE. you'll need to wrap that in a floated left div for it to look nice across platforms:

Code: Select all

<div style="float:left; ">
<ul id="nav">
nav list code
</ul>

<ul id="nav2">
nav list code
</ul>
</div>

you'll probably need to do the smae to the 'checkout' pretty pink thing, as it now floats in the middle of the screen

Code: Select all

<div style="float:left; ">
<div id="checkout">
</div></div>

let me know how you get on

welshstew · #19 (**permalink**) Sep 12th, 2007, 15:10

sorry, probably confused the bejesus out of you, so here is the fully amended code. works in ie7 ie6 & ff.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>Timothy Clark&trade; | Home &amp; Garden | Fitness Furniture, clothing, accessories, equipment</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content="fitness furniture, equipment, fashion accessories, clothing, apparel, yoga, tai chi, furniture, fitness, health, timothy, timothy clark, tim clark, modern,
vases, tables, chairs, punchbags, mats, sparring, sports, candles, t-shirts, trousers, accessories, lamps, exercise ball, weights, dumbbells,
swiss ball, bats, gloves, bench, press, contemporary, design, interior, feng shui, detox, wellbeing, environment, holistic, martial arts, kung fu, pilates, united kingdom"/>
<meta name="description" content="The official Timothy Clark website - contemporary Fitness Furniture, clothing and accessories."/>
<link rel="SHORTCUT ICON" href="favicon.ico"/>
    
    <style type="text/css">
    /* CSS Sheet */

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 1.5em;
    color: #333;
    height: 100%;
    width: 100%;
    background : #101010;
    }

#side {
position:absolute;
height: 870px;
width: 220px;
left: 0px;
top: 360px;
background : #101010 url('http://www.timothy-clark.com/store/sides.jpg') no-repeat;
}

#side2 {
position:absolute;
right: 0px;
top: 120px;
}

/* links */

a:link {
    color: #00FF00;
    text-decoration: none;
    border-bottom: 1px dotted #bbb;
    
    }
a:visited {
    color: #99CC00;
    text-decoration: none;
    border-bottom: 1px dotted #bbb;
    }
a:hover {
    color: #fff;
    background: #00FF00;
    border-bottom-style: solid;
    }

#header {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background : #101010 url('http://www.timothy-clark.com/store/header.jpg') no-repeat;
    }
    
/* entries */

#home #content h3 {
    margin: 0;
    padding: 0;
    border: none;
    }
#content dl.entries {
    margin: 0;
    padding: 0;
    }
#content dl.entries dt {
    font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    line-height: 1.5em;
    font-weight: normal;
    color: #99CC00;
    }

#content dl.entries dd {
    font-family: Verdana, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 90%;
    color: #666;
    }
#content dl.entries dd .more {
    font-size: 90%;
    }
#content dl.entries dd.posted {
    margin: 1em 0 25px 0;
    padding: 4px 0 0 0;
    font-size: 90%;
    color: #666;
    border-top: 1px solid #eaeaea;
    }
#content dl.entries dd p {
    margin: 0 0 1em 0;
    }
a.plink {
    padding-left: 16px;
    color: #999;
    text-decoration: none;
    border-bottom: none;
    background: url('http://www.timothy-clark.com/img/perm-icon.gif') no-repeat 0 1px;
    }
a.qblink {
    padding-left: 12px;
    color: #999;
    text-decoration: none;
    border-bottom: none;
    background: url('http://www.timothy-clark.com/img/pound.gif') no-repeat 0 3px;
    }
a.qb {
    color: #999;
    text-decoration: none;
    border-bottom: none;
    }
a.clink, .commoff {
    margin: 0 0 0 2px;
    padding: 0 0 0 16px;
    color: #999;
    text-decoration: none;
    border-bottom: none;
    background: url('http://www.timothy-clark.com/img/comment-icon.gif') no-repeat 0 1px;
    }
.commoff {
    color: #ccc;
    background-image: url('http://www.timothy-clark.com/img/comment_off.gif');
    }
a.plink:hover, a.qblink:hover, a.clink:hover {
    color: #999;
    }

/* top */

#outerwrap {
    position: relative;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 100%;
    background: url('http://www.timothy-clark.com/store/bground.jpg') repeat;
    }
    

#wrap {
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    font-size: 95%;
    text-align: left;
     clear: both;
    width: 750px;
    
    }
    
    
#wrap2 {
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    font-size: 95%;
    text-align: left;
      width: 750px;
      background : #fff url('http://www.timothy-clark.com/store/base2.jpg') no-repeat bottom right;
    }
    
    #top {
    position: relative;
      width: 750px;
    height:100px;
      background: url('http://www.timothy-clark.com/store/top.jpg') no-repeat;
    }
    
    #bottom {
    position: relative;
    margin: 0 auto;
    padding: 0;
    margin-top: -5px;
      width: 100%;
    height: 510px;
     clear: both;
      background: url('http://www.timothy-clark.com/store/bottom.jpg') no-repeat;
    }
    
    #bottomwrap {
    position: relative;
    margin: 0 auto;
    padding: 0;
     clear: both;
    height: 510px;
    font-size: 95%;
    text-align: left;
    width: 750px;
    }

#checkout {
    position: absolute;
    height: 50px;
      width: 100%;
    top: 280px;
      background: url('http://www.timothy-clark.com/store/checkout.jpg') no-repeat;
        }

#leftcolumn {
position:relative;
float:left;
width:230px;
text-align:left;
padding-top:20px;
margin-left:10x;
}

#middlecolumn {
position:relative;
width:230px;
float:left;
text-align:left;
padding-top:20px;
margin-left:10px;
}

#rightcolumn {
position:relative;
width:130px;
float:left;
text-align:left;
padding-top:20px;
margin-left:10px;
}

#name {
    color:#fff;
    position: absolute;
    top: 38px;
    left: 72px;
}    

#next {
    width: 77px;
    position: absolute;
    top: 14px;
    left: 650px;
}    

#own {
    width: 77px;
    position: absolute;
    top: 14px;
    left: 554px;
}    

/* navigation */

#nav {
    position: absolute;
    top: 196px;
    float: left;
    width: 850px;
    height: 80px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 90%;
    text-align:left;
    }
#nav li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    }
#nav a {
    float: left;
    padding: 9px 7px;
    text-decoration: none;
    border-bottom: none;
    color: #fff;
    }
#nav a:hover, #nav a.active {
    color: #fff;
    background: none;
    
    }
#nav a.active {
    font-weight: bold;
    }
li#t-home a {
    margin-left: 80px;
    }

#nav2 {
    position: absolute;
    top: 226px;
    width: 750px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 70%;
    }    
    
#nav2 li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
#nav2 a {
    float: left;
    padding: 4px 7px;
    text-decoration: none;
    border-bottom: none;
    color: #999;
    } 
    
#nav2 a:hover, #nav2 a.active {
    color: #fff;
    background: none;
    
    }
#nav2 a.active {
    font-weight: bold;
    }
li#t2-home a {
    margin-left: 80px;
    }    


/* title box */

#title {
    clear: left;
    padding: 22px 190px 20px 22px;
    border-bottom: 1px solid #000;
    }

#title h1 {
    margin: 0;
    padding: 0;
    font-size: 150%; 
    font-weight: normal;
    color: #EB9F3D;
    }
#title h1 span {
    color: #666;
    }
#title h2 {
    font-family: Verdana, sans-serif;
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 90%;
    line-height: 1.5em;
    font-weight: normal;
    color: #888;
    }
#title a {
    border-bottom-color: #333;
    }
#title a:visited {
    color: #40659B;
    }
#title a:hover {
    color: #036;
    }
h2#recent {
    margin: 0 0 4px 0;
    padding: 0;
    font-size: 90%;
    font-weight: normal;
    color: #40659B;
    }

/* main column */

#main-body {
    float: left;
    width: 515px;
    text-align:justify
    }
#content {
    margin: 0 0 0 0;
    padding: 0 25px;
    }
    
#main-body2 {
    text-align:justify;
    float: left;
    width: 100%;
    }


/* lists */

#content ul {
    list-style: none;
    margin: 1em 0 1em 0;
    padding-left: 24px;
    }
#content ul li {
    padding: 0 0 4px 12px;
    line-height: 1.4em;
    }
#content dl dd {
    margin: 0;
    padding: 0 0 1em 0;
    font-size: 90%;
    line-height: 1.5em;
    }
#content dl dt {
    font-weight: bold;
    }
#content dl dt span {
    font-weight: normal;
    }
    
/* figures */

#content img.thumb {    
    float: right;
    margin-left: 14px;
    margin-bottom: 6px;
    margin-top: .2em;
    border-color: #ddd;
    border-width: 4px;
    border-style: solid;
    padding: 4px;
    }


/* custom list styles */

#sidebar #crewlinks li {
    padding-left: 16px;
    background-position: 0 3px;
    }


/* img/desc teasers */

dl.teaser, #sidebar dl.teaser {
    margin: 0 0 10px 10px;
    padding: 0 20px 0 0;
    }
dl.teaser:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: left; 
    visibility: hidden;
    }
dl.teaser dt {
    margin: 0;
    padding: 0;
    }
dl.teaser dt a {
    float: left;
    display: block;
    margin: 2px 10px 0 0;
    padding: 2px;
    border: 2px solid #ddd;
    background: #fff;
    }
dl.teaser dt a img {
    float: left;
    }
dl.book dt a {
    border-color: #ddd;
    }
dl.teaser dt a:hover {
    padding: 0;
    border: 4px solid #999;
    }
dl.teaser dd {
    margin: 0 0 2px 0;
    padding: 0;
    line-height: 1.4em;
    }
dl.teaser dd a {
    font-weight: bold;
    }
dl.teaser dd em {
    font-style: normal;
    color: #7B9905;
    }
dl.noimg dt a {
    float: none;
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: bold;
    border: none;
    border-bottom: 1px dotted #bbb;
    }
dl.noimg dt a:hover {
    border: none;
    border-bottom: 1px solid #bbb;
    }
dl.noimg dd a {
    font-weight: normal;
    }



/* footer */

#footer {

    bottom: 80px;
    clear: both;

    margin: 0;
    padding: 0;
    font-size: 90%;
    color: #999;

    }
#footer p {
    margin: 0;
    padding: 15px;
    }
#footer a {
    color: #999;
    border-bottom-color: #333;
    }
#footer a:hover {
    color: #FFF;
    }




body.viewer #sidebar {
    display: none;
    }

/* publications */

dl.book {
    margin-bottom: 10px;
    }
dl.book:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: left; 
    visibility: hidden;
    }
dl.tiplist em {
    color: #999;
    font-style: normal;
    }
#content dl.book dt {
    float: left;
    background: none;
    padding-left: 0;
    margin-right: 10px;
    }
#content dl.book dt img {
    padding: 2px;
    border: 2px solid #ddd;
    }
#content dl.book dd.book-title {
    padding-bottom: 0;
    font-weight: bold;
    font-size: 100%;
    }
#content dl.tiplist dd {
    margin-left: 0;
    }

#center{
margin-left: -50%;
position: absolute;
top: -138px;
left: 50%;
width: 100%;
height: 253px
}

/* misc. */

#year {
position: absolute;
    top: 10px;
    left: 751px;
    float:right;
    width: 25px;
    height: 80px;
    margin: 0;
    padding: 0;
    display: block;
}

h3 img {
    vertical-align: middle;
    }
ul.noBullet li {
    list-style-type: none;
    }
ul.fiveent em {
    color: #999;
    font-style: normal;
    font-size: 90%;
    }
.center {
    text-align: center;
    }
a img {
    border: none;
    }
.hide, hr {
    display: none;
    }

    .style3 {color: #FF0066}
    .style5 {font-size: 210%; color: #FFFFFF; }
    .style6 {font-size: 24px}
    </style>

</head>

<body>

<div id="header"></div>
<div style="float:left; ">
<ul id="nav">


    <li id="t-home"><a href="http://www.timothy-clark.com/store" class="active">HOME</a></li>
    <li><a href="living">MODERN LIVING</a></li>
    <li><a href="clothing">TIMOTHY CLOTHING</a></li>
    <li><a href="fitnessfurniture">FITNESS FURNITURE</a></li>

    <li><a href="equipment">FITNESS EQUIPMENT</a></li>
    <li><a href="information">MORE INFORMATION</a></li>
    
</ul>

<ul id="nav2">
    <li id="t2-home"><a href="tables.html">TABLES</a></li>
    <li><a href="chairs.html">CHAIRS</a></li>
    <li><a href="dining.html">DINING</a></li>

    <li><a href="storage.html">STORAGE</a></li>
    <li><a href="vases.html">VASES</a></li>
    <li><a href="statues.html">STATUES</a></li>
    <li><a href="statues.html">THE LIFESTYLE</a></li>
    <li><a href="candles.html">SUPPORT</a></li>
</ul>
</div>
<div style="float:left; ">
<div id="checkout">
</div></div>

<div id="side">
</div>

<div id="side2">
</div>
  
<div id="wrap">


<br />
<br />
<br />
<br />
<br />

<img src="product1.jpg" alt="Yoga headstand" width="700" height="260" /><br />
<img src="product2.jpg" alt="Yoga headstand" width="700" height="260" /><br />
<br />
<br />
<img src="http://www.timothy-clark.com/store/sun.jpg" alt="Yoga headstand" width="750" height="400" />
</div>
<div id="bottom">
<div id="bottomwrap">

<div id="content">
  <div id="leftcolumn">
      <dl class="entries">
        <dd><span class="style5">About</span><br >

          <span class="style3">________________________________</span><br >
          <br >
          We are a unique home and garden store. Fitness Equipment and Furniture live in harmony and bleed into the background of the contemporary living space. We supply a whole range of products including punchbags, vases, gloves, tables, chairs and dining products helping to re-shape the Modern interior construction and transform the way we live in the 21st century. At the heart of our collection is the Fitness Furniture range, our special products that allow you to integrate fitness into your home and consequently into your lifestyle. Thanks for visiting and take a look around...
          <br >
          <br >
      
      <a href="information">More Information </a>        <br >
    </dd></dl>
    </div>

  <div id="middlecolumn">


              
              <dl class="entries">
               <dd> <span class="style5">No TV </span><br >
                 <span class="style3">________________________________</span><br >
               <br >
            <dd>Do you need that T.V. in your lounge? Is it beneficial to you or does it hinder your personal development? Timothy Clark aim to revolutionise the sterotypical interior construction by providing you with the tools, advice and inspiration to transform your home into a positive wellbeing environment. Here, we encourage you to put the T.V. in the cupboard under the stairs to gather dust and bring in new products that evolve around bringing out your true potential. We encourage you to transform your home into a place that evolves around you and your aspirations; a place in which you grow physically and spiritually.                </dd></dl>

</div>

<div id="rightcolumn">


              
              <dl class="entries">
               <dd> <span class="style5">Products</span><br >
                 <span class="style3">___________________</span><br >
                 <br >
           
         
            <dd>Tables<br >

              Chairs<br >
              Vases<br >
              <br >
              <a href="x">More</a>            </dd>
              </dl>
</div>
</div>

    
  
  </div>
</div>

</body>
</html>

Stew

timmytots · #20 (**permalink**) Sep 12th, 2007, 15:34

you're the best, thanks very much! its all fixed (dont know about other browsers - i use safari on a mac).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
First image problem and inline list problem	konnor5092	Web Page Design	8	Dec 1st, 2007 09:08

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Div problem