# Solved: dreamweaver bug? or simple div problem? (version II)



## Gesp (Nov 29, 2008)

Hi there again

As a second version of a previous thread of mine asking for some help on a div mistery, I now found another damn ghost on my web page`s CSS code.

This time the problem is one of the most annoying issues you could find on an html/CSS page`s code.

I`ve got a master div and in it I`ve got other small divs.
But as I select the master div I notice some of the bottom small divs are out of the bounding div.

The height of this div is set to "auto" and the width is a fixed number of pixels, but the small divs are small enough to fit in this master div, so it should keep them already in, as I wanted.

The problem then originated is that the other divs I insert under this master div consider all "outbounded" divs as individual objects and changes the whole coding strategy.

What could be the source of this problem?
Any suggestions?

Thanks in advance


----------



## tomdkat (May 6, 2006)

Can you post a screenshot of what you're seeing?

Peace...


----------



## Gesp (Nov 29, 2008)

The red line is the master div, the green boxes the small divs and the blue line is to show in case that I add a new master div iqual to the first what happens.

On the right is what I see wile previewing the whole page on the browser.
On the left is shown what I see while editing the code.

The problem here is: once I`ve got two different master divs, the code shoudl prevent them from mixing up, but it doesn`t.

Why?


----------



## tomdkat (May 6, 2006)

Thanks for the screenshot. Are you applying a "float" to the DIVs on the right? If so, that could be why you're seeing the behavior you are. The elements with a "float" applied are removed from the "normal flow", such that the height of the containing element might not be what you expect.

I suggest reading the CSS2.1 spec on "Normal flow and the subsequent section on "Floats".

Here is a HTML test case you can use for experimentation:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Floats</title>
<style type="text/css">
#outer {
  border-style: solid;
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.box {
  border-style: dotted;
  border-color: red;
  width: 100px;
  height: 100px;
  position: relative;
}
#inner-right {
  float: right;
}

</style>
</head>
<body>
<div id="outer">
<div class="box">inner left</div>
<div id="inner-right" class="box">inner right</div>
</div>
</body>
</html>
```
Peace...


----------



## Gesp (Nov 29, 2008)

Yes I understood that, but look at this.

The top image shows what it displays if I select the master div (blue box) and the lower image on the green box shows me what I want and what I have it coded to do.

This is the problem


----------



## tomdkat (May 6, 2006)

I'm not seeing any differences other than the blue and green borders.

What is the difference between the two? Also, is the "read more" box floated right?

Peace...


----------



## Gesp (Nov 29, 2008)

No, i`ve removed it and floated it left like the other divs.

The blue box excludes one div thats bellow it and the green box includes it.


----------



## tomdkat (May 6, 2006)

So, does the screenshot above show the "Read more" box floated right or floated left? Also, the second set of screenshots don't match the behavior shown in the first set of screenshots.

In the second set of screenshots, the blue border is BELOW the "Read more" box, which tells me the "Read more" box is where you wanted it to be.

Could you post the HTML for the first set of screenshots you posted above?

Peace...


----------



## Gesp (Nov 29, 2008)

Yes, I forgot to say, thats just right now. Forget the Read more box, its all right now.

My problem is with the preview of the master div box.
I mean, It can jam something else further more in the web site and I want it to be as it is on the green box (all in the master div). But instead it is now as in the blue box (somethings in a somethings out)


----------



## tomdkat (May 6, 2006)

Ok, without seeing any HTML (hint hint ) the only thing I can suggest is to put a DIV at the very bottom of the "master" DIV with a "clear" attribute, like this:


```
[b][color=red]<div style="clear: both;"></div>[/color][/b]
</div> <!-- End of "master" DIV -->
```
That should force the "master" DIV to be the full height of all of its contents. Just be sure to add any new stuff BEFORE that special DIV.

Seeing the HTML would help but I'm glad you posted screenshots, at least. 

Peace...


----------



## Gesp (Nov 29, 2008)

Ok, so heres the html/CSS:

