CSS Forum

**Visible** · 07-28-2009, 02:37 AM

Hello,

This is my initial post. I searched through the forums first and couldn't find an answer. As the title suggests, I need a little help troubleshooting a CSS design.

My goal is a template that has header & footer span 100% width, with a fixed content middle area 940px wide. I've accomplished that; only problem is when I change to 800x600 screen res, top right of header and footer is cut off.

So long as I keep the content area at around 750px wide, there's no issue viewing in any screen res.

Has anyone got a fix for this conundrum?

**chrishirst** · 07-28-2009, 03:40 AM

So.... you are wondering why a fixed with of 940px cuts off when displayed at 800px wide.

Or am I missing something??????

**Visible** · 06:30 AM

Actually I'm wondering why - and how to correct - a design with 940px fixed width "middle content area" so that at 800px screen res you would still need to scroll horizontal to see all the content, but the header & footer would still span 100% regardless.

I'm able to accomplish one or the other, but not both header & footer. Mission is to have a design that looks good in any screen dimension.

I could post code I have now (CSS & HTML) if that would help.

**davemies** · 07-28-2009, 07:38 AM

make the 940px 760px instead?

**LadynRed** · 07-28-2009, 12:41 PM

Yes, post the code or supply a URL please.

**Visible** · 07-28-2009, 04:06 PM

Here's the HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>:: The Demo Test Template</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="styles.css" type="text/css" rel="stylesheet" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="country" content="USA">
<meta name="state" content="state">
<meta name="city" content="city">
<meta name="zipcode" content="zip">
<meta name="language" content="Engish">
<meta http-equiv="Content-Language" content="en-us">
<meta name="rating" content="general">
<meta name="copyright" content="Dr. Joe Smith">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Expires" content="Sat, 10 Jul 2021 18:45:00 GMT">
</head>
<body>
<div id="header">
<div id="logotag">
<div class="topnav"><a class="home" href="#">Home</a> | <a class="home" href="#">About Our Practice</a> | <a class="home" href="#">Contact</a></div></div>
<img src="images/logoblank.jpg" alt="" width="940" height="160" border="0"></div>
<div id="container">
<div class="row">
<div class="column mainbody">
<h1>Hometown Family Dentist</h1>
Placeholder for page content here Placeholder for page content here Placeholder for page content here Placeholder for page content here Placeholder for page content here Placeholder for page content here Placeholder for page content here Placeholder for page content here Placeholder for page content here Placeholder for page content here
<p>content
<p>content
<p>content
<p>content
<p>content
<p>content
 
</div>
 
<div class="column menu">
<div id="nav">
<ul>
<li class="top"><a href="#" id="current">Home</a></li>
<li><a ONMOUSEOVER="window.status='Request New Appointments';return true" ONFOCUS="window.status='Request New Appointments';return true" ONMOUSEOUT="window.status=''" href="#" onClick="parent.location='#'">New Appointments</a></li>
<li><a href="#">Meet Dr. Joe Smith</a></li>
<li><a href="#">Dental Care Services</a></li>
<li><a href="#">Before &amp; After Photos</a></li>
<li><a href="#">Questions &amp; Answers</a></li>
<li><a href="#">Payment Arrangements</a></li>
</ul>
</div><!--end-nav-->
<div class="greenbarhead">Emergency Services</div>
<div class="sidebartext">
If you have a serious dental emergency such as a broken or knocked out tooth, call our office number for prompt and courteous attention.</div>
<div class="goldbarhead">Directions To Office</div>
<img src="images/map.jpg" width="238" height="238" style="border:1px solid #949494;margin:10px 0 0 0;" alt="">
<div class="mapspot">
<form style="margin:15px 0px 0px 0px" action="javascript:openWindowMap();" name="dws_map">
<input type="hidden" name="d_a" value="999 North Ave">
<input type="hidden" name="d_c" value="City">
<input type="hidden" name="d_s" value="FL">
<input type="hidden" name="d_z" value="75246">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr><td width="43%" class="mapsmall" colspan="2" align="left">Intersection or Address: </td>
<td width="57%" rowspan="7" style="padding-left:10px;" valign="top">
</td>
</tr>
<tr>
<td colspan="2" align="left"><input class="mapinput" type="text" name="s_a" size="32" maxlength="30" value="">
</td></tr>
<tr>
<td class="mapsmall" colspan="2" align="left">City: </td>
</tr>
<tr>
<td colspan="2" align="left"><input class="mapinput" type="text" name="s_c" size="32" maxlength="30" value="">
</td></tr>
<tr>
<td class="mapsmall" align="left">State:</td>
<td class="mapsmall" align="left"> ZIP Code:</td>
</tr>
<tr><td align="left"><input class="mapinput" type="text" name="s_s" size="4" maxlength="2" value=""></td>
<td align="left"><input class="mapinput" type="text" name="s_z" size="8" maxlength="5" value=""></td>
</tr>
<tr>
<td colspan="2" style="text-align: center; padding-top:7px;"><input type="submit" class="mapbutton" onmouseover="this.className='mapbutton mapbtnhov'" onmouseout="this.className='mapbutton'" name="dir" value="Get Directions">
</td></tr>
</table></form></div><!--end-mapspot-->
</div><!--end-column-menu-->
</div><!--end-row-->
</div><!--end-container-->
<div id="footer">
<div class="row">
<div class="column foothour">
Monday: 8am - 4pm
<br>Tuesday: 8am - 6pm
<br>Wednesday: 8am - 5pm
<br>Thursday: noon - 8pm</div>
<div class="column footaddy">
Fantastic Dental, Inc.
<br>1972 Homegrown Lane, Suite 101
<br>Anytown, State 75850
<br><b>Phone:</b> (212) 333-5555</div>
<div class="column menu">
<img class="footarrow" src="images/right_bullet.gif" alt=""><a href="#">Hometown Cosmetic Dentist</a>
<br><img class="footarrow" src="images/right_bullet.gif" alt=""><a href="#">Dr. Joe Elmer Smith</a>
<br><img class="footarrow" src="images/right_bullet.gif" alt=""><a href="#">Request Appointment</a>
<br><img class="footarrow" src="images/right_bullet.gif" alt=""><a href="#">Helpful Resources</a></div>
</div><!--end-row-->
 
</div><!--end-footer-->
<div id="base">&copy; OldHomegrownDentist.com. Copyright 2001. All Rights Reserved.</div>
</body>
</html>

And here's the CSS

Code:

/********** PAGE LAYOUT **********/
.menu { width:240px; }
.foothour { width:287px; padding-left:13px;border-left:solid 1px #EFD887;line-height: 1.361em;}
.footaddy { width:340px; padding-left:13px;border-left:solid 1px #EFD887;line-height: 1.361em;}
.mainbody { width:680px; }
.column {  margin: 0 10px;
    overflow: hidden;
    float: left;
    display: inline;}
.row {    width: 960px;
    margin: 0 auto;
    overflow: hidden;}
/********** MAIN BODY **********/
body{         padding:0;
              margin:0 0 0 0;
              font:normal 11.6pt verdana,arial,helvetica,sans-serif;color:#282828;}
#header{      text-align:center;
              background: url(images/bg.jpg) repeat-x;
              width:100%;
              border-bottom:solid 1px #595966;}
#logotag{     width:940px;
              margin:0px auto;
              position:relative;
              font-family:arial,helvetica,sans-serif;
              color:#541F12;}              
.topnav{      float:right;
              position:absolute;
              top:20px;
              right:33px;}              
#container{   width:100%;
              margin:20px 0 40px 0;              
              text-align:justify;}              
h1{           font:normal 20.3pt arial,helvetica,sans-serif;
              color:#541F12;
              margin:0px 0px 8px 0px}
h2{           font:normal 14.3pt arial,helvetica,sans-serif;
              color:#00469B;
              margin:20px 0 0px 0;
              text-align:left}              
h3{           font:normal 14.3pt arial,helvetica,sans-serif;
              color:#00469B;
              margin:20px 0 2px 0;
              text-align:left} 
/********** MAIN NAV MENU **********/
#nav{         margin:0 0 0 0;
              line-height: normal;
       text-align: left;
              font:normal 17px Helvetica,arial, sans-serif;}
#nav #current {background:#8B331D;
       text-decoration: none;
       font-weight: bold;
       color: #FFFFFF;
       font-size:17px;}
#nav ul {     padding: 0px;
       margin: 0px;
       list-style: none;}
#nav li {     border-bottom:1px dashed #282828;
              width:100%;
       margin: 0px;
       padding:0px 0px; 
       margin-bottom:0px;}
#nav li.top{  border-top:1px dashed #282828;width:100%;
       margin: 0px;
       padding:0px 0px;}       
#nav a {      display: block;
       height: 20px;
       color: #003093;
       text-decoration: none;
       text-indent:12px;
       background: #F5F0DC;
       padding:7px 0px 7px 0px;}
#nav a:hover {font-weight: bold;
       color: #FFFFFF;
       background: #CAA44A;
       text-decoration: none;}       
#nav a:active {background:#F5F0DC;
       text-decoration: none;
       font-weight: bold;
       color: #003093;
       font-size:17px;}
/********** LINK STYLES **********/  
a{            color:#003093; 
              text-decoration:underline;}
a:hover{      color:#CC0000;
              text-decoration:none;}
#footer a{    font:13px/15px 'Trebuchet MS', Arial, Helvetica, sans-serif;
              color:#F8EEC9;
              text-decoration:none;
              margin:0 0 0 1px;}
#footer a:hover{text-decoration:underline;}
#logotag a.home{font:bold 9.3pt arial,helvetica,sans-serif;
              text-decoration:none;
              color:#27200C;margin:0 2px;}
#logotag a.home:hover{text-decoration:underline overline;
              background:inherit;
              color:#8B331D;}
#footer a.maplink{font:0.7em Verdana;padding:0 0 0 0;}
a img {       border:0 none;}
/********** IMAGES **********/
.image{       margin:2px 12px 0 0;}
.thumbs{      margin:2px 12px 0 0;} 
/********** MISCELLENEOUS **********/
.fauxheading{ font:bold 14.3pt arial,helvetica,sans-serif;
              color:#7A2E1B;
              margin:35px 0 20px 0;
              text-align:center}
