CSS/MasterPage Scroll Bar Troubles

Capodecina
Permabanned
Joined
31 Dec 2003
Posts
5,172
Location
Barrow-In-Furness
If you adjust your window size on OcUK, once it gets to a certain point the scroll bars become active rather than trying to compress the site even more.

On my site, if I resize it just keeps pushing the divs togethered and it gets all mangled because it doesn't introduce a scroll bar. (I'd like it to work how OcUK does.

At the moment it starts to force the center div under the navigation (column div) and it just looks messyyyyy

Here's my css if it's any help...

Code:
h1 { padding:0;
margin:0;
color:#FFF;
font-size:130%; }

h2 {padding:0; margin:0; color:#FFF; font-size:20px; border-bottom:1px solid #A07850;}

h3 { padding:0;
margin:0;
color:#FFF;
font-size:105%; }

a { color:#E6AC73;
text-decoration:none; }
a:hover { text-decoration:underline; }

body {  color:#FFFFFF;
        background-color: #444444;    
        font:12px 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
     }



div#container {
	
	}
	div#header {background-color:#666666;
	    height: 50px;
	   	   
		
		}
		div#header-in {
			
			}
	div#content 
	{
	    margin-top: 51px;
		}
		div#center 
		{   
		   
		    background-color: #666666;		
			margin: 0 0 0 30%;
			width: 69%;
			}
			div#center-in {
				
				}
		div.column 
		{
		    background-color: #666666;		
			width: 29%;
			
			}
			div#left 
			{
				float: left;
				}
				div.column-in {
					
					}
	div#footer 
	{
	    margin-top: 50px;
	    background-color: #666666;	
		clear: both;
		}
		div#footer-in {
			
			}


															/** SUB CONTAINERS **/
* { }






															/** LISTS **/
* { }

:]
 
Last edited:
I've scrapped it and made a new CSS layout because this one looks a little better with the navigation across the top and gives me more room for the content.

:x
 
For the moment, I don't make use of themes - masterpages and css do enough :)

Mid-width isn't working, i've even tried setting it on all of my divs?

Code:
div#header {background-color:#666666;
	    height: 50px;
	    min-width: 1000px;	    
	}
		
	div#navigation 
	{   padding: 5px;
	    background-color:#555555;
	    margin-top: 2px;
	    min-width: 1000px;
	}
		
	div#window
	{   padding: 5px;
	    background-color:#666666;
	    margin-top: 5px;
	    min-width: 1000px;
	}
		
	div#content 
	{   padding: 5px;
	    background-color:#666666;
	    margin-top: 10px;
	    min-width: 1000px;
	    
		}

Any ideas?
 
Using I.E 6 by any chance? In case you are, min-width isn't directly supported, but there are some hacks you can use to get around it.

More modern browsers should support it fine though. In that case I don't know why it's not working for you.
 
Back
Top Bottom