The box were talking about is the post_individual
By the way, even though my height on post_tab is set to 100% it stops at some point without covering the whole 100%, why?


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled Document

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue risus sit amet enim egestas eu malesuada elit euismod. Nam consectetur eros tempor enim luctus quis semper nulla rutrum.

 Donec luctus posuere eros eu bibendum. Proin dignissim nisl in eros volutpat at eleifend magna ornare. Pellentesque semper mattis eros, feugiat dapibus lacus sollicitudin eu. Duis accumsan metus ut nisi ultrices a posuere mauris imperdiet. Phasellus vehicula vulputate diam, ac iaculis ante dictum et. Morbi ut eros lectus, ut rhoncus magna.

            Read more
```


----------



## tomdkat (May 6, 2006)

tomdkat said:


> Thanks for the screenshot. Are you applying a "float" to the DIVs on the right? If so, that could be why you're seeing the behavior you are. The elements with a "float" applied are removed from the "normal flow", such that the height of the containing element might not be what you expect.
> 
> I suggest reading the CSS2.1 spec on "Normal flow and the subsequent section on "Floats".





Gesp said:


> Yes I understood that, but look at this.


Did you actually read the links above about "Normal flow" and "Floats"?



Gesp said:


> Ok, so heres the html/CSS:


Thanks for posting it. It appears my comment about adding the DIV above the end of the "master" DIV addresses the issue but we'll explore it in detail.



> The box were talking about is the post_individual


Ok, I've attached two screenshots. One is of your "raw" HTML with a border applied to the "post_individual" DIV. You will see how the "Read more" box is outside of that DIV. This is why:

Inside the "post_individual" DIV are the following DIVs:

post_header
post_subject
readmore
endline_wrap

The "readmore" and "endline_wrap" DIVs have floats applied where the other two do not. As I stated above, elements with a float applied are *removed from the normal flow* of the content. Logically, you can think of this as being like those elements aren't there when the elements _without_ a float applied are rendered. In your specific case, the page is rendering as if the "post_individual" DIV contained ONLY the "post_header" and "post_subject" DIVs. This is correct behavior, per the CSS spec (which is why I posted the link to it above).

The second screenshot I posted shows the "post_individual" DIV now including the "readmore" and "endline_wrap" DIVs in its height. How did I do this? By adding the DIV I mentioned above, with a "clear" attribute set. The "Floats" section at the page I posted the link to above discusses the "clear" attribute so I highly suggest you read the "Normal flow" and "Floats" sections, including the "clear" attribute discussion.



> By the way, even though my height on post_tab is set to 100% it stops at some point without covering the whole 100%, why?


It could be one of two things:

You might need to specify an actual height to one of the parent elements of "post_tab" if not adding a height of 100% to the "body" element.
Since the "post_individual" DIV didn't have the appropriate height, it made the "post_tab" DIV appear to not have the appropriate height too.

I believe DreamWeaver is working just fine. Based on this and the other thread, you need to take some time and learn more about CSS to better understand some of the behavior you're seeing.

Peace...


----------



## Gesp (Nov 29, 2008)

its set.

it solved the question (the clear atributes).

But now, imagine that I have all those divs and I wanted a gradient repeat-x on the top and one on the bottom bellow every thing, how could I do it?

I try to attach two background images at the same time and obviously doesn`t work.


----------



## tomdkat (May 6, 2006)

Gesp said:


> it solved the question (the clear atributes).


Cool. Now, do you understand _why_ it worked? Can you explain it to me?



> But now, imagine that I have all those divs and I wanted a gradient repeat-x on the top and one on the bottom bellow every thing, how could I do it?
> 
> I try to attach two background images at the same time and obviously doesn`t work.


I have a very vivid imagination but not quite that vivid. 

Can you post a screenshot of what you tried (even though it failed) to get an idea of where you want the gradient?

Peace...


----------



## Gesp (Nov 29, 2008)

I understanded, but I don`t think I can explain it very well, but here goes:
All of the coding is read by the browser as a vertical segment (for example). So inserting float attributes on an element, even though it is defined, in the code, as an internal part of a certain object, is "floats" and skips the standard segment that the browser follows on the code comprehension.
So, what we`ve got to do is place a clear attribute so it "clears" the code reading from skipping (floating) to a side or another, as if it maked the browser forget it was skipping, but still applying the defined attribute.

Hmm, not a very good explanation, but I think its on the point.

Well, pardon me, but I thought I had it explained very simple and easy to understand.
But perhaps I just didn`t once again.

