PDA

View Full Version : How to use overflwo so it creates more space for text?



l Squid l
Dec 13th, 2008, 10:47 PM
Basically, I do not want a scroll bar so I want my content box to expand.

www.kumarafoundation.com

HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css"/>

<title>Kumara Foundation</title>
</head>

<body>
<div id="wrapper">
<img src="images/KFv4_02.png" alt="Header" width="746" height="207" hspace="0" vspace="0" />
<img src="images/KFv4_04.png" alt="Nav" width="746" height="29" hspace="0" vspace="0" />
<img src="images/KFv4_05.png" alt="Content Top" width="746" height="33" hspace="0" vspace="0" />
<div id="content">
</div>
<img src="images/KFv4_07.png" alt="Footer" width="746" height="29" hspace="0" vspace="0" />

<!-- End Wrap --></div>

</body>
</html>


css
@charset "utf-8";
/* CSS Document */
body {
background-color:#EEEEEE;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
}

#wrapper {
width:746px;
margin: 0 auto;
overflow:auto;
}

#content {
width:746px;
height:470px;
background:#FFF;
text-align: left;
overflow:inherit;
}

Excavator
Dec 13th, 2008, 10:54 PM
Hello |Squid|,

Remove the bit in red and add some content -

#content {
width:746px;
height:470px;
background:#FFF;
text-align: left;
overflow:inherit;
}

Excavator
Dec 13th, 2008, 11:18 PM
Did you see it's broken in IE7?
This fixes it:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background-color:#EEEEEE;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
width:746px;
margin: 0 auto;
overflow:auto;
}

#content {
width:746px;
background:#FFF;
text-align: left;
}
</style>
<title>Kumara Foundation</title>
</head><body>
<div id="wrapper">
<img src="http://www.kumarafoundation.com/images/KFv4_02.png" alt="Header" width="746" height="207" />
<img src="http://www.kumarafoundation.com/images/KFv4_04.png" alt="Nav" width="746" height="29" />
<div id="content">
<img src="http://www.kumarafoundation.com/images/KFv4_05.png" alt="Content Top" width="746" height="33" />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<img src="http://www.kumarafoundation.com/images/KFv4_07.png" alt="Footer" vspace="0" width="746" height="29" hspace="0" />
<!-- end wrapper --></div>
</body>
</html>

l Squid l
Dec 13th, 2008, 11:37 PM
Thanks, I was trying to follow wat you wrote in the other thread but It wouldn't work! This works perfectly! Thanks for spotting that error too!