Forum Moderators: not2easy
I have no idea how to stop text from expanding my divs, I have used margins and set width values but neither seem to work.....
The main problem is: I have a absolutely positioned div, which is used for "additional" stuff to accompany a blog. Anyways, all the additional things are contained within boxes.. but the problem is that when I enter a certain amount of text, the div expands and covers the other column that contains the blog. Any help would be appreciated.
You will find my code below: (Only the layout css file though and the html).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="replaced for posting"/>
<meta name="copyright" content="replaced for posting" />
<meta name="description" content="replaced for posting" />
<meta name="googlebot" content="index,follow" />
<meta name="keywords" content="replaced for posting" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="revisit-after" content="20 Days" />
<meta name="robots" content="index,follow" />
<meta http-equiv="pragma" content="no-cache" />
<title>Replaced for posting </title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header">
</div>
<div id="navbar">
<a href="http://www.default.com">Replaced</a>
<a href="http://www.default.com">Replaced</a>
<a href="http://www.default.com">Replaced</a>
<a href="http://www.default.com">Replaced</a>
<a href="http://www.default.com">Replaced</a>
<a href="http://www.default.com">Replaced</a>
</div>
<div id="content">
<h1> Replaced </h1>
<div id="entry">
<h2>Replaced</h2>
<p>Replaced </p>
</div>
<div id="entry">
<h2>Replaced</h2>
<p>Replaced</p>
<p>Replaced</p>
</div>
<div id="entry">
<h2>Replaced</h2>
<p>Replaced</p>
</div>
</div>
<div id="extra">
<div id="box">
Replaced:<br />
Replaced
</div>
</div>
<div id="footer">
Replaced
</div>
</body>
</html>
-------------------------------------------------
body {
margin: 0;
padding: 0;
}
#header {
/* for the benefit of ie5/win height = correct height + top padding + top and bottom
border widths */
height: 82px; /* 80px + 0px + 2px */
margin: 10px 100px 0px 100px;
border-right: 2px solid #507;
border-left: 2px solid #507;
border-top : 2px solid #507;
border-bottom: 0px;
voice-family: "\"}\"";
voice-family: inherit;
height: 80px; /* the correct height */
z-index: 1;
}
body>#header {height:80px;}
#header h1 {
padding: 0px;
margin: 0px;
}
#navbar {
margin: 0 100px 0 100px;
padding-top: 2px;
border-left: 2px solid #507;
border-bottom: 2px solid #507;
height: 18px /* for ie5 windows */
voice-family: "\"}\"";
voice-family: inherit;
height: 15px;
}
body>#navbar {height:15px;}
#navbar a:link, #navbar a:visited {
margin: 0px;
padding: 0px;
}
#navbar img {
margin: 0px;
padding: 0px;
}
#content {
margin: 0px 300px 0 100px;
padding-top: 2em;
padding-left: 0.5em;
padding-bottom: 0.8em;
border-right: 3px solid #507;
z-index: 10;
}
#content h1 {
margin: 0;
}
#entry {
position: relative;
margin: 0 10px 0 0 ;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.7em;
padding-left: 0.5em;
border-bottom: 1px dotted #507;
}
#entry p {
margin: 0;
}
#entry h2 {
margin: 0;
}
#extra {
position: absolute;
top: 117px;
right: 99px;
height: 200px;
width: 190px;
padding: 5px;
}
#box {
top: 0px;
left: 0px;
padding: 0.3em;
border: 1px dotted #507;
width: 170px;
margin: 0 5px 0 5px;
}
#footer {
margin: 0 100px 0 100px;
height: 20px;
padding-top: 5px;
}
-----------------------------------------------------
*EDIT*
Nevermind, I have now corrected the problem.
If you want the div to cut off the extra content, play with the clip and overflow styles. You can see examples here:
[w3schools.com...]
