tuxandpucks
08 Mar 2011, 02:30 PM
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;}
Here is the HTML Code.
HTML CODE:
<!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=" Tux and Pucks - linux tips, HOWTOs, Video HOWTOs, Video Studies of Distros, and a touch of my personal favorites hockey and poetry"/>
<meta name="keywords" content="hockey, linux, grudgelist, tux, boston bruins, montreal canadians, nhl, linux, ubuntu, HOWTO, ubuntu linux, edit,
edit software sources, sources"/>
<link rel="StyleSheet" type="text/css" href="index.css">
<title>Tux and Pucks: Linux and Hockey. All In One!</title>
</head>
<div id="threecolwrapper">
<div id="twocolwrapper">
<!--HEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEAD ER-->
<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 hockey fan welcomes you to...</i>
<h1>| Tux and Pucks | Linux and Hockey. All In One! |</h1>
<div id="tuxtrans"><img src="/images/banners/logos/tuxtrans.gif" /></div><!--tuxtrans-->
<h2>Linux News, Software Updates, and HOWTOs With A Touch of Hockey</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://taplinuxblog.blogspot.com/>Linux Blog</a></li>
<li><a href=http://taphockeyblog.blogspot.com/>Hockey Blog</a></li>
<li><a href=http://www.tuxandpucks.com/webmail>TaP Webmail</a></li>
</ul><!--centerlinks end-->
</div><!--header-->
<!-- End Header Stuff--><!--HEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEAD ER-->
<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.google.com/coop/cse/brand?form=cse-search-box&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_ubuntu_to_disc.htm" /><img src="/images/howto/burnubuntutodisc/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-8095137576406792";
/* unit1 */
google_ad_slot = "9332728989";
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 He Is A Montreal Fan<br>His Blog Will Tend To Feature Them Dammit!</p>
<ul>
<li><a href="http://taphockeyblog.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://yorba.org/shotwell/" />~Shotwell </a>
<a href="http://gcc.gnu.org/" />~GNU C Compiler </a>
<a href="http://gcc.gnu.org/" />~GNU C++ Compiler </a>
<a href="http://www.scilab.org" />~Scilab </a>
<h4>Software Updates</h4>
Updates For:<br>March 5 2011<hr>
Thanks,
../Randy
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;}
Here is the HTML Code.
HTML CODE:
<!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=" Tux and Pucks - linux tips, HOWTOs, Video HOWTOs, Video Studies of Distros, and a touch of my personal favorites hockey and poetry"/>
<meta name="keywords" content="hockey, linux, grudgelist, tux, boston bruins, montreal canadians, nhl, linux, ubuntu, HOWTO, ubuntu linux, edit,
edit software sources, sources"/>
<link rel="StyleSheet" type="text/css" href="index.css">
<title>Tux and Pucks: Linux and Hockey. All In One!</title>
</head>
<div id="threecolwrapper">
<div id="twocolwrapper">
<!--HEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEAD ER-->
<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 hockey fan welcomes you to...</i>
<h1>| Tux and Pucks | Linux and Hockey. All In One! |</h1>
<div id="tuxtrans"><img src="/images/banners/logos/tuxtrans.gif" /></div><!--tuxtrans-->
<h2>Linux News, Software Updates, and HOWTOs With A Touch of Hockey</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://taplinuxblog.blogspot.com/>Linux Blog</a></li>
<li><a href=http://taphockeyblog.blogspot.com/>Hockey Blog</a></li>
<li><a href=http://www.tuxandpucks.com/webmail>TaP Webmail</a></li>
</ul><!--centerlinks end-->
</div><!--header-->
<!-- End Header Stuff--><!--HEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEADERHEAD ER-->
<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.google.com/coop/cse/brand?form=cse-search-box&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_ubuntu_to_disc.htm" /><img src="/images/howto/burnubuntutodisc/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-8095137576406792";
/* unit1 */
google_ad_slot = "9332728989";
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 He Is A Montreal Fan<br>His Blog Will Tend To Feature Them Dammit!</p>
<ul>
<li><a href="http://taphockeyblog.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://yorba.org/shotwell/" />~Shotwell </a>
<a href="http://gcc.gnu.org/" />~GNU C Compiler </a>
<a href="http://gcc.gnu.org/" />~GNU C++ Compiler </a>
<a href="http://www.scilab.org" />~Scilab </a>
<h4>Software Updates</h4>
Updates For:<br>March 5 2011<hr>
Thanks,
../Randy