17 replies [Last post]
Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Take for example this page.

On the left side there is some information and on the right side there is a section of GoogleAds. Is there anyway that I can stretch the tables to be the same length (article length is sometimes longer than the ads and sometimes vice versa) so that the page looks even?

If not, I'd appreciate other suggestions. Thanks.

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Sizing Columns To Variable Height

Try looking at

http://www.alistapart.com/articles/fauxcolumns/

For hints and tips on this very problem.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

Interesting solution. Thanks.

I'll have a go at recreating it over the weekend.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

I've tried this approach ((see here) but my background doesn't seem to want to appear when I nest div tags.

The CSS Is

#history {
    width: 748px;
	background-image: url(../images/background.gif);
	background-repeat: repeat-y;
	background-position: center;
}

#leftresource {
    float: left;
    width: 79%;
    clear: left;
    padding-bottom: 10px;
}

#rightresource {
    float: right;
    width: 19%;
    clear: right;
}

The HTML is:

<!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>Talk History - Resource</title>
<link href="styles/style1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="history" align="center">
    <div id="leftresource" align="justify">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
		   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
		   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
		   voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		   non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
	<div id="rightresource" align="justify">
		 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
		   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
		   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
		   voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		   non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

</body>
</html>

I've noticed that this works in IE but not in FireFox.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

I've noticed that if I use the CSS line (i.e. repeat-y 50% Innocent used on the example in the link above instead of what I've posted as the CSS I get a plain white screen also in Internet Explorer. :?

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Sizing Columns To Variable Height

As you have floated both the boxes contained in the "history" div they are both taken out of the document flow and thus in effect the height of #history is zero - hence no image in sensible browsers.

Can I suggest validating the HTML fixing the errors then looking again - it wont solve the problem but it will make it easier to figure out, as at the moment there are odd things in there (like the align="center") which are making it annoying to look at.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

Okay, I've changed the page to valid XHTML 1.1.

((latest))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Talk History - Resource</title>
<link href="styles/style1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="history">
    <div id="leftresource">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div id="rightresource">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

</body>
</html>

I really appreciate this. Smile

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Sizing Columns To Variable Height

I actually meant to validate the code of your whole page as there are some errors in there Wink

However.

trying the following

<div id="history" class="clearfix">
    <div id="leftresource">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
		   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
		   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
		   voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		   non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


    </div>
	<div id="rightresource">
		 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
		   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
		   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
		   voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		   non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

With

#history { 
   width: 748px; 
   background-image: url(http://www.talk-history.com/images/background.gif); 
   background-repeat: repeat-y; 
   background-position: center; 
} 

#leftresource {
    float: left;
    width: 600px;
    padding-bottom: 10px;
}

#rightresource {
    width: 135px;
	margin-left: 610px
}	

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

Seems to do what you want in this code snippet.

For an explanation of what is going on see http://positioniseverything.net/easyclearing.html

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

Wonderful. Tongue

One last thing, since I'm wanting the contained div to be centred on the screen and you said my align tags were useless. How do I fix this?

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

I've switched it into PHP as this page, like the original example post, is going to be database driven.

With the exception of the centring, there appears to be a problem with the bottom image - the brown borders that "close" the two main boxes.

I don't have access to FireFox in work so I can't see if the problem occurs there too but I think I read somewhere that you have to do some offsets in IE sometimes.

<?php
    include("database.inc");
    $pagetitle = 'Resource';
    site_header($pagetitle);
?>
<div id="container" class="clearfix">
    <div>
        <img src="http://www.talk-history.com/images/top.jpg" alt="" />
    </div>
    <div id="leftresource"> 
        <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
              culpa qui officia deserunt mollit anim id est laborum.
        </p> 
    </div> 
    <div id="rightresource"> 
        <?php
            vGoogle();
        ?>
    </div> 
    <div>
        <img src="http://www.talk-history.com/images/bottom.GIF" alt="" />
    </div>
</div>
</body>
</html>

The following is the site_header() function called in the page above.

function site_header($pagetitle) {
    global $sitename, $main_css;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
    echo "<title>$sitename - $pagetitle</title>";
    echo "<link href=\"styles/$main_css.css\" rel=\"stylesheet\" type=\"text/css\" />";
    echo "</head>";
    echo "<body>";
}

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Sizing Columns To Variable Height

looking at http://www.bluerobot.com/web/css/center1.html and
http://www.simplebits.com/notebook/2004/09/08/centering.html
you can see it's simpily a case of having something like the the following rather than all your invalid align attributes.

body 
{
	text-align:center;
}
	
#Content 
{
	width:500px;
	margin:0px auto;
	text-align:left;
}

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

Excellent. The text-align property in the body tag worked. I suppose I never really associated the tag alignment with the text alignment.

Now, all I need to do is find out about that bottom graphic and I'm laughing. Tongue <--like this

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Sizing Columns To Variable Height

Actually the text-align is there for IE 5/win really. You'll note that the #content resets the align to left and also the line

margin:0px auto;

which does the centering for most browsers. effectively it just says make the left and right border work themselves out automatically.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

briski wrote:
Actually the text-align is there for IE 5/win really. You'll note that the #content resets the align to left and also the line

margin:0px auto;

which does the centering for most browsers. effectively it just says make the left and right border work themselves out automatically.

Yeah, I read the links. Good stuff. I think I'm going to have to create a folder called CSS in my favourites and start storing everything.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

Can someone confirm for me, since I'm in work and only have IE, that this page now works well in FireFox and that the graphic at the bottom of the page (i.e. the brown line that borders each box) is in the proper place and not a few pixels above the bottom of the page?

Thanks.

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Sizing Columns To Variable Height

Looks perfect in Firefox 1.0.2, Netscape 7.2, Opera 7.54, Opera 7.23, Opera 8.00. Seems also to be perfect in IE 5.5 and IE 5.0 (I'm running them on same PC and they always crash so i'm not 100% sure it's an exact representation of each version :? ). However a bit odd in Netscape 6.

All on PC incidentally

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

Excellent. Thanks for all your help.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 14 years 26 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Sizing Columns To Variable Height

I tried the same thing with this page - the clearfix class - and it's fine in FireFox but not in IE.

Any ideas? Sad