Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Low resolution cuts 100% wide elements

    I have a layout, which has 100 % wide header & footer, but the content section has a static 939 px width. When the site is viewed with 800 x 600 resolution, a horizontal scrollbar naturally appears because of the static content div, but if the site is scrolled to right, 100 % wide elements are cutted and don't stretch entirely to the right.

    Pic:



    Layout can be found here:

    http://otmo.ifastnet.com/layout2

    XHTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
    <head>
    
    <title>
    </title>
    
    <link rel="stylesheet" type="text/css" href="tyylit.css" />
    
    </head>
    <body>
    
    <div id="header">
    
    <div id="sitename">
    </div>
    
    </div>
    
    <div id="nav">
    
    <ul>
    <li><a href="#">Linkki</a></li>
    <li><a href="#">Linkki</a></li>
    <li><a href="#">Linkki</a></li>
    <li><a href="#">Linkki</a></li>
    <li><a href="#">Linkki</a></li>
    <li><a href="#">Linkki</a></li>
    </ul>
    
    </div>
    
    <div id="container">
    <div id="content">
    
    <div id="maincontent">
    
    <div id="maintop">
    </div>
    
    <div id="mainmiddle">
    
    <h1>Lorem ipsum dolor</h1>
    
    
    <p>
    Etiam semper. Fusce velit lorem, vehicula a, dictum at, laoreet sit amet, orci. Duis nisl. Aenean at metus. Morbi vulputate tellus a mauris. Integer tristique turpis id ligula.
    Curabiturdolor est, rhoncus a, convallis a, pulvinar at, mauris. Aliquam fermentum dignissim erat. Nullam fringilla, arcu nec feugiat laoreet, odio dolor auctor est, nec luctus pede nulla
    nec ante. Nunc faucibus, mi nec molestie ullamcorper, lacus metus pulvinar nisi, sed accumsan pede elit a leo. Donec convallis euismod erat. Morbi imperdiet sodales felis.
    </p>
    
    <p>
    In sit amet leo iaculis nisl dapibus venenatis. Vestibulum bibendum magna et nisl. Nulla accumsan. In ac diam et lectus suscipit convallis. Proin nisl tellus, nonummy id, interdum id,
    scelerisque sit amet, est. Aenean libero neque, pharetra a, congue in, euismod ut, dui. Quisque ante. Suspendisse potenti. Sed pulvinar semper mi. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse fringilla varius lacus. Nulla orci turpis, tincidunt in, tempor et, placerat
    id, arcu. Phasellus tristique velit a est. Curabitur vitae sapien ut elit tincidunt fermentum.
    </p>
    
    <p>
    Duis eleifend ante sed mauris. Nam in augue. Nunc erat enim, convallis sed, fermentum non, hendrerit non, est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Maecenas euismod ornare nisl. Aliquam vitae odio. Proin dapibus placerat turpis. Aliquam tristique enim a nibh. Praesent auctor dictum dolor. Suspendisse adipiscing. Phasellus
    porta urna a massa. Vestibulum leo libero, convallis vel, ornare a, blandit placerat, sem. In vitae mi. Etiam in velit. Maecenas ut eros a diam nonummy sodales. Suspendisse nec velit. Sed
    vitae nisi. Duis sit amet massa quis ligula porta eleifend. Suspendisse felis odio, elementum vel, gravida vel, congue a, quam.
    </p>
    
    <h2>Duis sit amet</h2>
    
    <p>
    In sit amet leo iaculis nisl dapibus venenatis. Vestibulum bibendum magna et nisl. Nulla accumsan. In ac diam et lectus suscipit convallis. Proin nisl tellus, nonummy id, interdum id,
    scelerisque sit amet, est. Aenean libero neque, pharetra a, congue in, euismod ut, dui. Quisque ante. Suspendisse potenti. Sed pulvinar semper mi. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse fringilla varius lacus. Nulla orci turpis, tincidunt in, tempor et, placerat
    id, arcu. Phasellus tristique velit a est. Curabitur vitae sapien ut elit tincidunt fermentum.
    </p>
    
    </div>
    
    <div id="mainbottom">
    </div>
    
    </div> <!-- /maincontent -->
    
    <div id="rightcontent">
    
    <h1>In sit amet</h1>
    
    <p>
    In sit amet leo iaculis nisl dapibus venenatis. Vestibulum bibendum magna et nisl. Nulla accumsan. In ac diam et lectus suscipit convallis. Proin nisl tellus, nonummy id, interdum id,
    scelerisque sit amet, est.
    </p> 
    
    <h2>Aenean libero neque</h2>
    
    <p>
    Pharetra a, congue in, euismod ut, dui. Quisque ante. Suspendisse potenti. Sed pulvinar semper mi. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse fringilla varius lacus. Nulla orci turpis, tincidunt in, tempor et, placerat
    id, arcu. Phasellus tristique velit a est. Curabitur vitae sapien ut elit tincidunt fermentum.
    </p>
    
    </div> <!-- /rightcontent -->
    
    <div class="clear">
    </div>
    
    </div> <!-- /content -->
    
    </div> <!-- /container -->
    
    <div id="bottomcontainer">
    <div id="bottomcontent">
    
    <div id="bottomcolumn1">
    
    <h1>In sit amet</h1>
    
    <p>
    In sit amet leo iaculis nisl dapibus venenatis. Vestibulum bibendum magna et nisl. Nulla accumsan. In ac diam et lectus suscipit convallis. Proin nisl tellus, nonummy id, interdum id,
    scelerisque sit amet, est.
    </p> 
    
    </div>
    
    <div id="bottomcolumn2">
    
    <h1>Aenean libero neque</h1>
    
    <p>
    Pharetra a, congue in, e penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.ismod ut, dui. Quisque ante. Suspendisse potenti. Sed pulvinar semper mi. Cum sociis natoque.
    </p>
    
    </div>
    
    <div class="clear">
    </div>
    
    </div> <!-- /bottomcontent -->
    
    </div> <!-- /bottomcontainer -->
    
    <div id="footer">
    Copyright &copy; Sivun nimi | Valid XHTML - Valid CSS
    </div>
    
    </body>
    </html>
    CSS:

    Code:
    body {
    	margin:0;
    	padding:0;
    	font-family:georgia,serif;
    	font-size:12px;
    	color:#000;
    	background-color:#fff;
    	background-image:url(kuvat/bodybg.png);
    	text-align:center;
    }
    
    .clear {
    	clear:both;
    	height:1px;
    }
    
    #maincontent p,table,ul,h1,h2,h3,h4,h5 {
    	text-align:left;
    	margin:0 0 14px 0;
    }
    
    
    #maincontent h1 {
    	font-weight:normal;
    	font-size:26px;
    	margin:0 0 14px 0;
    }
    
    #maincontent h2 {
    	font-weight:normal;
    	font-size:20px;
    	margin:0 0 14px 0;
    }
    
    #rightcontent p,table,ul,h1,h2,h3,h4,h5 {
    	text-align:left;
    	margin:0 0 8px 0;
    }
    
    #rightcontent h1 {
    	font-weight:normal;
    	font-size:22px;
    	margin: 0 0 8px 0;
    }
    
    #rightcontent h2 {
    	font-weight:normal;
    	font-size:18px;
    	margin: 0 0 8px 0;
    }
    
    #bottomcontent p,table,ul,h1,h2,h3,h4,h5 {
    	text-align:left;
    	margin:0 0 10px 0;
    }
    
    #bottomcontent h1 {
    	font-weight:normal;
    	font-size:22px;
    	margin: 0 0 10px 0;
    }
    
    #bottomcontent h2 {
    	font-weight:normal;
    	font-size:18px;
    	margin: 0 0 10px 0;
    }
    
    
    #header {
    	height:120px;
    	background-image:url(kuvat/header.png);
    }
    
    #header #sitename {
    	width:900px;
    	height:100%;
    	background-image:url(kuvat/sitename.png);
    	background-repeat:no-repeat;
    	background-position:left center;
    	background-color:inherit;
    	color:#000;
    	margin:0 auto;
    }
    
    #nav {
    	cursor:default;
    	height:34px;
    	padding:2px 0 0 0;
    	background-image:url(kuvat/nav.png);
    }
    
    #nav ul {
    	padding:9px 0 0 0;
    	height:23px;
    	width:950px;
    	margin:0 auto;
    	text-align:center;
    }
    
    #nav li {
    	display:inline;
    }
    
    #nav li a {
    	cursor:pointer;
    	padding:9px 8px 8px 8px;
    	text-decoration:none;
    	color:#fff;
    	background-color:transparent;
    	font-weight:bold;
    }
    
    #nav li a:hover {
    	color:#009900;
    	background-color:#eeeeee;
    }
    
    #container {
    	background-image:url(kuvat/container.png);
    	background-repeat:repeat-x;
    	background-color:#eeeeee;
    	color:#000;
    	padding:15px 0 14px 0;
    }
    
    #content {
    	width:939px;
    	min-height:1px;
    	margin:0 auto;
    }
    
    #maincontent {
    	width:741px;
    	min-height:1px;
    	background-image:url(kuvat/mainmiddle.png);
    	float:left;
    }
    
    #maintop {
    	width:741px;
    	height:13px;
    	background-image:url(kuvat/maintop.png);
    }
    
    #mainmiddle {
    	width:711px;
    	min-height:600px;
    	padding:0 15px 0 15px;
    }
    
    #mainbottom {
    	width:741px;
    	height:13px;
    	background-image:url(kuvat/mainbottom.png);
    }
    
    #rightcontent {
    	float:left;
    	width:190px;
    	padding:0 0 0 8px;
    	min-height:100px;
    }
    
    #bottomcontainer {
    	min-height:100px;
    	background-image:url(kuvat/bottom_content.png);
    	background-repeat:repeat-x;
    	background-color:#588307;
    	color:#fff;
    	border:3px solid #91ad5c;
    	border-width:0 0 3px 0;
    }
    
    #bottomcontent {
    	width:955px;
    	padding:10px 0 0 0;
    	min-height:1px;
    	margin:0 auto;
    }
    
    #bottomcolumn1 {
    	width:460px;
    	float:left;
    	margin:0 20px 0 0;
    }
    
    #bottomcolumn2 {
        width:460px;
    	float:left;
    }
    
    #footer {
    	background-image:url(kuvat/bc_top.png);
    	background-repeat:repeat-x;
    	padding:12px 0 12px 0;
    	color:#fff;
    	background-color:transparent;
    	font-weight:bold;
    	clear:both;
    }
    I have another similiar layout, which has just the same problem:

    http://otmo.ifastnet.com/layout1

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Your page is doing exactly what you’re telling it to do. It’s 100% wide and the content has a width of 939px. And your browser (and mine as well) I doing just the correct thing. The 100% wide elements are 100% wide and the content spills out of the container if the latter one is narrower.

    You know, these 100% width are the viewport width, not what you think is 100% (i.e. all the way through to the edge of the content, even if it’s outside of the viewport). Your browser can’t read your mind and know what you’re thinking. You have to tell it. What you are looking for is a mininmum width and the CSS min-width property is doing the job.

    IE 6 doesn’t know this but since it wrongly encloses content that it soo big for its container(s) this won’t have any negative effect, I suppose.

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, thanks for your time. Could you still explain how to use that min-width property on that layout?

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't help. Anynone know any solution?

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    give the Header and Footer a width other than percents


  •  

    Posting Permissions

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