Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Thanked 1 Time in 1 Post

    css experts What is the proper use of overflows on this page I made

    Hello everybody.

    I am designing a website that has footer that stretches across the whole browser and also stays at the bottom ( sticky footer) That seems to work fine. Then I have the main page content contained in a wrapper div that is set to center horizontally and vertically on the page. I just made color boxes for now to show you the concept.

    I am building this on a computer with a wide-screen laptop. It is a 1600 x 900 resolution display.

    Of course everything looks good on this monitor but Im trying to build this page so that it displays properly on a square monitor 1024 x 768 or higher as well as wide screen displays.

    problem #1 im not sure about the proper approach with overflow settings etc. should I be setting overflow to auto on page? footer?

    problem #2when I re-size the browser window smaller the page displays a little buggy. even though the footer is suppose to be 100% wide, when you scroll to the right, it cuts off short. Im not sure what the best way to do this is. there are so many sites that use this functionality but they seem to render great on any size screen. my main content div is in the 900's wide so that should be safe at least.

    problem #3 If you take a look at the bottom right of the footer where the copyright stuff goes and make browser smaller, did I do the overlapping correct? I have it set to z-index under the navigation links. Id like some input.

    can anybody take a look and let me what I am doing wrong with this page or, any suggestions.

    My code is below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css.css" rel="stylesheet" type="text/css" />
    <div id="wrapper"><!--wrapper open-->
    <div id="main_content"><!--main_content open-->
    <div id="content_left"></div>
    <div class="divider_line"></div>
    <div id="content_middle"></div>
    <div class="divider_line"></div>
    <div id="content_right"></div>
    </div><!--main_content close-->
    </div><!--wrapper close-->
    <div class="footer"><a href="index.html">HOME</a> <a href="page1.html">PAGE1</a> <a href="page2.html">PAGE2</a> <a href="page3.html">PAGE3</a> <a href="page4.html">PAGE4</a> <a href="contact.html">CONTACT</a><div id="copyright">COPYRIGHT 2011 | WEBSITE BY <a href="#" target="_blank">MY URL</a> | <a href="sitemap.html">SITEMAP</a> | <a href="terms.html">TERMS</a></div>
    </div><!--footer close-->
            html, body {
    	margin: 0;
    	height: 100%;
    	background-color: #cdcdcd;
    	overflow: auto;	
            #wrapper {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -38px;
    	#main_content {
    	height: 428px;
    	width: 938px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -233px; /*set to a negative number 1/2 of height*/
    	margin-left: -469px; /*set to a negative number 1/2 of width*/
    	z-index: 998;
            .footer,.push {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #cdcdcd;
    	text-align: left;
    	height: 38px;
    	position: relative;
    	z-index: 999;
    	line-height: 38px;
    	word-spacing: 32px;
    	background-color: #FFF;
    	a:link {
    	color: #000;
    	text-decoration: none
            a:visited {
    	color: #000;
    	text-decoration: none
            a:active {
    	color: #000;
    	text-decoration: none
            a:hover {
    	color: #444;
    	text-decoration: underline
    	#copyright {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	line-height: 38px;
    	color: #000;
    	top: 0px;
    	right: 25px;
    	word-spacing: normal;
            #content_left {
    	float: left;
    	height: 428px;
    	width: 200px;
    	background-color: #9F3;
            #content_middle {
    	float: left;
    	height: 428px;
    	width: 350px;
    	background-color: #99F;
            #content_right {
    	height: 418px;
    	width: 350px;
    	float: right;
    	text-align: justify;
    	background-repeat: repeat;
    	padding-top: 10px;
    	background-color: #F90;
    	.divider_line {
    	float: left;
    	height: 428px;
    	width: 9px;
    	position: relative;
    	border-right-width: 1px;
    	border-right-style: dotted;
    	border-right-color: #000;
    	margin-right: 9px;
    Last edited by gribbs100; 02-11-2011 at 10:40 PM.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,013 Times in 1,010 Posts
    This is not exactly what you asked for, but you may want to read/see this. I think the modern web page should be viewable on 1600px all the way down to the cell phone without any (too many) problems. I have used the 960 frame works for a couple of years but newer fluid frame works are now emerging. Look at this page to see what I'm talking about

    and this one http://i2.sitepoint.com/examples/cssgrid/index.html

    and you might want to read and get this one http://www.blueprintcss.org/

    Check it out and tell me what you think.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts