CSS column moves on different sized screens.

[tuxandpucks]

I am having a problem with CSS. This is probably an amateur issue so I am hoping someone can help.

I program my website with a wide-screen computer. I don't know the exact size, but it is wider than it is tall - a new model. Everything looks great.

Then, I go and view my website on a 800x600 screen and the middle(main) content rises way up the screen and obviously looks bad.

I am floating my columns so I am not sure how to control this behavior.

Would I use min-height or max-height to control such action?

Here is my CSS if you need to see it. The CSS I am referring to is Centercoltwo (software updates):

body
{
margin:0; padding:0;
}
#threecolwrapper
{
float:left; width:100%; background-color:#772953;
}
#twocolwrapper
{
float:right; width:72%;
margin-left:15%; margin-right:14%;
border-left:ridge 6px black; border-right:ridge 6px black;
background-color:#c17ca1;
font-family: ‘Ubuntubeta’, ‘Ubuntu’, 
‘Bitstream Vera Sans’, ‘DejaVu Sans’, 
Tahoma, sans-serif;
}
/*header stuff*/
#tuxtrans
{
position:absolute;
top:0.75%;
left:75%;
width:50px;
}
#header
{
background-color:#8c5974; border:solid 3px #D2691E;
}
#header h2
{
text-align:center; font-size:0.8em; color:#FFd700;
}
i
{
font-size:1.2em; word-spacing:5px;
letter-spacing:1px; text-align:left;
padding-left:2%; padding-bottom:-5%;
color:#FFd700; font-weight:600;
margin-bottom:-2%;
}
#searchbox
{
text-align:center;
}
h1
{
padding-bottom:-4%; margin-bottom:-1%; text-align:center; word-spacing:4px; font-size:1.8em; color:#FFd700; font-weight:1300; 
text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black;
z-index:1;
}

/*CE N T E R L I N K S*//*CE N T E R L I N K S*/
#centerlinks
{
list-style-type:none;
padding-top:5px; padding-bottom:%;
font-size:15px; text-decoration:none; 
background:#de531a; margin-bottom:1px;
border:solid 2px #8c5974;
text-align: center;
}
#centerlinks li
{
display:inline;
margin-right:0.5%;
margin-left:0.5%;
text-decoration:none;
font-color:#FFFFFF;
}
#centerlinks li:hover 
{
padding: 10px;
border-radius: 15px;
background:#FFd700;
}
#centerlinks li span
{
background:#6495ed;
}
/*CE N T E R L I N K S*//*CE N T E R L I N K S*/

.rounded-corners {
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 -khtml-border-radius: 20px;
 border-radius: 20px;
}
#centercolone
{
background-color:#8c5974;
/*border:ridge 9px #FFFFFF;*/ 
width:24%;
font-size: 13px;
margin-top:2%; 
margin-right:0;
text-align:center;
margin-left:1%;
}
#centercolone ul
{
list-style: none;
padding-left:4px;
}
#centercolone h4
{
padding-left:15px;
}
#centercoltwo /*softwareupdates*/
{
background-color:#8c5974;
font-size:15px;
width:49%;
float:right;
margin-left:16%;
margin-right:6.5%;
margin-top:-60%;
min-height:-60%;
margin-bottom:25%;
}
#centercoltwo ul
{
list-style: none;
}
#centercoltwo a
{
padding-left:10px;
padding-right:10px;
}
#centercoltwo
{
padding-left:10px;
}
#centercolfour /*videostudyof*/
{
background-color:#8c5974;
width:24%; 
font-size: 13px;
margin-right:0;
text-align:center;
margin-left:1%;
}
#centercolfour ul
{
list-style: none;
padding-left:4px;
}
#centercolfive
{
background-color:#8c5974;
width:24%;
padding-left:4px; 
font-size: 16px;
margin-right:0;
text-align:left;
margin-left:1%;
list-style:none;
}
/*
@media screen and (-webkit-min-device-pixel-ratio:0) 
{
#centercolthree {margin-top:-35%;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) 
{
#centercoltwo {margin-top:-35%;}
}
*/
h4
{
text-align: center;
}
#googleads
{
float:right; 
margin-top:-180px;
width:6%;
margin-right:12.5%;
margin-left:-3%;
}
#bannerad
{
text-align:center;
margin-bottom:1%;
margin-top:1%;
width:300px;
float:right;
margin-right:55%;
}
#banneradone
{
text-align:center;
margin-bottom:1%;
margin-top:1%;
width:300px;
float:right;
margin-right:40%;
}
#footer
{
width:99.55%; 
float:right;
clear:both; 
text-align:center; 
background-color: #8c5974;
border:solid 4px #D2691E;
}

thanks,
../Randy

[londrum]

we'd need to see your html code to be able to fix it.
but its probably because the content inside the columns is wider than the space you've allowed them.

eg. if the middle column is 50% wide and an image inside it measures 410px, then this wont matter on a wide moniter, but on an 800px screen there won't be enough room for the third column to fit (because the 2nd column will now be more than 400px wide), and it will drop below the second one.