.greenbarhead{background:#126A74;
              font-weight:bold;font-size:103%;
              color:#F5F0DC;
              margin:14px 0px 0px 0px;
              padding:7px 0;
              text-align:center;}
.sidebartext{ background:#FEF2CF;
              font-weight:normal;font-size:95%;
              color:#804000;
              margin:0px 0px 7px 0px;
              padding:7px;
              border-right:1px solid #804000;
              border-bottom:1px solid #804000;
              border-left:1px solid #804000;
              text-align:left;}  
.goldbarhead{ background:#DD9620;
              font-weight:bold;font-size:103%;
              color:#FFFFFF;
              margin:14px 0px 0px 0px;
              padding:7px 0;
              text-align:center;}              
.mapsmall{    font:0.7em Verdana;
              padding:0 0 0 0;
              color:#303030}
.mapinput{    margin:0 0 5px 0;
              padding:0 0 0 2px;
              border:1px solid #949494;
              background-color:#FFFFFF;
              color:#252525;
              font-size:9.0pt;}
.redtag{      float:right;display:inline;
              position:absolute;
              top:16px;
              right:212px;
              font-size:20px;
              color:#CC0000;}
.bluephone{   float:right;display:inline;
              position:absolute;
              top:10px;
              right:22px;
              font-size:28px;
              color:#0055BF;}              
.footarrow { vertical-align:middle; padding:4px 5px 1px 0;width:9px;height:10px;}              
#container p {margin: 20px 0;}              
 
/********** BUTTON STYLES **********/
.contactbtn{  width:9.0em;
              color:#FFFFFF;
              font-family:verdana;
              text-align:center;
              font-size:105%;
              font-weight:bold;
              background-color:#930000;
              border:1px solid #000000;}
.contactbtnhov {color:#800000;cursor:pointer;
              background-color:#EDF4FA;
              border-top-color:#97B2E1;
              border-left-color:#97B2E1;
              border-right-color:#1E438A;
              border-bottom-color:#1E438A;}
.mapbutton{   width:10.0em;
              color:#1C1A1B;
              font:0.6em Verdana;
              text-align:center;
              margin:0 49px 0 0;
              font-size:90%;
              font-weight:normal;
              background-color:#EEEAE1;
              border:1px solid #126A74;}
.mapbtnhov {  color:#FFFFFF;
              cursor:pointer;
              background-color:#126A74;
              border:1px solid #126A74;}
 
/********** FOOTER **********/
#footer {background:#541F12;width:100%;height:180px;font:13px/15px 'Trebuchet MS',Arial;color:#F8EEC9;text-align:left;padding:20px 0 0 0;}
#footer p{margin:25px 0;text-align:center;border-top:solid 1px #E9CC58;}
#base {width:100%;text-align:center;background:#27200C;font:12px/14px 'Trebuchet MS',Arial;color:#F4E4AE;padding:8px 0;border-top:solid 1px #E9CC58;}

**Visible** · 07-29-2009, 06:29 PM

Anyone have a suggestion on how to fix this issue?

...or know a coder who could help?

**LadynRed** · 07-30-2009, 02:57 PM

You still can't put 940px into a 780px space w/o some horizontal scrolling. I would suggest putting the graphics for header and footer in as BACKGROUNDS and not as images in the HTML. Leave them in the 100% width container with the 940px section centered, but change the PX to percentages, and use percentages for all other widths if you don't want horizontal scrolling.

**Visible** · 07-30-2009, 06:31 PM

I think you may have misunderstood what I want to accomplish.

I don't want to inhibit or prevent horizontal scrolling. I'm only saying that with a 940px or 960px width on some elements, a user with a 800x600 display res would need to scroll over to see all the content.

I don't use that size screen and I'm aware that only a tiny percentage of users do. Yet in case someone is using that size, I want the website to display properly and not cut off sections of the right sides (header & footer).

Probably the best way one could fully appreciate what I want to do is to paste the above code into a folder on their machine and see the problem first-hand.

Thanks for your comment!

**LadynRed** · 07-30-2009, 08:25 PM

Quote:

Yet in case someone is using that size, I want the website to display properly and not cut off sections of the right sides (header & footer)

It shouldn't cut it off at all, you should just get a horizontal scroll, which I do get when putting your code into a file locally.

**Visible** · 03:44 AM

That's odd -- because when sizing to 800x600 display, I get cut-offs top right and bottom right. What was your screen display set for when you viewed locally?

Here's some screen shots of what I see at 800x600 resolution...

Top right:

0000.jpg

Bottom right:

0001.jpg

**LadynRed** · 07-31-2009, 09:13 AM

I set my resolution to 800x600 for the test. Is it just one browser that cuts it off rather than scrolling ?

**Visible** · 07-31-2009, 01:51 PM

I only test in 2 browsers -- IE6 and current FF. It happens in both. Neither are prevented from scrolling right. It's just that chunk of page missing top and bottom as shown that bugs the heck out of me. What to do?!