CSS Interfering with larger screen resolutions.

[kendallkamikaze]

Alright so I own http://www.one-stride.net/ and I recently re-did the look of the front page. I notice that when you have a larger resolution the side bars of the game come in and 'smush' the center content instead of adding scroll bars to all of the content.

 

How can this be fixed/avoided for future coding? I'm fairly new to working purely with CSS.

 

OH and the code I am using is:

<style type="text/css">
body{
margin: 0;
padding: 0;
}

#MainLeft, #MainRight{
position: absolute; 
top: 0; 
left: 0px; 
width: 150px; /*Width of left frame div*/
height: 100%;
overflow: hidden; 
background-color: 3a643e;
color: white;
}

#MainRight{
left: auto;
right: 0px; 
width: 150px; /*Width of right frame div*/
overflow: hidden; 
height: 100%;
background-color: 3a643e;
color: white;
}

#MainLeft2, #MainRight2{
position: absolute; 
top: 0; 
left: 0px; 
width: 10px; /*Width of left frame div*/
height: 100%;
overflow: hidden; 
background-color: 2e5032;
color: white;
}

#MainRight2{
left: auto;
right: 0px; 
width: 10px; /*Width of right frame div*/
overflow: hidden; 
height: 100%;
background-color: 2e5032;
color: white;
}

#maincontent{
position: fixed; 
left: 150px; 
right: 150px; 
bottom: 0;
overflow:auto;
height: 100%;
background: #e0e2d4;
top: 0;
margin: 0;
padding: 0;
}


table.sample {
border-width: thick;
border-spacing: 0px;
border-style: solid;
border-color: #425e3f;
border-collapse: separate;
background-color: #ffffff;
}

.innertube{
margin: 10px; 
}

</style>

<div id="MainLeft">
<div id="MainRight2">
<div id="innertube">
</div>
</div>
</div>

<div id="MainRight">
<div id="MainLeft2">
<div id="innertube">
</div>
</div>
</div>


<div id="maincontent" style="background: #e0e2d4;">
<div id="innertube">

<center>
<img src="items/currentlayout/tester3.jpg"><BR><BR>
<TABLE>
<TR><TD>


<table class="sample">
<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="402" HEIGHT="172">
<div STYLE="
overflow:auto; 
background-image:url(layoutslice/2newlayout_2x1.jpg);
border: 5px; 
border-style: soild; 
border-color: #425e3f; 
color:none; 
width: 402px; 
height: 180px; 
	scrollbar-face-color:F1F2EA;
	scrollbar-shadow-color:F1F2EA;
	scrollbar-highlight-color:F1F2EA;
	scrollbar-3dlight-color:F1F2EA;
	scrollbar-darkshadow-color:F1F2EA;
	scrollbar-track-color:F1F2EA;
	scrollbar-arrow-color:000000;
font-family: MS Sans Serif;
font-size: 14px;
color: #38643b;">

<li>Do you love horses?
<LI>Do you enjoy automated games?
<LI>Like the aspect of relistic simulation?
<LI>Does raising, breeding, and showing horses sound fun?
<LI>Like a friendly community and not an elitest community?
<center><BR>
<b>One-Stride</b> is a unique, challenging simulated horse game that allows players to breed, care for, show and interact with virtual horses. Players also take part in a virtual riding academy that allows them to progress up the ranks through exams to become a world class farrier, vet, show judge or president of an association. These exams involve questions taken from actual equestrian colleges. The game combines elements of a role-playing game and automated sim to give players a different and personal experience. Players will take part in challenges of realistic horse management and will build bonds with people from all over the world.  <BR><BR>This game is free to try and everyone is welcome! We do offer inexpensive upgrades for any player who would like a few extra perks on the game.
<b>One-stride</b> has been evolving quickly with members from all over the world. What we have to offer you is a very friendly/active community of horse and animals lovers, it is also a fun way to compete/care for virtual horses!<br><BR>

We hope you enjoy <b>One-stride</b> as much as we do, and look forward to chatting with you!</div></TD>
</tr></table>

</td><TD>    </td><TD>    </td><TD>    </td><TD>    </td><TD>    </td><TD>    </td><TD>

<table class="sample">
<TR><TD>
<div STYLE="
overflow:auto; 
background-image:url(layoutslice/2newlayout_2x1.jpg);
border: 5px; 
border-style: soild; 
border-color: #425e3f; 
color:none; 
width: 402px; 
height: 180px; 
top: 2px;
	scrollbar-face-color:F1F2EA;
	scrollbar-shadow-color:F1F2EA;
	scrollbar-highlight-color:F1F2EA;
	scrollbar-3dlight-color:F1F2EA;
	scrollbar-darkshadow-color:F1F2EA;
	scrollbar-track-color:F1F2EA;
	scrollbar-arrow-color:000000;
font-family: MS Sans Serif;
font-size: 14px;
color: #38643b;">

<center><a href="http://www.one-stride.net/register.php"> <img src='layoutslice/register3.jpg' border='0px'></a><BR>
<font face='Comic Sans MS' size='2px'>It's free to play! </font></center>
<?php 

include 'loginbox.php';

?>
<center><font face='Comic Sans MS' size='2px'>If you want to take a look around you can log in with:<BR>
Username: guest Password: guest</font></center></div>
</td></tr></table>
</td></tr></table>

</center>
</div>
</div>

[kendallkamikaze]

no ideas?

[ldougherty]

Are you talking about how the inntertube style has the scroll bar rather than the outside browser?

 

If you can explain more about what you are talking about versus what you expect it to see I'm sure people would be better able to assist you.

[kendallkamikaze]

Its sort of hard to explain. When I make my resolution higher [so everything is bigger], there is a scroll bar on the content with fixed side bars. I want the content fixed I am guessing with scroll bars that get bigger or smaller depending on screen resolution.

[dbrimlow]

The reason no one is responding is because what you have there is NOT a web document.

And no one wants to try to explain even the most basics of html 101.

 

You are lucky the page displays at all.

 

It has no html structure. Not only is it "Quirks" mode and missing a doctype, it is also missing the html, title, head, encoding and body tags (open or closing)!

 

This doesn't conform to any known html that I've ever seen. And while, old html 2 or html 3 had a loose "optional" tagging requirement, this goes beyond that.

 

Get a book on xhtml and CSS ... you need to get away from the old optional html and get some strict tagging rules enforcement.

 

We can't help you without re-writing the page using proper html structure. Sorry to be so hard, but it is a truth.

[kendallkamikaze]

Not in the least bit helpful I used another sites template so if you have issues with it talk to them; Like I said I am new to coding so how on earth should I know what I'm missing, that is exactly why I came here.

[kendallkamikaze]

I added, HTML TITLE BODY and HEAD tags but I have no IDEA about doctypes. All I know is its CSS using tables and DIV.

 

This is the template I used: http://www.neuroticweb.com/recursos/3-columns-layout/

[haku]

Not in the least bit helpful I used another sites template so if you have issues with it talk to them;

 

He's not the one who has problems - its your layout that isn't working.

 

If you don't know what a doctype is, there is a great little site called Google where you can find out this stuff! You just go there and type in a question, something like "what is a doctype?", and it will search the web to find out for you! Very handy, I really recommend it. I learned most everything I know about design using it, in much the same fashion as this thread - I would ask a question, get an answer I didn't understand, then go research until I figured out what that answer meant.