Solution to accommodation users with low screen resolution - right column is being pushed under 1

[Evil8]

Hey my pages look good, but while testing I found that users with older squarish monitors and low screen resolution push the pages' right column down underneath the main container. I need a solution to accommodate that. I was thinking of forcing things to overflow to the right and having horizontal scrolling appear. Is this workable or is there a better way?

#container{
	width:100%; 
	margin:15px 0px 0px 10px;
}

#topbar{
	width:auto; 
	display:block;
	vertical-align:central;
	height:60px; 
	text-align:center; 
	background:#FFFFFF url(../PNGfiles/compass.png) center no-repeat;
}  

#main{
	width:58%; 
	margin-right:20px; 
	float:left;
	text-align:center;
	border-left-style:solid;
	border-left-color:#274D7E;
	border-right-style:solid;
	border-right-color:#274D7E;
}

#main_left{
	width:45%; 
	margin-left:10px;
	float:left;
	text-align:center;
}

#main_right{
	width:45%; 
	margin-right:10px;
	float:left;
	text-align:center;
}
	
	

#navbar{
	width:auto; 
	display:block; 
	height:28px; 
	border-bottom:#274D7E solid; 
	border-bottom-width:9px; 
}  

#leftnav{
	width:150px; 
	margin-right:20px; 
	float:left; 
	font-size:1.0em;
}
	
#rightnav{
	width:300px; 
	float:right; 
	font-size:.75em;
}

Things are nested on the pages like this:

<div id="container>
 <div id="topbar">
 </div>

 <div id="navbar">
 </div>

 <div id="leftnav">
 </div>

 <div id="main">
  <div id="main_left">
  </div>
  
  <div id="main_right">
  </div>
 </div>

 <div id="rightnav">
 </div>

</div>

It is the rightnav container that is being pushed under the main container.


Thanks

 

[vacunita]

What's happening is that your side bars have static widths, which means there will be a point when after taking 58% of the available width for your #main section there won't be enough space left to accommodate 450px (300 + 150) from the other 2 columns, so one has to be pushed down.

I see a couple options:
1. Give your #container div, assuming your right column is inside it, a minimum width so you stop it from crunching down at a certain resolution. Smaller screens will have to scroll, but at least you keep the layout intact.

2.Give your side bars percentage widths, so they also shrink accordingly and continue to fit in the available space. This may cause the column contents to be squished also, which may be undesirable.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Evil8]

Thanks.

changed:

#container{
    width:auto !importaint;
    width:1200px;
    min-width:1200px;
    margin:15px 0 0 10px;
}

I'm not sure I'll stick with this solution as the client keeps making changes faster than I can code them, but for now it works.

...on to the next issue.

 

[ChrisHunt]

You have an extra i in your !important clause:

#container{
    width:auto !importa[red]i[/red]nt;
    width:1200px;
    min-width:1200px;
    margin:15px 0 0 10px;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Evil8]

Good morning Chris. I re-typed it for the post and made the typo. It's fine on the actual sheet, but thanks it might not have been.