CSS - Div Heights

See:
http://www.mandgweb.net/css_help/

I am trying to get the 'divs' of the 3 columns of content (A, B, C) to expand to the height of the tallest column (in this case 'A') while the height of the main container (blue border) expands/contracts as necessary to accommodate the tallest column. The main effect I am trying to achieve it to get the vertical rules between the columns to be the same height (i.e. the height of the tallest column).

Easier said then done..?

Thanks in advance.

HI,

I have the following tables:

PHP Code:
<table class="middle"
                       cellspacing="0"
                       cellpadding="0"
                       border="1">
                    <tr>
                        <td style="height: 1px;">&nbsp;<img border="0"
                             src="images/spacer.gif"
                             width="1"
                             height="1">
                         </td>

                        <td align="left" valign="top">
                            <p class="customHeading">aaaa</p>
                        </td>

                        <td valign="top">
                            <p align="right">
                            <a class="importantLink" href="">aaa</a>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
                            <a class="importantLink" href="">aaa</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
                            <a class="importantLink" href="">aaa</a>
                            </p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" valign="top">
                                                           
                                    <form action="aaa.php"
                                      method="post"
                                      onsubmit="return validate(this);">
                                    <table class="content"
                                           cellspacing="0"
                                           cellpadding="0"
                                           border="0">
                                        <tr>
                                            <td align="left">aaa:</td>

                                            <td><input type="text"
                                                   name="issueNumber"
                                                   size="22"
                                                   class="formField">
                                            </td>

                                            <td><a href="#">
                                                   <input type="submit"
                                                   value="SEARCH"
                                                   class="formButton"
                                                   onmouseover="this.className='formButtonHover';" 
                                                      onmouseout="this.className='formButton';" >
                                                 </a>  
                                            </td>
                                        </tr>
                                    </table>
                                    </form>
                            
                        </td>
                    </tr>
                </table> 





They use the following CSS classes:

PHP Code:
.middle {
    width: 760px;
    height: 360px;
    background-color: #FFFFFF;
}

.content {
  background-color: #FFFFFF;
  font: 13px Arial, sans-serif;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  
} 





My issues is this. In IE the row of the first table (where the hrefs are) expands to a seemingly arbitrary height, beyond the size of the text contained within it. In Netscape the row is only as high as the text contained within it.

I want it to act the same in IE as it does in Netscape. Never thought I'd say that.. =)

Any ideas?

Well I've run into a few more snags and after all of my atempts to learn this **** on my own I failed and need help...

keep this in mind...
My only table named capsule is defined like so:
index.php
Code:

<body>
<table class="capsule">

default.php
Code:

.capsule
{
	border-collapse:seperate;
	border-spacing:0;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
}

My "biggest" concern

I'm trying to make a site that is at least supported on all resolutions supported by my monitor, 800x600 to 1600x1200. I also plan to include 640x480 but my monitor doesn't go that low so I'm hoping it looks nice, as if anything could look nice at 640x480, when the other resolutions are tested.

I found a few solutions to this but unfortunatly none of them worked for strict xhtml. Most of them used the tagline height attribute and tagline margin attributes. I substituted the tagline html for CSS like this:
Code:

body
{
margin:0;
}

This didn't work, you might have guessed that...

I know with an object and static sizes, like something defined in px, can use the overflow scroll property. But that's static sizes and limited in resizing features.

Here is the code I got my ideas from:
[code]
<BODY leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#000000" alink="#CDCDCD" vlink="000000">

<TABLE border="0" cellpadding="0" cellspacing="0" height="100%">
[code]

I looked for an alternate to margin-height and margin-width with no luck.

Another "issue" spacing in cells.

I hate IE, yet another problem that is ONLY visible in IE, not opera no mozilla, firefox, galleon, konquor. Wha thappens is, gayness spacing. I have the following CSS and this worked in every browser but IE 6.0. Unfortunately, since MS is a big part of the computer world, I can't just NOT support it. See .capsule above.

According to w3schools this should work from IE5+.

One more "thing" ...a little off topic, just a lil'

I always thought that Opera used the IE engine but Opera, IMO is better than IE. It just, works.

All this for well you know...ugly sites suck...

Any responses to any of these topics or to further expand on the are more than welcome!!!

PS

When I came to this site it said 404 NOT FOUND. I tried again it worked. I then tried NEW THREAD and again the same thing. I tried again and it worked. I said "F* this ****" cleared cache etc and tried again. Still the same problem. Any new place I vist from this visit on, I think, is going to be a pain, all of my old bookmarks will have to be updated somehow...I don't know what this is. Any button I hit, preview post, ad links, save changes, submit thread, etc.. all do the same thing. Some admin might be interested in this... Once I do it once it doesn't happen for that action anymore.

Hey,

I was wondering how you set the height of a div so that the div will cover the full height of the page.

currently i have:
.navigationDiv{
position: absolute;
width: 19%;
height: 100%;
}

This fills the whole visible part of the document as it was loaded but once you start scrolling down its not filled anymore.

how to fix this?

thanks in advance?

Greetings

Not sure about the best way to go about this. I have an Unordered List that has a set height for the List Items. Like so:
Code:

#left ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#left ul li {
	text-align: center;
	float: left;
	margin-right: 20px;
	height: 200px;
	margin-bottom: 20px;
}

This works fine for most of the pages, but there is one where I really need the height of the <li>'s to be 350px. I tried just adding a class like
Code:

.comics {
	height: 350px;
}

I tried adding this to the <li>
Code:

 <li class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
      </a></li>

and also just a <span>
Code:

 <li><span class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
      </a></span></li>

but it still kept the 200px height.

Do I need to make a whole new <li> code or am I missing something?

Hi!

I'm playing around with style sheets, mainly because I have a tabular layout at the moment and everyone keeps telling me how evil tables are, so i tought being as i haunt devshed, i should use the advice and before my site gets too big, change it! Finding it quite difficult to start with, but making good progress! And I have the following so far...

PHP Code:
 h1 {font-size: 1.4em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h2 {font-size: 1.3em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h3 {font-size: 1.2em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h4 {font-size: 1.1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h5 {font-size: 1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

a:link {color: #ffffff;
text-decoration: none;}

a:hover {color: #dedbcb;
text-decoration: underline;}

a:visited {
    color: #ffffff;
text-decoration: none;}    

body {margin: 0;
padding: 0;
font-family: sans-serif;
font-size: .7em;
line-height: 1.4em}

div#header {padding: 2%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-bottom: solid #ffffff 1px}

div#footer {padding: 2%;
text-align: center;
clear: both;
background-color: #0e2e3b;
border-top: solid #ffffff 1px}

div#maincontent {padding: 2%;
text-align: justify;
margin-left:  150px;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-right: solid #ffffff 1px;
border-left: solid #ffffff 1px}

div#leftcolumn {padding: 2%;
float: left;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 150px;}

div#rightcolumn {padding: 2%;
float: right;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 10px;} 





My question is, the rightcolumn is really just for layout, its not going to contain anything. What I need is the right column to equal the height of the left column all the time, so the layout looks right. Could someone point me in the correct direction?

Charlie

IE seems to have a lot of trouble with percentage based heights. In certain circumstances they seem to be okay, other times they seem be completely ignored. Pixel based DIV heights seem to work, but I don't know if it is just the circumstance or what not. Does anyone know what the actual "rules" are about this as it applies to IE?

Hello,

I'm relatively new to using CSS as the foundation of a site, as i've only ever built sites for family/work etc using tables. I have used it previously for styling and so on, but not as intensively as i now am. It's great, but a couple of issues are giving me a headache - the fun of web design, hey?...

I'm experiencing two problems, and have spent a lot of time describing them (with examples and images) on the following page - fnb4wd.com.au/4x4wh/help/help.htm - not wanting to clutter up the forum with my explanations and too many images.

The first is to do with the 100% height trick - my "wrapper" div is not expanding with my "content" div - but i do not believe faux columns are possible for my design (if someone proves me wrong, great!) as i don't have two full height columns, but one content column and a vertical menu div...

The second issues is with a Horizontal menu i am using as main navigation. In both FireFox & Chrome, the menu shifts down so the text links are unreadable unless hovered over. In IE, it's positioned as i want (with Comp View Settings turned on for IE8).

So, if anyone could shed come light on my problems, i'd love to hear some ideas.

The full explanation, complete with working examples and images (as well as my code) can be seen at fnb4wd.com.au/4x4wh/help/help.htm.

Thanks in advance,

Azerus85

Hello everyone, Ive been trying to reconstruct a web design from a photoshop design and it has bars going down the side of a center container where the content is, the problem im having is when the text and such in the content 'rule' goes over one line, prior to what i thought would happen, only the content 'rule' scales to the amount of text and the container rule does nothing. Is there a way to make the container scale with the content and have the bars scale with the container...?

Heres the css and the html
Code:

#container
{
	margin-left: auto;
	margin-right: auto;
	top: 0;
	width: 875px;
	margin-top: -8px;
	padding: 0;
	overflow: visible;
	background: #FFFFFF;
}
#secondbar
{
	margin-left: 102px;
	margin-right: auto;
	width: 40px;
	top: 0;
	position: absolute;
	background: #4D220F;
}
#bar
{
	margin-left: 6px;
	margin-right: auto;
	width: 96px;
	top: 0;
	position: absolute;
	/*[empty]height:;*/
	background: #E3C98E;
}
#thirdbar
{
	margin-left: 123px;
	margin-right: auto;
	width: 21px;
	top: 0;
	position: absolute;
	background: #7F8FA6;
}
#content
{
	margin-left: 154px;
	margin-right: auto;
	top: 0;
	width: 709px;
	position: absolute;
	background: #FFFFFF;
}

Code:

<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href= "styles.css">
</head>
<body bgcolor="f4f1ea">
<div id="container"><div id="bar">&nbsp;</div><div id="secondbar">&nbsp;</div><div id="thirdbar">&nbsp;</div>&nbsp;<div id="content">&nbsp;</div></div>
</body>

Thanks for any help, sorry if its a bit confusing
Xidus

Here is a menu I am trying to build. I used different background colors to see what sections are doing what. Essentially what I am trying to achieve is that the menu items defined by the <li> (green) tag have text vertically centered in them and be the same height as the ul section (yellow).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>My site</title>
    <style type="text/css">
body { background: black; }
#level0 { 
  background: red;
  clear: both; } /* end #level0 */
#level1 { 
  background: orange;
  width: 957px;
  margin: auto; } /* end #level1 */
#level1 ul {
  background: yellow;
  clear: both;
  text-align: right;
  border-right: thin solid #cfcfcf; 
  margin: 0;
  padding: 0;
  height: 40px; } /* end #level1 ul */
#level1 ul li { 
  background: green;
  line-height: 40px;
  font-size: 12px;
  padding-top: 13px;
  padding-bottom: 13px;
  vertical-align: middle;
  border-left: thin solid #cfcfcf; 
  text-align: right;
  margin: 0;
  color: #9f9f9f;
  padding-left: 1em;
  padding-right: 1em;
  display: inline; } /* end #level1 ul li */
#level1 ul li.active { background: blue; } /* end #level1 ul li.active */
#level1 ul li a { 
  background: purple;
  color: #9f9f9f; } /* end #level1 ul li a */
#level1 ul li a:hover { 
  background: inherit;
  text-decoration: none; } /* end #level1 ul li a:hover */
#level1 ul li.active a:hover { 
  text-decoration: none;
  background: none; } /* end #level1 ul li.active a:hover */
    </style>
  </head>
  <body>
    <div id="level0">
      <div id="level1">
        <ul>
          <li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li class="active"><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li><li><a href="#">Careers</a></li><li><a href="#">Link 6</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

What happens is that this version renders as I want it in Safari, one pixel too high in Opera and Firefox, and several pixels too short in IE. What are some things I can try to fix this behavior so that it is consistent (-ly correct ) across browsers?

Again for those that have helped me on other threads I greatly appreciate it. I have used CSS before but this is my first time using it for layout and am struggling with it a bit.

I'm working on a new template for my site. I've just finished up the the basics for the layout but the two main divs aren't the same height.

I know I can give the body a height and then give the divs a height but I want then I have to use overflow scroll which I don't want.

I want the divs to be the same height but for the over all height to adjust to the size of the content.

Is this possible?

You can see the layout I have in the following gif. If anyone wants to see the code I've written so far, just ask and I'll upload a zip file or something.

It's the divs with the screenshot link and the test text that I want to be the same height. I've not assigned height properties to either as just giving them height:100% properties seems to do nothing.

Ok, heres what is driving me nuts:

Pretty typical 2 column layout, header, footer, etc.

