@#%! Two-Column Layout

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

BeTheBall -> @#%! Two-Column Layout (11/5/2008 14:48:31)

I have this layout working exactly how I want in IE7, which is the only browser our intranet users have available. However, the obsessive part of me wants it to work in "real" browsers as well. Here is a link to the page:

http://duanethomas.net/investigate.htm

In IE7, try shrinking the window and you will see that no matter how small you go, the right div stays next to the left.

However, look at the page in Firefox or Opera, and it is a mess even before one starts adjusting the window size. My goal is two-fold. First, the left column should always be 180px wide. The right column should fill in the rest, no matter what size the window. Second, the right column should never slip below the left when resizing the window.

Looking for ideas on how to make this work in Firefox without it breaking in IE.

I have posted a similar problem in the past and thought I had it sorted. Obviously, I was mistaken. Here is the css. I believe the key areas are #lh-col and #rh-col.

html {overflow-x:hidden;}
body {font-family:Arial, Helvetica, sans-serif;margin:0;background:green;}
img {vertical-align:text-top;}
.centeredTable {margin-left:auto;margin-right:auto;margin-top:15px;}
table {border-collapse:collapse;margin:7px;}
td {vertical-align:top;padding:2px;}
th {vertical-align:top;padding:5px;background-color:#009900;color:#FFFFFF}
h2 {font-size:x-large;color:#009900;margin-bottom:0;width:100%;}
h3 {font-size:large;color:#009900;margin-top:5px;width:100%;}
h4 {font-size:medium;font-weight:bold;margin-bottom:0;}
p {margin:10px 0px 5px 0px;}
ul {margin-top:0px;}

a:link{color:blue;text-decoration:underline}
a:visited{color:blue;text-decoration:underline}
a:active{color:green;text-decoration:none}
a:hover{color:green;text-decoration:none}

.cbLabel {font-size: 150%;color:#009900;margin-top:5px;font-weight:bold;}

/* -------------------------------------------------------------------------------------
/  Text styles section - label headings and so on
/  ------------------------------------------------------------------------------------- */

.Heading_1, .Heading_2, .Heading_3, .Heading_4, .Heading_5, .Heading_6 {
    background: transparent;
    color: green;
    margin: 12px 6px 6px 0px;
    font-weight: bold;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

.Heading_1 {
    font-size: 190%;
}

.Heading_2 {
    font-size: 170%;
}

.Heading_3 {
    font-size: 150%;
}

.Heading_4 {
    font-size: 135%;
}

.Heading_5 {
    font-size: 120%;
}

.Heading_6 {
    font-size: 100%;
}

.hidden {visibility:hidden;display:none;}
#top-menu {margin-bottom:20px;}

.Button {
color:#FFFFFF;
background-color:#009900;
border:1px solid #000000;
font-weight:bold;
}

.qmatic {font-size:90%;font-weight:bold;color:#CC0000;margin-top:0;}
.endPoint {font-weight:bold;color:#993300;}
.noteToAssistor {font-weight:bold;color:#993300;}
.center {text-align:center;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.error {color:#FF0000;}
.disabled {background-color:#F7F7F7;}
.enabled {background-color:#FFFFCC;}
.disclaimer {display:none;}
#summary {background-color:#FFFFCC;padding:5px;border:1px solid green;margin:0 auto;}

#question-bg {background-color:#FFFFCC;padding:5px;border:1px solid green;margin:0 auto;}

#summary p {margin-top:0;margin-bottom:2px;}
#summary h4 {font-size:medium;font-weight:bold;}
#response {font-weight:bold;background-color:#FFFFCC;padding:5px;border:1px solid green;margin:0 auto;}
#response p {margin-top:0;margin-bottom:4px;}
#source {background-color:#FFFFCC;padding:5px;border:1px solid green;margin:0 auto;font-weight:bold;}
#hdr{
 border-left:0px solid #333333; border-right:0px solid #333333; border-top:0px solid #333333; border-bottom:2px solid #333333; width: 100%;
 margin: 0;
 background: #eeeeee;
 color: #333333;
 text-align:center;
 padding:5px
 }
     
#lh-col{
 float:left;
 width: 180px;
 background-color:#008200;
 color: #eeeeee;
 margin: 0;
 padding: 3px;
 border:0px none;
 }
 
@media print {
	#lh-col {display: none; }
    .dontPrint {display: none; }
	.disclaimer {display:block;}
	.qmatic {display:none}
	.noteToAssistor {display:none}
}
 
 #lh-col a:link{color:#CCCCCC;text-decoration:none}
 #lh-col a:visited{color:#CCCCCC;text-decoration:none}
 #lh-col a:active{color:#FFFFFF;text-decoration:underline}
 #lh-col a:hover{color:#FFFFFF;text-decoration:underline}

#rh-col{
 border-left:2px solid #333333; border-right:0px solid #333333; border-top:0px solid #333333; border-bottom:0px solid #333333; background:#FFFFFF; color: #333333;
 float:right;
 clear:left;
 padding-right:20px;
 height:800px;
 }
 
 #content {
 padding:15px;
 background:#FFFFFF;
 }

Tailslide -> RE: @#%! Two-Column Layout (11/5/2008 15:44:59)
Tables - you naughty boy! To get stuff to work reliably cross browser you need a full doctype - you've only got a partial doctype there which will leave IE in quirks and other browsers in either quirks or near-standards mode (I think).

BeTheBall -> RE: @#%! Two-Column Layout (11/5/2008 18:24:33)
The tables I am stuck with. I am building my page around a third party application. The third party app. is what inserted the table. I will look at the doctype. I also looked at a link you provided me in an earlier thread, which I may be able to use. Thanks.

Page: [1]

0.09375