Creating a frameless site - how do I position my <div>s

[Murray]

Trevor:

Consider this page -

http://www.murraytestingsite.com/FPtrevor.html

Look at the CSS there....

 

[Kevin Spencer]

Bad URL, Murray. Want to try again?

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Murray]

Gah -

http://www.murraytestsite.com/FPtrevor.html

 

[Kevin Spencer]

Hi Murray,

When I viewed that page in both browsers, the "right" div was below the
"left" div.

It seemed to me that I had run across this issue before, and after checking
my documentation pages, using the DOM inspector, and the test page DOM
inspector, I believe that the problem has to do with the width of the div. I
solved this issue in my model by calculating the width to be exactly the
remaining width of the page (after the width of the first 2 divs, and before
the edge of the border divs). However, it occurs to me that it might be
handled using only CSS, by using a percentage for the width style, so that
the percentages of both divs add up to 100%. Also, it is important that the
divs have 0 margin and padding, as this will affect IE and FireFox
differently. Still, I can't be sure, and I don't have the time to try it
out. The downside to this technique is that, while the frames will "scale"
nicely when the window is resized, the left frame will always be a
percentage rather then a fixed size, which is desirable. It would be,
however, possible to use JavaScript to calculate the width, by subtracting
the left div's total width from the document's width.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Murray]

Yes - I didn't fiddle with that part of the layout, and you're absolutely
right - this is what is called 'float drop'. It's what happens when the
viewport is narrower than the combined width of the floated elements. This
is where IE needs min-width support.

I was trying to demonstrate that such a layout doesn't need such complex
CSS, and certainly doesn't need so many custom classes....

 

[Kevin Spencer]

I was trying to demonstrate that such a layout doesn't need such complex

CSS, and certainly doesn't need so many custom classes....

Understood, Murray!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Murray]

Twin tuttet scalawag? 8)

 

[Kevin Spencer]

It's a phonemagram!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Trevor L.]

Murray,
I am trying to understand your recommendation

Trevor:

Just a comment - your CSS would be ever so much easier to understand
and troubleshoot if you eliminate all of the custom classes.

By custom classes, do you mean classes which are specific to only one page
or even one (or two) element(s) within one page.

If so, what is the alternative ?
Use in-line styles (i.e.style="........" within a tag) ?
Avoid CSS and use the HTML attributes ?

I try not to use a single one on my pages (I often fail, but one or two is
not bad).

A single one of what ?
Are you saying you don't use styles which are "single" in the sense that
they apply to only one element.

Learn how to use descendent selectors instead. That way
you can build your CSS as you build your page - top down. All the
rules that affect a given container and its contents are grouped
together and it becomes much easier to grasp....

I think I understand but I am not sure.

 

[Trevor L.]

Well, I've stuffed it up again.

I have been trying so many different things to get this site to look OK. Now
I find that when I reduce the size of the browser window the "right" <div>
overlaps the "left".

I had it correct before, now it is not. Very frustrating.

What combination of all the different suggestions that I have tried do I
need to put in place prevent this from occurring ?!!

I hope this isn't a rhetorical question but maybe it is.

As soon as I try one suggestion to fix one aspect, another aspect which was
OK goes haywire. Maybe there is no solution and frames rule ;-)

The site is http://tandcl.homemail.com.au/newweb/index.html

 

[Murray]

Trevor:

Look at my suggested layout. Adjust the #left/#right div widths as
necessary to give you the desired 'minimum' width. If you really want I'll
show you how to do a real minimum width....

 

[Kevin Spencer]

As soon as I try one suggestion to fix one aspect, another aspect which

was OK goes haywire. Maybe there is no solution and frames rule ;-)

Hi Trevor,

Why do you think it took me a month to write my frameless frameset? ;-)

At any rate, it looks like you've come nearly to a solution. I believe the
overlapping problem is due to the content in the table. When you shrink the
window, it pushes the right div wider than it's supposed to be. But perhaps
using "min-width" would fix it.

It's tough, because the standards are only recently being adopted by the
vendors, and many of the standards are relatively new. Thankfully, the
vendors seem to be cooperating at last!

Sometimes, you just have to do a lot of experimenting. And don't forget
those tools in FireFox!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Trevor L.]

Thanks,
Murray and Kevin

Murray,
I have been checking against your code many times.

