|
| |
|
|
BeTheBall
Posts: 6493
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
 |
@#%! 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;
}
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
|
|
|
BeTheBall
Posts: 6493
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
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.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