Although here's the glitch...I'm using css and js to round the corners on most of my divs, so while the js approach works it successfully destroys my rounded corners, this is also why the fauz column hack won't work either.

I have an rss feed in my #sidebar div which being dynamic adjusts the div height to fit the content, great!

my main content area (in this case 2 divs in a container) is fairly static content set at 800px.

Now I can adjust the height of the rss feed however it also successfully breaks my corners (basically the rounded corners stay some where around 750px but the div does expand to 800px with a squared bottom)

Is there anyway to either set the height of my #sidebar or is it possible to have my main content area always expand to the #footer? Geez or anything to solve this problem.

Here's my CSS:

Code:

div#container{width:100%;margin: 0 auto;background-color: #000000; overflow:hidden;text-align: center}
div#header{width:98%;background-color: #000000;padding:0px 0;text-align:center;margin: 0px 0px 0 10px}
#site {width: 100%;margin: 1px 0px 0 10px}
#sidebar {float: left;width: 24%;background-color: #FFFFCC;border-right: 1px solid #000000;text-align:left; overflow:hidden}
#content {float: left;width: 74%;background-color: #FFFFFF}
div#footer{width:98%;background-color: #000000;text-align:center;margin: 0px 0px 0 10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF;font-weight: bold}
#leftcontent {float: left;width:46%;background:#fff;text-align:left; padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#rightcontent {float: right;width:46%;background:#fff;text-align:left;padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#leftcontent h1, #rightcontent h1 {font-family: Verdana, Arial, Helvetica, sans-serif;color: #FF0000;font-size: 14px;font-weight: bold; margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;line-height: 0pt}

/* begin styles for RSS Feed 
	This is the most basic style to use for a list with no bullets */
.rss_box {width: 200px; background-color: #FFFFCC; padding-top:5px}
.rss_title, rss_title a {margin: 0px 0;padding: 0;}
.rss_items {list-style:none;margin:0;padding:0;}
.rss_item  {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: x-small;margin-bottom: 1em;}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {}
.rss_item a:hover {}
.rss_date {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: xx-small;}

/* Styles for gliding layers  */
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3 {position:absolute; visibility:hidden;left:0; top:0; z-index:200;width:100px; height:24px;background-color:#FFFFCC;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Here's my HTML (minus content)

Code:

<div id="container" class="clearfix">
<div id="header" class="clearfix">
</div>
<div id="site" class="clearfix">
<div id="sidebar" class="clearfix">
</div>
<div id="content" class="clearfix">
<div id="leftcontent" class="clearfix">
</div>
<div id="rightcontent" class="clearfix">
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="clear:both"></div>
<div id="footer" class="clearfix">
</div>
</div>

Thanks!

Dave

Hi, and thanks for reading.

I have a design that I put together in Photoshop without thinking of what I would have to do to make it a reality and then got the okay on it. That was a mistake.
I'm now stuck with this.
Which is totally fine, but then you hit this, and everything sucks.
The problem is he
Code:

#body {position:absolute; left:101px; top:13px; width:624px; height:100%;}
			#content {border:solid 3px #000000; background-color:#FFFFFF; width:613px; padding-left:80px;}

#content is inside #body. I also have a transparent image I use as a placeholder with a height of 360px, which seems to only really work if I have height:100% in #content. The problem with that is then any page where the content is over 360px, like in the first link, overlaps #content even though it's all inside content as <p>, <table>, <form>, etc.

My question is, what can I do to fix this? If there's nothing that will work on CSS 2, then I could always just add some extra lines at the bottom of pages with little content. Problem is, this is going to eventually be backed by a CM used by totally clueless people who won't understand the purpose of the extra lines even if I explained it.

Any ideas?
Thanks in advance,
-colin

Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs:

Code:

___________________
|Image 1 |Text    |
|Image 2 |Text    |
|        |Text    |
|        |Text    |
-------------------

Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'.

Outer 'table' style: None (just a plain <div>)
Images 'cell' style: height:100%;float:left
Text 'cell' style: height:100%

Here's the full code if you want it:

Code:

<div>
  <div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
      <img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
  <div style="height:100%"> [div 2] Shows text on the right <br>
      <br>
    continues downwards no matter how much text appears<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    Even down here [/div2] <br>
  </div>
</div>

This works great in i.e. but not mozilla, anyone have any ideas?