I have been commenting rather than removing code that doesn't work, and then
checking back against how you did it. I then maybe restore one piece of
commented code at a time, recheck it. etc.

I think I now have it solved (of course, I have said that before, so I hope
I don't jinx myself)

This is my CSS
body {
background-color: #d0edda; /* a light greeen */
background-image: url("images/display/parchmnt.gif");
background-repeat: repeat-y;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 81.25%;
text-align: left;
padding: 0;
margin: 0 auto;
}

a img {border-style: none;
float: left;}

..gardbg {
background-image: url("images/display/04-08-24-1-bird-bath.jpg");
background-repeat: repeat;
background-attachment: fixed;
}

#header , #left
{
background-color: #f2efd9; /* parchment */
background-image: url("images/display/parchmnt.gif");
}

#left {float: left; width: 14%;}

#right {float: left; width: 86%;
background-image:
url("http://tandcl.homemail.com.au/newweb/images/display/04-08-24-1-bird-bath.jpg");
}

#footer {/* not used
clear:both;
left: 0;
vertical-align:bottom; */}

The HTML is
<!-- Start of Header Division -->
<div id="header">
<!-- Header code -->
</div>
<!-- End of Header Division -->

<!-- Start of Left Division -->
<div id="left">
<!-- Left (menu) code -->
</div>
<!-- End of Left Division -->

<!-- Start of Right Division -->
<div id="right" class="gardbg">
<script type="text/javascript">breadCrumbs()</script><br /><br />

<!-- Main Code Starts here -->
<!-- Main code. May contain other <div>s but all are closed -->
<!-- Main Code Ends here -->
<div id="footer" align="center">
<input type="button" value="Home" class="hidden"
onclick="location.href='index.html'"/>
</div>

</div>
<!-- End Right Division-->

I found a few tricks
1. By adding the parchment background to the body, #header and #left, it
displays just as if there were two frames #header and #left with that
background image.
Previously, the background only extended down the #left <div> as far as the
text in that <div>. Now it occupies the entire depth. Of course, I had to
make it as wide as the left <div>.

2. I added a background colour to the #header and #left <div>s that matches
the parchment colour. This allows for cases where resizing the browser
window causes the <div> to get too narrow or too shallow. The other
background is then presented, almost seamlessly.

3. Adding the garden background to the #right <div> causes behaviour that is
*almost* as if that background were the body background image.
Almost, but not quite. It only extends as far as the text in that <div>,
which varies from page to page.

What I would love to solve is how to extend this image to the same height
(depth actually) as the parchment background, i.e. the entire window. In the
meantime, I have tried to add a coloured background which matches as closely
as I can to the major colour of the image. It isn't a perfect match, so I
may keep trying.

I added a footer <div> but in testing it, it did nothing so this is not the
solution.

4. I used *no* position spec, either absolute or relative in the CSS

5. The #left and #right <div> have widths specified in % that add to 100%

It looks so simple, but any change (e.g adding different widths, start
positions, or position: absolute/relative specs) can throw it out quite
badly.

If you really want I'll show you how to do a real minimum width....

This would be great, but I have to careful, as I said above. A small change
can have drastic results.

But perhaps using "min-width" would fix it.

Maybe, but I found that I have to use % widths. Can I use min-width with a %
spec.
If so, what ?
I used 14% and 86% for my 2 <div>s. Should one set them to low values ?
Also, it wouldn't work in IE, I guess

I'll post my altered code to http://tandcl.homemail.com.au/newweb after I
post this

 

[Kevin Spencer]

Hi Trevor,

I just posted a link to a new Microsoft IE Add-on that works just like the
FireFox Web Developer tools. You should find it very helpful:

http://www.microsoft.com/downloads/...64-672d-4511-bb3e-2d5e1db91038&DisplayLang=en

Maybe, but I found that I have to use % widths. Can I use min-width with a
% spec.
If so, what ?
I used 14% and 86% for my 2 <div>s. Should one set them to low values ?
Also, it wouldn't work in IE, I guess

IE does support percentage values for width and height, so I presume that
they support it for minwidth and minheight. The tool I mentioned should help
you ascertain this.

One thing to keep in mind id the difference between the way IE and Mozilla
handle margins and padding in Mozilla browsers, margins and padding add to
the total width/height calculations of elements, whereas in IE, they do not.

