...

View Full Version : text going over the edge of a div



R4mbini
11-19-2008, 10:00 PM
hello,

i am having a problem with the text escaping outside the div i have put around it,

www.bheadccf.co.uk/test.html

that is the html,

www.bheadccf.co.uk/temp.css

and the CSS.

i am also not sure if i am using the clearfix hack properly.

thank you very much for your time and help.

_Aerospace_Eng_
11-19-2008, 10:39 PM
Well what did you expect? Its one long line of text. It has no place for it to break. And you are right you weren't using the clearfix hack properly. Try the following.

<!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=iso-8859-1" />
<title>Website Title</title>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="brdr"> banner
<div id="nav">
<ul id="nav_top">
<li class="last"><a href="nothing.html"> Link 3</a></li>
<li><a href="nothing.html">Link 2</a></li>
<li class="first"><a href="nothing.html">Link 1 </a></li>
</ul>
</div>
</div>
<div id="container" class="clearfix">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="content">
<p> Suspendisse odio neque, lacinia vehicula, tincidunt a, elementum ac, nibh. Donec in mi. Suspendisse vel arcu vitae diam molestie euismod! Cras sem tellus, mollis nec, condimentum quis, condimentum at, lorem. Praesent magna lorem, blandit id, auctor in, ultricies eget, sem. Mauris faucibus gravida eros. Pellentesque mollis, ligula sit amet rhoncus vestibulum; massa orci ultrices purus; in pulvinar mi purus ac dolor. Fusce eros mauris, lacinia at; laoreet sit amet, pulvinar sed, risus. Vestibulum fermentum ligula! Integer in nulla ac mauris fringilla sodales. Ut suscipit suscipit risus. Duis sagittis. Suspendisse potenti. Vestibulum nec lacus. Duis eget tortor sit amet sapien rutrum consequat. Suspendisse ac nisl. </p>
<p> Suspendisse lorem! Suspendisse id sapien. In auctor est nec justo. Nunc tincidunt velit eu tortor? Donec feugiat, sem vel accumsan gravida, nibh nibh aliquet quam, quis porta felis velit in lectus! Vestibulum dolor. Proin ligula. Aliquam erat volutpat. Nulla a velit a orci ornare ultricies. Curabitur augue. Nulla tempus lorem id massa. Quisque convallis sapien. </p>
<p> Ut blandit ultrices lectus! In purus augue, volutpat vel, adipiscing luctus, varius et, augue. Vestibulum dignissim scelerisque nisi. Mauris rutrum. Aliquam erat volutpat. Mauris scelerisque, ante eget ullamcorper ullamcorper, urna neque vulputate quam, in gravida elit augue eget nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras semper pede mattis est. Maecenas vestibulum ipsum vitae nisi imperdiet malesuada. Aliquam ipsum. Sed nisi libero; varius a, semper eget, varius ut, nisl. Nulla vel erat vel ligula rhoncus adipiscing. Etiam sed nisi vitae lacus consequat placerat. In hac habitasse platea dictumst. In diam justo, ornare id, rutrum vitae, tristique non, sapien. Donec tempus ornare lacus. Aenean commodo tortor eu erat. </p>
</div>
<div id="footer"> footer </div>
</div>
</body>
</html>
You will need to add this to your CSS

#container {
background:#FFF;
color:#000;
}
p {
margin:0;
padding:10px;
}

tomws
11-19-2008, 10:40 PM
Put some spaces in that string and it works as you probably expect. Lorem ipsum text (http://www.lipsum.com/feed/html) is a better alternative than a monolothic string.

R4mbini
11-19-2008, 10:48 PM
thank you for your help, am i right to be using the clearfix in this situation?

_Aerospace_Eng_
11-20-2008, 12:15 AM
Yes you should but look at how I used in the code I posted. You only need to put it on the containing element that holds the floats. You didn't have one so I made one.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum