...

View Full Version : Low resolution cuts 100% wide elements



Tehaxor
10-30-2007, 07:49 PM
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:

http://otmo.ifastnet.com/layout2/problem.png

Layout can be found here:

http://otmo.ifastnet.com/layout2

XHTML:


<!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:


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

VIPStephan
10-30-2007, 07:59 PM
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.

Tehaxor
10-30-2007, 08:31 PM
Okay, thanks for your time. Could you still explain how to use that min-width property on that layout?

jlhaslip
10-30-2007, 09:18 PM
Might be a clue here: http://codingforums.com/showthread.php?t=126753

Tehaxor
11-02-2007, 11:39 PM
Didn't help. Anynone know any solution?

jlhaslip
11-03-2007, 07:46 AM
give the Header and Footer a width other than percents



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum