creating div with 100% height inside inside TD

Question

I am trying to design a website, where I want a div of 100% height inside a element and then some other div inside it, formatted in a specified manner.

the code I am trying is this

css

#main1{
  margin: 0 auto;
  width:300px;
  background: red;
  position:absolute;

}

#content1{
  top:0;
  width: 300px;
  height: 250px;
  background: gray;
}

#content2{
  width: 300px;
  height: 250px;
  background: yellow;
}

#content3{
  width: 300px;
  height: 250px;
  background: brown;
}

#bottom{
  width: 300px;
  height: 75px;
  position:absolute;
  bottom:0;
  background: blue;
}

and I have designed it like this

<td width="300" valign="top" style="position:relative; height:100%">


        <div id="main1"> 
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
        </div>


</td>

I want the div with id content1 at extreme top and with id bottom at extreme bottom inside td, so that if the height of the element varies it automatically get aligned at top and at bottom with margins in between the inner divs, also I want this to be all browsers compatible. I tried and it worked in IE.

I have tried so many codes but couldn't get the solution

You can see in this link at right side that where and what I am trying to make

http://www.spoiledagent.com/about_hanu.html

Thanks

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page take a look at this one ;) — DiederikEEn, May 01 '13 at 09:09

score 1 · Answer 1 · edited May 23 '17 at 12:06

First, I'd ask that you display the whole of the HTML markup for the body structure. A small snippet doesn't give an accurate picture of the entire structure that could be affecting your undesired result.

Second, I'd recommend you don't use tables for site layout. It's bad practice for a variety of reasons. Here's a Q/A with supporting arguments.

Third, you have to remember that every element that you make has a parent, right up until the <html> tag. So, let's say I wanted the main container of my site to have 100% height to the window.

Let's say this is the only other element besides <html> or `'.

<div id="container">
    <h1>Why you no touch the bottom?</h1>
</div>

with this CSS:

#container {
    background: #ccc;
    height: 100%;
}

http://jsfiddle.net/BvNY4/

In this fiddle, we can see it doesn't to to 100% height. Why? Well...technically, it is...but it's parent isn't. So like a brave Tee-Ball coach, we need to tell this element's parents what to do:

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

http://jsfiddle.net/B6RH7/1/

Ta-da! Let me know if you need anymore clarification on how this applies to your scenario. :)

A little more directed at your specific goals, try this article explaining position: relative; for parent elements. If the parent element has attribute position: relative;, any child elements with position: absolute; will position themselves to the parent element.

creating div with 100% height inside inside TD

1 Answers1