My website looks fine...except on widescreen monitors. then the layout gets completly screwed. Not sure why.
Basicly my layout is split up into 4 main peices. the main content box, the sidebar, the header and the footer. the footer seems to work fine all the time, same with the header. its the content box and sidebar i have troubles with
both content and sidebar are set up the same. they are made of 4 divs, one for the top peice, one where the background image for the box goes, one where all the content goes and one for the bottom peice. basicly it looks like this:
HTML Code:
<div id="rightcontainer">
<div id="contenttop">
</div>
<div id="contentbg">
<div id="content">
<!--content goes here-->
</div>
</div>
<div id="contentbottom">
</div>
</div>
that is essentially what the main content box looks like. The sidebar is just the same but it is in another div called leftcontainer (or containerleft, cant remmber but its irrelivent)
Here is my site: http://www.helmgames.com
and here is the pic of what it looks like when it goes screwy: http://graphicselite.com/stuff/lolAtHG.jpg
also here is my css:
Code:
body {
font-family: Arial;
color: #414141;
}
a {
color: #34beed;
text-decoration: underline;
}
a:hover {
color: #90cd31;
text-decoration: underline;
}
#contentbg {
width: 700px;
float: left;
background: url(images/contentbg.jpg);
margin-left: 20px;
}
#contenttop{
width: 700px;
float: left;
height: 18px;
background: url(images/contenttop.jpg);
margin-left: 20px;
}
#contentbottom{
width: 700px;
float: left;
height: 18px;
background: url(images/contentbottom.jpg);
margin-left: 20px;
}
#content{
width: 650px;
float: left;
margin-left: 20px;
padding-left: 5px;
}
#containeright{
float: right;
}
#containerleft{
float:left;
}
#sidebarbg{
width: 200px;
background: url(images/sidebarbg.jpg);
}
#sidebartop{
width: 200px;
height: 20px;
background: url(images/sidebartop.jpg);
}
#sidebarbottom{
width: 200px;
height: 20px;
background: url(images/sidebarbottom.jpg);
}
#sidebarcontent{
width: 150px;
margin-left: 20px;
padding-left: 5px;
}
#footer{
clear: both;
font-size: 9px;
}
#boxart{
float: left;
padding-right: 15px;
height: 260;
}
#gamearea{
padding: 20px;
margin-left: 20px;
}
#gamedesc{
clear:both;
}
#thumbnails{
width: 200px;
height: 100px;
padding-right: 10px;
margin-right: 5px;
}
thanks in advance,
Slick |