Also, did you note the links I posted yesterday?

When you're ready, post the link to your site again, and I'll take another
look!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Murray]

IE does support percentage values for width and height, so I presume that
they support it for minwidth and minheight. The tool I mentioned should
help you ascertain this.

IE does not support min-width/min-height.

One thing to keep in mind id the difference between the way IE and Mozilla
handle margins and padding in Mozilla browsers, margins and padding add to
the total width/height calculations of elements, whereas in IE, they do
not.

This is only true on pages without valid and complete doctypes. In
Standards mode, but IE>5 and Mozilla get the box model right.

 

[Murray]

Trevor:

4. I used *no* position spec, either absolute or relative in the CSS
BRAVO!

This would be great, but I have to careful, as I said above. A small
change can have drastic results.

I'll take a look at the final and see what I can discover.

 

[Murray]

Trevor:

Get rid of the background-attachment:fixed style - IE doesn't play nicely
with such things not used as a page background.

 

[Trevor L.]

Hi Trevor,

I just posted a link to a new Microsoft IE Add-on that works just
like the FireFox Web Developer tools. You should find it very helpful:

http://www.microsoft.com/downloads/...64-672d-4511-bb3e-2d5e1db91038&DisplayLang=en

Yes, I found this in the NG and installed it. I'll see what it can tell me

One thing to keep in mind id the difference between the way IE and
Mozilla handle margins and padding in Mozilla browsers, margins and
padding add to the total width/height calculations of elements,
whereas in IE, they do not.

Murray has given some more info. on this. I have valid DOCTYPES, so I will
check this again.

Also, did you note the links I posted yesterday?

Yep, great reading ahead

When you're ready, post the link to your site again, and I'll take
another look!

Ta,
I have found another hint from another forum which I will add if it works
out OK

 

[Trevor L.]

Kevin and Murray,
Thanks for offering to look at my site again.

I managed to delete the newgsroup from OE (some slip of the finger in OE),
so I am replying via the web. (It took some time to find it too)

I have now put up another test version of my site
http://tandcl.homemail.com.au/newweb/index.html

Some comments/queries
1. I added a footer<div>
#footer
{
position: absolute;
vertical-align: bottom;
bottom: 0;
left: 14%;
width: 86%;
text-align: center;
overflow: auto;
}
It contains a "Home" button (except on the home page)
This seems OK but I think it may obscure the "right" <div> on a page if that
<div> gets too long.

2. How do I get the "right" <div> to scroll?
I added overflow:auto to the CSS but it doesn't seem to do anything.

Perhaps the pages aren't long enough. Although I did notice that my Site Map
page (now out of date, of course) does go right to the bottom when expanded.
At one time, it hid part of the footer <div>. I took a line or two out of the
page, and it came good. But this is why I would like a scroll bar.

3. Above the "footer" <div> is a silver/grey background that appears when
the "right" <div> above it is too short, but this is the colour of the body
showing through. (This colour - #eee - only appears in the CSS body spec.)

How can I get the image (the garden picture) to appear instead of this
background?

When I added a background image to "footer", it only appeared as background
to the "Home" button. This indicates the "footer" <div> is only as high as
the button itself.

So think I may need a way to increase the height of the "footer" <div> and
still bottom justify the button. The height of course is not constant; on
each page it would need to be a different height. Alternatively, increasing
the height of the "right" <div> may help.

So perhaps this needs Javascript. I can't think what, though. I tried
clientHeight, height and various other combinations without success.

I'll read some of the references you gave, Kevin and see if it helps. (I'll
have to retrieve them from the web due to my slip of the finger.)

Trevor L.@Canberra

 

[Murray]

#footer

{
position: absolute;
vertical-align: bottom;

Why position:absolute? Just let the footer 'float' under everythign else -
then you do not need to position anything. Also, vertical-align will do
nothing for a block tag.

2. How do I get the "right" <div> to scroll?
I added overflow:auto to the CSS but it doesn't seem to do anything.

Ugh. Why? Try overflow:scroll.

I hope I can say that I hate the direction you are heading in here. I get
the feeling that you are 'pimping' your page with everything including the
coon tail on the antenna, the running boards, and the whitewall tires. Keep
it simple, Trevor. You are just trying to do too much and confusing yourself
in the process. The page is already unmanageable, and the stylesheets are
once again littered with custom classes.....