Hi discgolfer, I'm reviewing your code and trying to see what's what.
First what I'm seeing is a tendency for you to use 100% width, although you probably don't want that. <div> elements are block elements by default. As block elements, their width is expand-to-fit, so they already take up all the space available to them horizontally, by default. Percentage width also introduces some inconsistencies, a <div> with auto width is not the same as a <div> with a width of 100%. Auto width lets the <div>'s content width shrink as things like border, padding and margins are applied.
You also used a lot of margin: 0;, border: 0;, padding: 0; on <div> elements (no doubt to try and figure out why the content was growing larger than the screen). <div> elements have no border, margin, or padding applied by default, so these declarations are unnecessary.
I've taken a stab at what I think you're trying to get to.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test 2 Column CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* <body> does have default margin or padding depending on the browser, so it's good to remove this */
padding: 0;
background:url(images/boss_bg.gif);
}
/* border-collapse has no effect on any element but <table> and <td> elements. */
.col1 {
position: absolute;
width:200px;
top: 0;
left: 0;
min-height: 500px; /* When you don't include any content, the element has zero height,
this minimum height ensures we see the background I've applied.
*/
background: gold; /* Just included this so I could see the dimensions of the <div> */
}
.col2 {
position: absolute;
top: 0;
left: 200px;
right: 0; /* The left and right combination of offset properties is used to imply width,
this is necessary since absolutely positioned block elements use
shrink-to-fit width instead of expand-to-fit width, as it would if
the <div> were statically positioned.
Explorer doesn't support this, so we'll have to include a hack.
*/
min-height: 500px;
background: lightyellow; /* Again, just including a background so I can see
where the edges of the columns are.
*/
}
img {
border: none;
}
</style>
<!--[if lt IE 7]>
<style type='text/css'>
.col2 {
width: expression(document.getElementById('doc').offsetWidth - 200);
/* Explorer's proprietary expression() feature can be used to simulate
certain things that Explorer doesn't support, such as the combination
of opposing offset properties to imply width or height.
I'm on a Mac right now, so I don't have access to Explorer to test,
you may need to increase or decrease the amount being subtracted from
the offsetWidth of the <body> element to make output match Firefox.
*/
height: 500px;
/* Height in Explorer can be used to simulate the standard min-height property */
}
.col1 {
height: 500px;
}
</style>
<![endif]-->
</head>
<body id='doc'>
<div class="main">
<div class="col1">
<div>
<table id="topleft" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/lftbyhdr.gif" style="width:30px; height:270px;" alt="top left header photo" /></td>
<td><img src="images/rtbyhdr.gif" style="width:170px;" alt="top left header photo" /></td>
</tr>
</table>
</div>
</div>
<div class="col2">
<div>
<div style="background: #69C;"><img src="images/header_spacer.gif" style="height:126px; width:100%;" alt="top right header graphic" /></div>
</div>
</div>
</body>
</html>
> This is a great feature of WROX books; being able to get answers from the authors. Do all authors frequent their books forums? I just ordered two more WROX books for PHP5 and LAMP.
Some Wrox authors do, some are nowhere to be found. I see Imar Spaanjaars, Joe Fawcett, Nicholas Zakas in the forums quite frequently. I haven't seen the Beginning or Professional PHP5 books' authors on, but the authors of Beginning PHP5, Apache, and MySQL Web Development are active in the forums.
I hope that helps! Please let me know if you have more questions.
Regards,
Rich
--
[
http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
IE div columns width glitch