So what I wanted to do is something like this:

The gradients are on the back of all of the structure and are repeating x, the top gradient is on the top and the bottom is right stick to the bottom like a footer, but are both behind or repeating on both sides as if they were.


----------



## tomdkat (May 6, 2006)

Gotcha. That should be relatively easy to do. I'm not in a position to work up an example now but basically what you can do is this:


```
<body>
<div id="master">
[b][color=red]<div id="master-gradient-background-bottom">[/color][/b]
<div id="header">
```
and

```
div#master{margin:0 auto; padding:0 auto; width:1024px; height:100%;[b][color=red]posiiton: relative;background: url(gradient-background-top.jpg) no-repeat top center;[/color][/b]}
[b][color=red]div#master-gradient-background-bottom{margin:0 auto; padding:0 auto; width:1024px; height:100%; background: url(gradient-background-bottom.jpg) no-repeat bottom center; position: absolute; top:0; left: 0;}
[/color][/b]
```
What that basically does is split the gradient background across two nested DIVs. The inner DIV has absolute positioning to "stack" it on top of the outer DIV, which has the top gradient.

I'll post a better, working example tomorrow.

EDIT: Strike the above, it's wrong.  The solution is much simpler. Assign the top gradient as the background of the element and the bottom gradient as the background of the "" element:


```
html { background: url(gradient-background-top.jpg) repeat-x top center; }
body { background: url(gradient-background-bottom.jpg) repeat-x bottom center;}
```
I'll post a working example tomorrow.

EDIT #2: Ok, so it's not tomorrow yet but I've got a working example. Attached is a screenshot of the page viewed in Firefox 3.6.3 as well as the gradient background images I made. If you use transparent PNGs, the gradients can blend with the page background color you want to use.

