Hi, i've got a basic layout as follows:
One large table (height 100%) with two columns, left and right.
Inside the left column are two divs#bottom #top.
Inside the right column is one div#main.
All div CONTENT is variable height, however I want div#main to always be 100% for layout purposes, hence I put a height:100% on it. #top + #bottom + a 10px margin between them need to add up to 100%, but since their sizes are variable I didn't put any height on them at all.
This is not so easy to do. At least, for me it's not so easy. Below is some example code I'm using which replicates the problem I'm seeing on my site. Question: why the heck isn't the #main height:100% doing anything? The layout is perfect besides that one small, eensy, tiny, bitty and completely unacceptable problem. Extra credit: When the content of the left divs is larger than the content of the right div then the laytout is fine (if I can get the right div height right). But if the content on the right is larger than the content on the left, then I'm going to have the same problem, only reversed. How do I specify I want the BOTTOM left div to expand to take up whatever space is available? Is that possible?
Thanks!
-mb -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-
<head>
-
<style>
-
.expand td {
-
position: relative;
-
height:100%;
-
margin:0;
-
padding:5px;
-
border:3px solid black;
-
}
-
-
.expand div {
-
padding:5px;
-
border:3px solid red;
-
}
-
-
.expand div#top {
-
background-color:orange;
-
margin-bottom:5px;
-
}
-
-
.expand div#bottom {
-
background-color:yellow;
-
}
-
-
.expand div#main {
-
height:100%;
-
background-color:#c6c6c6;
-
color:white;
-
}
-
-
.expand div#main table#subMain{
-
background-color:#fff;
-
color:black;
-
}
-
-
</style>
-
</head>
-
<body>
-
<table class='expand' border='1' width="100%">
-
<tbody>
-
<tr>
-
<td id="left" valign="top">
-
<div id="top">0<br /></div>
-
<div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
-
</td>
-
<td id="right" valign="top">
-
<div id="main">Hello, Table
-
<table id="subMain">
-
<tr>
-
<td>hullo, Div!
-
</td>
-
</tr>
-
</table>
-
-
</div>
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
</body>
-
</html>
-
4  4813 
Tricky. I think there are some techniques out there for making your columns equal length (either by using javascript or background-images), but I didn't get around to finishing this. I've recreated your page without using tables at all (didn't have time to test it properly, but I think it's OK). I would suggest looking into the 100% height issue, maybe starting with some online examples, eg. http://css-discuss.incutio.com/?page=AnyColumnLongest
Of course, if you don't really need that big box around your content then things become a whole lot easier... -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-
<head>
-
<style>
-
#container {
-
margin : 0;
-
padding : 3px;
-
border : 1px solid #ccc;
-
height : 100%;
-
}
-
-
#left {
-
float : left;
-
width : 300px;
-
border : 3px solid #000;
-
}
-
-
#right {
-
border : 3px solid #000;
-
padding : 5px;
-
margin-left : 310px;
-
min-height : 100%;
-
height : 100%;
-
}
-
-
#main {
-
border : 3px solid red;
-
padding : 3px;
-
background-color : #bbb;
-
color : #fff;
-
}
-
-
#subMain {
-
background-color : #fff;
-
border : solid 2px #000;
-
color : #000;
-
padding : 2px;
-
margin : 4px;
-
line-height : 2em;
-
display : inline;
-
}
-
-
#top {
-
background-color :orange;
-
padding : 4px;
-
margin : 4px;
-
border : solid 3px red;
-
}
-
-
#bottom {
-
background-color :yellow;
-
padding : 4px;
-
margin : 4px;
-
border : solid 3px red;
-
}
-
-
#footer {
-
clear : both;
-
height : 0;
-
line-height : 0;
-
}
-
-
</style>
-
</head>
-
<body>
-
<div id="container">
-
<div id="left">
-
<div id="top">0<br /></div>
-
<div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
-
</div>
-
<div id="right">
-
<div id="main">
-
Hello, Table <br />
-
<div id="subMain">hullo, Div!</div>
-
</div>
-
</div>
-
<div id="footer"> </div>
-
</div>
-
</div>
-
</body>
-
</html>
-
AricC 1,892
Recognized Expert Top Contributor -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-
<head>
-
<style>
-
.expand td {
-
position: relative;
-
height:100%;
-
margin:0;
-
padding:5px;
-
border:3px solid black;
-
}
-
-
.expand div {
-
padding:5px;
-
border:3px solid red;
-
}
-
-
.expand div#top {
-
background-color:orange;
-
margin-bottom:5px;
-
}
-
-
.expand div#bottom {
-
background-color:yellow;
-
}
-
-
.expand div#main {
-
height:100%;
-
background-color:#c6c6c6;
-
color:white;
-
}
-
-
.expand div#main table#subMain{
-
background-color:#fff;
-
color:black;
-
}
-
-
</style>
-
</head>
-
<body>
-
<table class='expand' border='1' width="100%">
-
<tbody>
-
<tr>
-
<td id="left" valign="top">
-
<div id="top">0<br /></div>
-
<div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
-
</td>
-
<td id="right" valign="top">
-
<div id="main">Hello, Table
-
<table id="subMain">
-
<tr>
-
<td>hullo, Div!
-
</td>
-
</tr>
-
</table>
-
-
</div>
-
</td>
-
</tr>
-
</tbody>
-
</table>
-
</body>
-
</html>
-
Why are you using CSS for only somethings? Just curious
Why are you using CSS for only somethings? Just curious
you mean like the valigns on the <td>'s? I think just habit. I'm used to typing them inline and haven't needed to get unused to it so I type them inline.
Tricky. I think there are some techniques out there for making your columns equal length (either by using javascript or background-images), but I didn't get around to finishing this. I've recreated your page without using tables at all (didn't have time to test it properly, but I think it's OK). I would suggest looking into the 100% height issue, maybe starting with some online examples, eg.
http://css-discuss.incutio.com/?page=AnyColumnLongest
Of course, if you don't really need that big box around your content then things become a whole lot easier...
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-
<head>
-
<style>
-
#container {
-
margin : 0;
-
padding : 3px;
-
border : 1px solid #ccc;
-
height : 100%;
-
}
-
-
#left {
-
float : left;
-
width : 300px;
-
border : 3px solid #000;
-
}
-
-
#right {
-
border : 3px solid #000;
-
padding : 5px;
-
margin-left : 310px;
-
min-height : 100%;
-
height : 100%;
-
}
-
-
#main {
-
border : 3px solid red;
-
padding : 3px;
-
background-color : #bbb;
-
color : #fff;
-
}
-
-
#subMain {
-
background-color : #fff;
-
border : solid 2px #000;
-
color : #000;
-
padding : 2px;
-
margin : 4px;
-
line-height : 2em;
-
display : inline;
-
}
-
-
#top {
-
background-color :orange;
-
padding : 4px;
-
margin : 4px;
-
border : solid 3px red;
-
}
-
-
#bottom {
-
background-color :yellow;
-
padding : 4px;
-
margin : 4px;
-
border : solid 3px red;
-
}
-
-
#footer {
-
clear : both;
-
height : 0;
-
line-height : 0;
-
}
-
-
</style>
-
</head>
-
<body>
-
<div id="container">
-
<div id="left">
-
<div id="top">0<br /></div>
-
<div id="bottom">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />0<br /></div>
-
</div>
-
<div id="right">
-
<div id="main">
-
Hello, Table <br />
-
<div id="subMain">hullo, Div!</div>
-
</div>
-
</div>
-
<div id="footer"> </div>
-
</div>
-
</div>
-
</body>
-
</html>
-
Thanks, Conan. I can try the div only layout but I've not had a huge amount of success using divs vs tables cross-browser-wise. The tables are just SO much more reliable and predictable across browsers, in my experience. Which probably means I'm not as sharp with CSS as I could be, but then if I were I wouldn't be posting here. The onyl reason I'm even using divs at all is so I can implement Nifty Corners. if not for that I'd just use straight tables and there's be no problem.
I have noted after copious amounts of research this problem is common and not solvable with css without sacrificing a certain amount of dynamic layout. You have to specifiy heights at some point or else you get what I'm getting, because div height is dictated by content height. There are some javascript workarounds, like you said, and I think I'm going to end up down that road.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: David |
last post by:
It's sad to say, but when using the AOL web site, like to send an
email, they have a nifty capability such that when a window is
resized, the textarea where the message is input expands not only
horizontally, but also vertically, to fill the space.
I took a look at their javascripts, but they are quite complex and
convoluted since they make use of many of their own functions designed
to work with their web site.
Does anybody have a...
|
by: Brian |
last post by:
I have a page with content, navigation, and footer divs, in that
order. The nav div has position: absolute, width 8em, on green
background. The other divs have an 8em green left border, such that
the nav sits on that border. There is a thin red top border on footer
for testing.
http://www.tsmchughs.com/test/
On that page, all is as expected. However, on the long page
http://www.tsmchughs.com/test/long
|
by: David Winter |
last post by:
This is a totally trivial CSS problem, I'm sure, but I don't get it.
I want a centered DIV with a fixed width between two other DIVs that
should fill the rest of the window/viewport (= 100%). How do I achieve
this? I tried width:auto for the buffer DIVs, but it didn't work.
This should at least work in IE 5.5 and Opera. A totally
standards-compliant solution would be appreciated, of course ... :/
This is waht I have:
|
by: Oddball |
last post by:
I have a problem with the positioning of two divisions.
They are containined within a content division in which all the page content happens
(ie not the menus, etc.).
The behavior I would like (and the behavior that happens in IE) is for the content
division (from now on 'ConDiv') to resize with the content of either of the sub divisions
(MainDiv and NewsDiv).
I am trying to get the divisions to position directly next to each other. ...
|
by: tabert |
last post by:
I want to use JavaScript when a button is clicked to show and hide a
SPAN or DIV. This works in both IE and Netscape, but what I'd like to
happen is for there to be no white space where the hidden div is.
I start with two visible divs and in between them are two more hidden
ones...in Firefox this works fine--the two visible ones are right next
to each other, the button fires the script and the other div shows up
in the middle. Another...
| | |
by: tasman.hayes |
last post by:
I'm experimenting with converting a site from a table layout to CSS.
I'm floating three DIVs in a row for the top of a website (a logo,
navigation buttons and a email list signup box). The DIVs have a grey
background.
When I view the page in Firefox, I get what I hoped for: there is a
solid grey rectangle at the top of the website. When I view the page in
Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
(i.e. a...
|
by: Jean-François Michaud |
last post by:
Hello,
I was wondering how we could expand a block or anything else for that
matter to fill all the available space in the body.
I am working with XSLT generating XSL:FO and I need my "blank pages" to
say BLANK PAGE in the body of the document instead of being blank.
Instead of forcing blank page parity, I was thinking of using a
|
by: tbirnseth |
last post by:
I'm having trouble between IE and FF. For once, IE behaves as I would expect, but FF doesn't.
Basically I have a container with two floating DIVs in it. One floats left and the other right. I then have a table which should fill between the two floating DIVs if there is space. If there's not space, it should push down and display as a separately centered table. IE (7) behaves as I would expect, but FF seems to overlay the right side of the...
|
by: =?Utf-8?B?bWljaGFlbCBzb3JlbnM=?= |
last post by:
When I set a label to span 2 columns of a 2-column TableLayoutPanel, set both
of these plus the containing form to AutoSize, then at runtime fill in the
label, the autosizing does not take the column spanning into account. That
is, it autosizes so that the label text is entirely in column 1 even though
the label itself does physically span both columns. This seems to only occur
when I dynamically add a row. For rows that I added at design...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