remember that you have to include all the padding and borders as well as the images when you total up the width of the content

[tuxandpucks]

Thanks londrum. Here is the html for my site:

I believe I calculated the correct amount that each padding, margin, and so on would take up.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<link rel="shortcut icon" href="favicon.ico" >
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="description" content="****"/>
<meta name="keywords" content="****"/>
<link rel="StyleSheet" type="text/css" href="index.css">
<title>Tux All In One!</title>
</head>
<div id="threecolwrapper">
<div id="twocolwrapper">


<!--HEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHE
ADERHEADERHEADERHEADERHEADERHEADER-->
<div id="header">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style " width="100%">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=tuxandpucks"></script>
<!-- AddThis Button END -->



<i>A linux loving ...</i>
<h1>| Tux All In One! |</h1>
<div id="tuxtrans"><img src="/images/banners/logos/tuxtrans.gif" /></div><!--tuxtrans-->
<h2>Linux News, Software Updates, and HOWTOs </h2>

<ul id="centerlinks">
<span><b>TaP Links</b></span>
<li><a href=page2linux.htm>Linux</a></li>
<li><a href=page2hockey.htm>Hockey</a></li>
<li><a href=poetry.htm>Poetry</a></li>
<li><a href=http://****.blogspot.com/>Linux Blog</a></li>
<li><a href=http://****.blogspot.com/>Hockey Blog</a></li>
<li><a href=http://****.com/webmail>TaP Webmail</a></li>
</ul><!--centerlinks end-->

</div><!--header-->
<!-- End Header Stuff--><!--HEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHE
ADERHEADERHEADERHEADERHEADERHEADER-->

<body>

<div id="searchbox">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank" width="100">
<div>
<input type="hidden" name="cx" value="partner-pub-8095137576406792:2044626347" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.example.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div><!--searchbox-->


<div id="centercolone" class="rounded-corners">
<h4>Linux HOWTO...</h4>
<ul>
<li>Burn Ubuntu To Disc</li>
<li><a href="/howto/burn_to_disc.htm" /><img src="/images/howto/dvd-pic.png" ALT="discburning" width="100" height="100" /></a></li><br>
<a href="howto.htm">Click Here For More HOWTOs</a>
</ul>
</div><!--centercolone-->


<div id="googleads" class="rounded-corners">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-****";
/* unit1 */
google_ad_slot = "****";
google_ad_width = 165;
google_ad_height = 620;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><!--googleads-->



<div id="centercolfour" class="rounded-corners">
<h4>Video Study Of...</h4>
<ul>
<li>lupu 5.2 (Puppy)</li>
<li><a href="/videos/studyof/puppylinux.swf" /><img src="/images/studyof/puppy.jpg" ALT="puppylinux" Width="125" Height="70" /></a></li><br><br>
<a href="videostudies.htm">Click Here For More Video Studies</a>
</ul>
</div><!--centercolfour-->

<div id="centercolfive" class="rounded-corners">
<h4>Latest From The Hockey Blog...</h4>
<p>Because <br>His Blog Will Tend To!</p>
<ul>
<li><a href="http://****.blogspot.com/">Hockey Blog</a></li>
</ul>
</div><!--centercolfive-->


<div id="centercoltwo" class="rounded-corners">
<h4>Software Updates</h4>
Updates For:<br>March 6 2011<hr>

<a href="http://****.org/shotwell/" />~Shotwell&nbsp</a>
<a href="http://****.org/" />~GNU C Compiler&nbsp</a>
<a href="http://****.org/" />~GNU C++ Compiler&nbsp</a>
<a href="http://****.org" />~Scilab&nbsp</a>

<h4>Software Updates</h4>
Updates For:<br>March 5 2011<hr>

[edited by: tedster at 4:38 pm (utc) on Mar 16, 2011]

[edited by: alt131 at 8:03 pm (utc) on Jul 9, 2011]
[edit reason] Side Scroll [/edit]

[calder12]

One thing I notice is that you have no container the divs just all float on their own. That isn't causing your issue but I dunno, I just find things easier to control if I work with containers.

I think (I'm still relatively new to CSS too) if you float both columns left, then clear the floats after the last column that might fix it. To be honest you do things a lot differently than me, I always use fixed sizes rather than percentages just because it's easier to see how it's going to work on any machine and you never get these issues. I design generally for 1024x768 which means a 955px main container for me anyways, this means it looks fine on any screen. Even widescreens look okay although the side bars are a touch wide.

If I were you I'd search Google for "CSS Box model" & "CSS float layouts" and read as much as you can till you have a handle on how it works.

Good luck, sorry I couldn't give you a specific answer.

[calder12]

No edit function on posts?

PS. Quick tip.

if you want to see what a website will look like on a different resolution than you're using change your resolution. Yeah it's going to make your monitor look fuzzy but you only have to do it for a second to get a glance at how things fit.



>.< and now I see the edit... sorry for the double post

[tuxandpucks]

Thanks for the feedback. Double posts are better than no help at all. :)

I will try to improve my amateur css skills and work on those containers.