| Author |
Controlling DIV height in CSS
|
|
| gordonwd 2006-02-12, 6:40 pm |
| I'm about to jump into my first CSS-layout type site design, and I'm going to
use the basic layout that was used in Adrian Senior's excellent "Understanding
CSS" tutorials, i.e., a banner div, then a main content div with a floating
"left column" div, and then a footer that clears the floaters.
It's obviously a good idea to let the height of a div adjust itself according
to the contents, which is what the main content div will do. But I'd also like
the left column div to adjust itself to the same height as the content div that
is next to it, so that it spans vertically between the banner and footer divs.
This column will have a contrasting background color (or image), so it should
appear along the whole height of that part of the page even though there is no
actual content.
Can this be done in CSS? Or, if not, what if I used an OnLoad event and in the
Javascript had something like "leftcol.height = content.height"?
| |
| Murray *TMM* 2006-02-12, 6:40 pm |
| Google "faux column".
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Pablo" <dell@takeoutdellwebsites.com> wrote in message
news:dsiaga$mo3$1@forums.macromedia.com...
> Yes, you will need to use a content background image that repeats on a y
> axis. There is a tutorial on the mm site I think.
>
>
> --
> Pablo
>
> Web
> ....................................
> http://www.dellwebsites.com
> ....................................
> Photography
> ....................................
> http://www.dellimages.com
> ....................................
>
> "gordonwd" <webforumsuser@macromedia.com> wrote in message
> news:dsia54$mb1$1@forums.macromedia.com...
>
>
| |
| Osgood 2006-02-12, 6:40 pm |
| gordonwd wrote:
> Can this be done in CSS?
No, not in css.
Or, if not, what if I used an OnLoad event and in the
> Javascript had something like "leftcol.height = content.height"?
You have two options:
1) Use a repeating background in the <div> which contains the two
floated <divs>
2) Javascript.
http://www.projectseven.com/tutoria...lumns/index.htm
| |
|
| Yes, you will need to use a content background image that repeats on a y
axis. There is a tutorial on the mm site I think.
--
Pablo
Web
.....................................
http://www.dellwebsites.com
.....................................
Photography
.....................................
http://www.dellimages.com
.....................................
"gordonwd" <webforumsuser@macromedia.com> wrote in message
news:dsia54$mb1$1@forums.macromedia.com...
> I'm about to jump into my first CSS-layout type site design, and I'm going
> to
> use the basic layout that was used in Adrian Senior's excellent
> "Understanding
> CSS" tutorials, i.e., a banner div, then a main content div with a
> floating
> "left column" div, and then a footer that clears the floaters.
>
> It's obviously a good idea to let the height of a div adjust itself
> according
> to the contents, which is what the main content div will do. But I'd also
> like
> the left column div to adjust itself to the same height as the content div
> that
> is next to it, so that it spans vertically between the banner and footer
> divs.
> This column will have a contrasting background color (or image), so it
> should
> appear along the whole height of that part of the page even though there
> is no
> actual content.
>
> Can this be done in CSS? Or, if not, what if I used an OnLoad event and in
> the
> Javascript had something like "leftcol.height = content.height"?
>
| |
|
|
| Michael Fesser 2006-02-12, 6:40 pm |
| ..oO(Osgood)
>gordonwd wrote:
>
>
>No, not in css.
Yes, in CSS, but not in IE. One way to solve this problem would be
display: table-cell
But of course this is not supported in IE ...
Micha
| |
| Thierry | www.TJKDesign.com 2006-02-12, 6:40 pm |
| Michael Fesser wrote:
> .oO(Osgood)
>
>
> Yes, in CSS, but not in IE. One way to solve this problem would be
> display: table-cell
>
> But of course this is not supported in IE ...
This is an interesting approach:
http://www.positioniseverything.net...out/equalheight
Not that I encourage anybody to try that at home...
;-)
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....
| |
| Osgood 2006-02-12, 6:40 pm |
| Michael Fesser wrote:
> Yes, in CSS, but not in IE. One way to solve this problem would be
>
> display: table-cell
>
> But of course this is not supported in IE ...
How does that work. Can you give a simple code example, two <divs> side
by side?
I've tried the normal way, then added display: table-cell; but nothing
seems to happen.
| |
|
|
| Osgood 2006-02-12, 6:40 pm |
| Osgood wrote:
> How does that work. Can you give a simple code example, two <divs> side
> by side?
>
> I've tried the normal way, then added display: table-cell; but nothing
> seems to happen.
>
Had some info on the link that Thierry supplied so I had a go. Cant
center the thing yet but at least it does work in Firefox at least.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#outerWrapper1 {
display: table-row;
width: 600px;
margin: 0 auto;
}
#outerWrapper2 {
display: table-row;
}
#outerWrapper2 div {
width: 600px;
display: table-cell;
}
#left, #right {
width: 300px;
}
#left {
background-color: #CC9900;
}
#right {
background-color: #CCCC99;
}
p {
margin: 0;
padding: 6px 15px;
}
</style>
</head>
<body>
<div id="outerWrapper1">
<div id="outerWrapper2">
<div id="wrapper">
<div id="left">
<p>Some filler text. Some filler text. Some filler text. Some filler
text.</p>
<p>Some filler text. Some filler text. Some filler text. Some filler
text.</p></div>
<div id="right"><p>Some filler text.</p></div>
</div>
</div>
</div>
</body>
</html>
| |
| Osgood 2006-02-12, 6:40 pm |
| Osgood wrote:
> Had some info on the link that Thierry supplied so I had a go. Cant
> center the thing yet but at least it does work in Firefox at least.
'table' not 'table-row'. Thats centers it
#outerWrapper1 {
display: table;
width: 600px;
margin: 0 auto;
}
| |
| Michael Fesser 2006-02-12, 6:40 pm |
| ..oO(Osgood)
>Michael Fesser wrote:
>
>
>
>
>How does that work. Can you give a simple code example, two <divs> side
>by side?
This seems to be enough:
http://mfesser.de/test/csstable.html
Works as expected in Opera and FF.
Micha
| |
| Osgood 2006-02-12, 6:40 pm |
| Michael Fesser wrote:
> This seems to be enough:
>
> http://mfesser.de/test/csstable.html
>
> Works as expected in Opera and FF.
Its a lot less code that what I used. Don't think it will be much good
for some time to come though until IE6 dies out. Am I right in thinking
IE7 will be able to support it?
| |
| Murray *TMM* 2006-02-12, 6:40 pm |
| Not necessarily, no.
I don't recall right now - but the details are on the Microsoft site....
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Osgood" <notavailable@atthisaddress.com> wrote in message
news:dsignn$1un$1@forums.macromedia.com...
> Michael Fesser wrote:
>
>
>
>
> Its a lot less code that what I used. Don't think it will be much good for
> some time to come though until IE6 dies out. Am I right in thinking IE7
> will be able to support it?
>
| |
| Osgood 2006-02-12, 6:40 pm |
| Murray *TMM* wrote:
> Not necessarily, no.
>
> I don't recall right now - but the details are on the Microsoft site....
oh man, then its gonna be useless for a good few years then.
| |
| Murray *TMM* 2006-02-12, 6:40 pm |
| That's throwing the baby out with the wash water. I certainly wouldn't say
it's going to be useless. It will indeed be way better than IE6.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Osgood" <notavailable@atthisaddress.com> wrote in message
news:dsih0v$1un$2@forums.macromedia.com...
> Murray *TMM* wrote:
>
>
> oh man, then its gonna be useless for a good few years then.
>
| |
| Osgood 2006-02-12, 6:40 pm |
| Murray *TMM* wrote:
> That's throwing the baby out with the wash water. I certainly wouldn't say
> it's going to be useless. It will indeed be way better than IE6.
>
But what I mean is IE6 doesnt support it now and that's going to be
around for what the next couple of years? IF 7 doesnt do a good job at
supporting what use is it?
I'll be retired before the full benefits can be seen ;)
| |
| Osgood 2006-02-12, 6:40 pm |
| Michael Fesser wrote:
> But for some nice little effects, maybe an image with some other stuff
> besides it, I would probably use it. In recent browsers it will work as
> expected, and IE gets a workaround (a float maybe) within a Conditional
> Comment. I can live with that.
Right ok yeah. I maybe 'jumped the gun a bit' when I just dismissed it
entirely.
I like to keep things as clean as possible and only use CC's when its
absolutely necessary. It's good to know but I'm not sure I will be
deploying it at this particular stage of browser developement,
especially if there is a more applicable work-around, which would suit
more browsers without adding addition 'hacks'
| |
| Michael Fesser 2006-02-12, 6:40 pm |
| ..oO(Osgood)
>Michael Fesser wrote:
>
>
>Its a lot less code that what I used. Don't think it will be much good
>for some time to come though until IE6 dies out. Am I right in thinking
>IE7 will be able to support it?
Actually I don't know (and I can't test it, because I don't have XP).
But I wouldn't use it for critical parts of a website at all, simply
because of IE6 (and below) lacking support for it.
But for some nice little effects, maybe an image with some other stuff
besides it, I would probably use it. In recent browsers it will work as
expected, and IE gets a workaround (a float maybe) within a Conditional
Comment. I can live with that.
Micha
| |
|
| ROTFL :)
"Osgood" <notavailable@atthisaddress.com> wrote in message
news:dsihbv$1un$3@forums.macromedia.com...
>
> I'll be retired before the full benefits can be seen ;)
>
| |
| Michael Fesser 2006-02-12, 6:40 pm |
| ..oO(Osgood)
>I like to keep things as clean as possible and only use CC's when its
>absolutely necessary. It's good to know but I'm not sure I will be
>deploying it at this particular stage of browser developement,
>especially if there is a more applicable work-around, which would suit
>more browsers without adding addition 'hacks'
Agreed.
But there are some other situations that are quite similar. And as long
as I can find a way or workaround to get it (kind of) working in IE I
prefer the "cleaner" way.
Micha
| |
|
|
| gordonwd 2006-02-12, 6:43 pm |
| Al, why is it that you always have the right solutions for me? A while back, I
used your "Snap Layers" and other extensions on one of my sites. Then I
recently bought your Pop Menu Magic for my current CSS-based project, and now
you come up with the solution to my column layout. I thought that Javascript
was probably the best solution, but was not sure exactly how to go about it.
Problem solved.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |