xHTML - Stretching Div

Serbian

I am having a slight problem with a CSS based layout that I'm working on. I have a nav menu on the left of the page and another div underneath that contains the address. I want the address to be at the bottom of the content all the time, but I don't know how to get the div above it to stretch.

This is really simple using tables but I don't want to go back there . I have found the ambiguity in the W3C spec regarding height to be very frustrating. It seems like the have almost passed over it.

Anyway, I have set up an example page to illustrate what I'm trying to do:

http://www.mindrebel.com/css/

Any help would be much appreciated.

Cr8or

i got this to work by placing

[HTML]<div id="address">This
is the div where the address and contact details appear. I want this
div to remain at the bottom no matter how long the page gets.</div>
</div> [/HTML]

under

[HTML] <div class="clear"></div>[/HTML]

smeggle

This is the top div with the navigation in it etc. I want this div to stretch when the content to the right stretches. Is this possible?

In short no. Not unless that div is part of your main content div. Your address will allways be at the bottom of the nav as you have it there. To get that to remain at the bottom you would have to probably place it in the footer (Or in a footer) or seperate it from the nav and set it's position as absolute in the css.

You could try containing both the nav and the main content divs with in a container and then setting the height of each div to 100%. That way as the main content area is increased via additional content and there by increases in size the nav may do the same.

i.e.

<div id="container">
   <div class="mainnav"></div>
   <div class="maincontent></div>
</div>

You should be able to nest another class div for the address within the main nav. I just looked over your page source and theres no way you'll get it to do what your looking for built the way you have it. Also here

   <div id="left">
      <div id="topnav">

That should be

   <div id="left">
      <div class="topnav">

The second div being the minor div to the div identified under id. I remember reading about this when I had similar problems. id is used for the main div structure and class for the nested divs within. It's also used for globalising the divs in some cases.
What I'm thinking your doing is setting a basic div or box on the left and then setting the values for the content via the topnav. This can be more easily done via just using

<div id="topnav"></div>

You can set all the required values and still maintain your same page structure you have there.

I think this was a page I did that had a similar problem - it's working now though the footer plays the maggot - it's an abandoned project but the index, contact and mailing list links do what your looking for - though it was a pain to set up

http://www.an-sanctoir.net

but as you have that page set/css it's not going to work far as I can see.

Gordon

how about this ugly css?

#address {
width: 180px;
border-top: 2px solid #cccccc;
background-color: #f0f0f0;
padding: 10px;
margin-top: -120px;
float: left;
}

and stick it above the last /div

maxheadroom

smeggle wrote:

   <div id="left">
      <div id="topnav">

That should be

   <div id="left">
      <div class="topnav">

The second div being the minor div to the div identified under id. I remember reading about this when I had similar problems. id is used for the main div structure and class for the nested divs within. It's also used for globalising the divs in some cases.

You've said this a couple of times over the past few weeks, and I'm going to have to get you to explain what you mean. The ID attribute should be used any time there is a unique element in the page, class should be used when there are multiple elements which are related in some way, and which cannot be styled by using the cascade. Using ID is preferable in many cases. EG:

<style>
#topnav {
  rules 
}

#topnav li {
  rules
}

#topnav li ul {
  rules
}

</style>

...


<div id="topnav">
  <li> 
    <ul>navitem</ul>
  </li>
</div>

is way better than

<style>
div.topnavbar {
  rules 
}

li.topnavlist {
  rules
}

ul.topnavitem {
  rules
}

</style>

...


<div class="topnavbar">
  <li class="topnavlist"> 
    <ul class="topnavitem">navitem</ul>
  </li>
</div>

smeggle

maxheadroom wrote:

You've said this a couple of times over the past few weeks, and I'm going to have to get you to explain what you mean. The ID attribute should be used any time there is a unique element in the page, class should be used when there are multiple elements which are related in some way, and which cannot be styled by using the cascade. Using ID is preferable in many cases.

Yes thats right "id" is for unique elements or your main structural div/s, class is for nested divs or minor elements and also for globalised element values. Globalised for instance would be used for setting class div elements as a tabulature. This would be set within a unique element or id to contain properly.

And inline style is not ised in xhtml allthough it is used by the older html 4.0/4.01 coders who are still making the transition. Probably due to the fact thats where or how css originanally was used. Technically it's wrong apart from with xhtml transitional, meaning you are making the transition from html 4.0/4.01 to xhtml and will correct those errors at a later date.

Thats what transitional is for. You use it say because you have a time limit to get the site/page online and as such are allowed to loose code and then re-address the code at a more convenient time and correct any errors. (Src: W3C Schools).

But yeah you are right that id is a unique or main element identifier and class is a used more for global or (As I included) minor/nested elements. I allways ensure I have clss elements nested with in a unique element container. I do now anyway as I found out the hard way - It's a pain in the A*** if you don't lol