Here is the HTML:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Gradient Background Test</title>
<style type="text/css">
html {
  margin: 0;
  padding: 0;
  background-repeat: repeat-x;
  height: 100%;
  background-image: url(gradient-background-top.png);
}
body {
  margin: 0;
  padding: 0;
  background-image: url(gradient-background-bottom.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-color: transparent;
  height: 100%;
}

</style>
</head>
<body>
<div style="border-style: solid; width: 800px; height: 475px; margin-right: auto; margin-left: auto; margin-top: 30px; background-color: rgb(0, 204, 204); opacity: 0.3;"><br>
</div>
</body>
</html>
```
As for the "clear" attribute on the DIV, it's a bit simpler than your explanation. 

Since the DIVs with the float applied are not part of the "normal flow" of the elements in the containing DIV, adding a DIV with the "clear" attribute that does NOT have a float applied at the very bottom of the containing DIV causes that DIV to appear below the DIVs with the float applied. Since this DIV doesn't have a float applied, it's part of the "normal flow" of elements in the containing DIV, resulting in the containing DIV having the desired height.

Peace...


----------



## Gesp (Nov 29, 2008)

Thanks for the solution, but I tryed it and my result is different.

Besides, I tryed on my site and the result was different too.

The height of the page was different from yours.
In my site the problem was similar but I don`t know why, eve though I`ve tryed html, body and the master div as height:100% the footer repeated image doesn`t appear on the bottom of the page, but a bit higher.

Just look:


----------



## tomdkat (May 6, 2006)

Based on that screenshot you posted, you "tweaked" the above HTML some since the DIV isn't centered on the page.

Since I have never seen your *actual* page (only test versions without graphics, etc) I can't comment on what you're actually seeing since you haven't shown us that yet.

The height of the page won't make a different. Attached is my test HTML above shown on a monitor running at a higher resolution. So, I'll play around with the test page you posted above and will see what happens. 

Peace...


----------



## Gesp (Nov 29, 2008)

No, Its centered, just didn`t cut it out right (the image).

Ok, I`ll add my footer codes to the test page I left on a previous post and then will show you.


----------



## tomdkat (May 6, 2006)

Ok, I played around with your test HTML above and came up with something that just might work for you.

First, you are applying a float to far too many elements and you're specifying a height of 100% on far too many DIVs. You should learn more about CSS styling to help make this kind of work easier for you. 

Before we get into what I did, do the attached screenshots look anything like what you're after?

Peace...


----------



## Gesp (Nov 29, 2008)

Yes, its that what I`m looking for

Usually I review the codes only at the end of the page and start to compress it and removing unnecessary parts of it.

But yes, how did you manage to achieve that end?


----------



## tomdkat (May 6, 2006)

Gesp said:


> Usually I review the codes only at the end of the page and start to compress it and removing unnecessary parts of it.


If you change your approach to design the page iteratively (meaning in phases and make sure things are holding together as you implement each phase), you can identify issues sooner than later and come up with better solutions to problems you encounter.

Ok, what did I do? Not much magic but there is a little bit. 

Ok, first, I added the background images to the and tags (step #1):


```
html { margin: 0; padding: 0; background: url(gradient-background-top.png) repeat-x top center; height: 100%; }
body { margin: 0; padding: 0; height: 100%; [b][color=red]background:transparent[/color][/b] url(gradient-background-bottom.png) repeat-x bottom center;}
```
Note, I made the element have a transparent background so the top gradient image (which is on the element) will show through. If you set a background color on the element, the top gradient image will be hidden. There are tricks you can do to get around this but I won't get into those here. Also, note the *margin* and *padding* attributes on the element. I removed the "auto" setting for the left, right, and bottom parts of the element to remove ALL margins and padding. This way, the body background gradient fills the entire browser window, especially with the "height: 100%;" specified. You can experiment with automatic margins and padding on the element as necessary. My approach is not what you _have_ to do, only what I chose to do.

Next, I looked at the content DIVs to see how they were laying out. Doing this, I found some "height: 100%" attributes were contributing to the page misaligning. So, I changed these rules (step #2):

```
div#master_content{width:1024px; height:100%}

div#post_tab{width:620px; height:100%; background:#FC0; border: dotted red;}

div#readmore{width:72px; height:auto; padding:6px; background:#CCC; float:left; margin:15px 0px 0px 510px}
```
to these:

```
div#master_content{width:1024px; [b][color=red]height:auto[/color][/b];}

div#post_tab{width:620px; [b][color=red]height:auto[/color][/b]; background:#FC0; border: dotted red;}

div#readmore{width:72px; height:auto; padding:6px; background:#CCC; margin:15px 0px 0px 510px;}
```
In the case of the #readmore rule, you already have a left margin of 510px specified so the float is *not needed*. Removing that attribute brings this DIV BACK into the "normal flow" so the DIV with the "clear" attribute is no longer needed. There are a ton of other elements with floats applied which could probably be removed but you can tackle that.

Doing that helped some, but still didn't fix everything. So, I changed the height of the element from "100%" to "auto" and that helped with the rendering quite a bit (step #3):


```
body {margin:0; padding:0; height: auto; background:transparent url(gradient-background-bottom.png) repeat-x bottom center; }
```
However, the rendering broke if the browser window was "windowed" vs "maximized". Fooey.

Then I realized that specifying the a height of 100% on the element, causes the background image to display at 100% height of the *displayed part of the page*. If the vertical scrollbar is enabled, that means there is more content to be viewed on the page that won't fit in the part of the page that is currently displayed. This is when the bricks fell and hit me on the head.  The "min-height" attribute will come in handy. So, I gave that a try and voila, the bottom gradient started behaving itself! (Step #4)


```
body {margin:0; padding:0; height: auto; [b][color=red]min-height: 100%;[/color][/b] background:transparent url(gradient-background-bottom.png) repeat-x bottom center; }
```
Of course, this isn't a bulletproof solution in that I don't think IE6 will handle this very well. I tried my test page in IE8 and IE7 (IE8 compatibility mode) and it renders just like in Opera and Firefox.

My approach is just one and probably isn't the best or most efficient. If nothing else, this should be a starting point for you.

I've attached screenshots of the steps I described above.

Peace...


----------



## tomdkat (May 6, 2006)

Here are the rest of the screenshots. 

Peace...


----------



## Gesp (Nov 29, 2008)

The 100% height I`ve got in the post_tab div is because this is supost to repeat Y till the bottom of the page


----------



## tomdkat (May 6, 2006)

Gesp said:


> The 100% height I`ve got in the post_tab div is because this is supost to repeat Y till the bottom of the page


That's cool. I've provided enough information for you to make the appropriate adjustments. Considering I haven't seen any _actual_ pages yet, I'm not sure what else you can reasonably expect.  LOL

At this point, you should have all the information you need to get everything working the way you want.

Peace...


----------



## Gesp (Nov 29, 2008)

Ok, I`ve adapted the code to fit all:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

MyWebSite

          BUTTON1
             BUTTON2
             BUTTON3
             BUTTON4
             BUTTON5

             Jump to page
          1

            Search here

                21, Mar
                Here is a title: How to make a very simple title now

                    Posted be: Gespinha
                    3 coments
                    In: TUTORIALS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue risus sit amet enim egestas eu malesuada elit euismod. Nam consectetur eros tempor enim luctus quis semper nulla rutrum.

 Donec luctus posuere eros eu bibendum. Proin dignissim nisl in eros volutpat at eleifend magna ornare. Pellentesque semper mattis eros, feugiat dapibus lacus sollicitudin eu. Duis accumsan metus ut nisi ultrices a posuere mauris imperdiet. Phasellus vehicula vulputate diam, ac iaculis ante dictum et. Morbi ut eros lectus, ut rhoncus magna.

            Read more

            Subscribe:

            Sponsors:

      Links 
        [*]About

          [*]Contact us

            [*]Our Team

      Subscribe

      [*]RSS feed

          [*]E-mail

            [*]Twitter

      Afiliates 
        [*]Site1.com
        [*]Site2.com

          [*]Site3.com
```
My three problems here are:

1- I`ve tried to change the heights and all, but nothing moves and I wanted the sidebar_tab div to stretch to the footer (bottom of the page).
2- The footer coding might not be right, could you check to see if its done right?
3- my gradient backgrounds (top and bottom) are acting funny, could you see what's the source, because I`ve tried playing with lots of things here and nothing.

Sorry about all of these questions, but I really don`t know what could be the problems here.


----------



## tomdkat (May 6, 2006)

> 3- my gradient backgrounds (top and bottom) are acting funny, could you see what's the source, because I`ve tried playing with lots of things here and nothing.[/COLOR]


Try removing the height specified on the element:


```
html{margin:0 auto; padding:0 auto; background:#95e2fd url(../images/FooterRepeat.png) repeat-x bottom}
```
I'll post more later.

Peace...


----------



## Gesp (Nov 29, 2008)

It really irratates me.

How come I tried all sorts of combinations and didn`t manage to achieve what I wanted.

Thanks for that one , the background is finally fine.

Now I read in a forum one guy saying that I had to understand the repeating Y process, and that it worked like this.

If I have this:

HTM/Body/Div1/Div2

And I specified that the height of Div2 was 100% so it could repeat the background image all the way to the bottom of the page I firstly had to "inform" the browser about the height of the other elements as well, or else I would be considering 100% of the height of Div2 itself only.

is that correct?
Like, now I had to put the height:100% attribute in all the other elements?

Because that doesn`t make sense on my case, as I had to remove the HTML height to put the backgrounds working ok.


----------



## tomdkat (May 6, 2006)

Gesp said:


> It really irratates me.
> 
> How come I tried all sorts of combinations and didn`t manage to achieve what I wanted.


Because you're clearly not fully understanding what's going on.  From the code, it looks like you're trying things, almost at random, just to get the project done. I understand wanting to get it finished and published on the web but the sooner you're able to understand what's going on with the styling, the easier things like this will become.



> Now I read in a forum one guy saying that I had to understand the repeating Y process, and that it worked like this.
> 
> If I have this:
> 
> ...


Let me look at the other two issues in your list and then we can talk about the "height" issue.

Peace...


----------



## tomdkat (May 6, 2006)

Gesp said:


> 1- I`ve tried to change the heights and all, but nothing moves and I wanted the sidebar_tab div to stretch to the footer (bottom of the page).


Ok, before we get into this, does the attached screenshot look correct?

Peace...


----------



## Gesp (Nov 29, 2008)

Yes, it`s definitely it.


----------



## tomdkat (May 6, 2006)

Gesp said:


> Now I read in a forum one guy saying that I had to understand the repeating Y process, and that it worked like this.
> 
> If I have this:
> 
> ...


Yep, if you're going to specify a height as a percentage, the browser will need to know the percentage of what reference or "base" height in order to calculate the height.

For example, consider this:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>


  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

  <title>percentages</title>


</head>
<body>

<div style="border-style: solid; width: 100px; height: 100px; margin-right: auto; margin-left: auto;">

<div style="border-style: dotted; width: 50%; height: 50%; margin-right: auto; margin-left: auto;">small
 DIV</div>

</div>


<br>


<div style="border-style: solid; width: 75%; height: 20%; margin-right: auto; margin-left: auto;">
<div style="border-style: dotted; width: 100%; height: 100%;">another DIV</div>
</div>


</body>
</html>
```
In the first example, the containing DIV has an absolute height specified, so the height of the nested DIV can be correctly calculated.

In the second example, the containing DIV has a percentage height specified and the browser doesn't know what that percentage is of, so it makes the height of the DIV the height of everything in it.

Whether or not you "have" to specify a height of 100% on any given DIV will really depend on the design of the page and how you need the elements to lay out. I was able t change some of the 100% height specifications in your code to "auto" and the page laid out the same, so the 100% height wasn't "needed" in those cases.

Peace...


----------



## Gesp (Nov 29, 2008)

So, once I needed a specified total height of the page to insure that the sidebar_tab div had the 100% height value on, how could I specify this total height on an other way than considering the total height of the html or body to 100%?


----------



## tomdkat (May 6, 2006)

Gesp said:


> 1- I`ve tried to change the heights and all, but nothing moves and I wanted the sidebar_tab div to stretch to the footer (bottom of the page).


Ok, since that other screenshot was correct, we can talk about what I did.

First, turning on borders can REALLY help figure out how elements are laying out. So, I turned on some borders to see how the "sidebar_tab", "post_tab", "footer" and "master_content" DIVs were laying out. That's shown in screenshot #1. You'll see the thin yellow border above the "siebar_tab" and "post_tab" DIVs. That is the border of the "master_content" DIV. Since the "sidebar_tab" and "post_tab" DIVs both have floats applied, the "master_content" DIV renders as if it's empty, hence the thin yellow border.

The "post_tab" DIV has a white border along the bottom. You can see that's flush against the top border of the footer DIV. So, we now know the "post_tab" DIV is reaching the footer DIV ok. That is probably a coincidence and will probably change with the amount of content in the DIV. If the amount of content in it now is the maximum amount that could be in there, you should be in good shape. If there could be MORE content in that DIV than is displayed now, you'll have layout issues later on.

The "sidebar_tab" DIV has a large red border along the bottom. Clearly, that's NOT flush against the footer DIV. So, how do we get the height of the "sidebar_tab" DIV increased? Well, it's already got a height of 100% specified:

```
div#sidebar_tab{width:377px; [b][color=red]height:100%;[/color][/b] float:left; margin:5px 20px 0px 5px; background:#FFF; border:1px solid #143E60;}
```
So, there must be something we must do to get the appropriate height. I usually don't like doing this but in some cases it's necessary and it appears (at least) to be necessary here. Using absolute positioning of the "sidebar_tab" DIV might do what we want.

So, let's change the "sidebar_tab" DIV to have an absolute position and see what happens:

```
div#sidebar_tab{width:377px; height:100%; [b][color=red]position: absolute; top: 0; right: 0; bottom: 0;[/color][/b] margin:5px 20px 0px 5px; background:#FFF; border:1px solid #143E60;}
```
The "float" attribute doesn't apply to an absolutely positioned element so we can remove that from the style rule. Well, this does change the position of the "sidebar_tab" DIV but not quite where we want it. See screenshot #2.

How do we get the "sidebar_tab" DIV positioned correctly? We need to change the "master_content" DIV to be positioned as well. In this case, we want the "master_content" DIV to remain where it is now, so we need to specify a *relative* position attribute:

```
div#master_content{width:1024px; height:100%; [b][color=red]position: relative;[/color][/b]}
```
That changes the position of the "sidebar_tab" DIV, but clearly it's not displaying correctly because the white background is missing. However, notice the red BOTTOM border of the "sidebar_tab" DIV is displaying ABOVE the content. Why is this happening? Oh yeah, ALL of the DIVs in the "master_content" DIV have a float applied, so the "master_content" DIV is rendering as if it's empty. If we add a DIV at the BOTTOM of the "master_content" DIV with a "clear" attribute set, the height of the "master_content" DIV should be right. Let's try that:

```
</div>
[b][color=red]    <div style="clear: both;"></div>[/color][/b]
</div> <!-- End of "master_content" DIV -->
<div class="clearfooter">
```
See screentshot #4. Now, the "sidebar_tab" DIV is where we want it AND it's touching the footer DIV now. Cool.

The problem now is, the "sidebar_tab" DIV is spilling INTO the footer DIV, and that's not right either. Hmmm, well, taking another look at the "sidebar_tab" DIV style rules, we see a 5px top margin is applied. What happens if we remove that?

```
div#sidebar_tab{width:377px; height:100%; position: absolute; top: 0; bottom: 0; right: 0; [b][color=red]margin:0px[/color][/b] 20px 0px 5px; background:#FFF; border:1px solid #143E60;}
```
Cool, the "sidebar_tab" DIV is right where we want it. See screenshot #5. Now, we can turn off the borders we temporarily enabled and voila, the "sidebar_bar" DIV now has the proper height and is in the proper position.

Peace...


----------



## tomdkat (May 6, 2006)

Gesp said:


> So, once I needed a specified total height of the page to insure that the sidebar_tab div had the 100% height value on, how could I specify this total height on an other way than considering the total height of the html or body to 100%?


Let me know if this is still a question after reading my comments above.

Peace...


----------



## tomdkat (May 6, 2006)

Gesp said:


> 2- The footer coding might not be right, could you check to see if its done right?


What is wrong with the footer? Does it not display the way you want?

Peace...


----------



## Gesp (Nov 29, 2008)

Yes, your a pro man, all problems solved here 
The footer question was just to see if the code is correct or if it could create other future problems, but yes it displays like I want.

Thanks man, really... For the last two threads you`ve been like teacher, I really appreciate that 

Well, It`s still going to take a wile to finish the content of the site, but I`d be more than glad If you saw it after its completed and hosted on the web. Later then I`ll contact you through here, yes?

Thanks again, lets consider this: solved


----------



## tomdkat (May 6, 2006)

Glad things are working out ok. Are you understanding what I'm describing above?

If this is solved, please mark it "Solved" using the button on the first post of the thread. 

Peace...


----------



## Gesp (Nov 29, 2008)

Yes, at least much better then when we started. I`ve been looking for a book about CSS in order to strengthen and open my experience wider about the style sheets attributes and usage and till the end of the month I should be getting my self on a better shape on this stuff 

Yes, thought you`d like to say something before that 

Solved


----------

