Text going out of container [Archive]

ziggyzaggy

09-13-2005, 09:27 AM

This i think is a simple problem but im not understanding the basic concepts of css. Why on this page does the text "aaaaaa...." stretch out of the 150px width that i have given its div tag? And how come the "zzz..." and "bbb..." bits are 150px from the left? (i know that I've set the left value mainSection div their div's are both contained in to 150px, but ive specified the position as relative)

index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

<head>

<title>[title]</title>

<link rel="stylesheet" href="main.css" type="text/css" title="MainStyleSheet" />

</head>

<body>

<div id="navLinks"><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>

<div id="mainSection">

<div id="titleBar">zzzzzzzzzzzzzz</div>
<div id="content">bbbbbbbbbbbbbbb</div>

</div>

</body>

</html>

main.css
body {margin:0px; padding:0px;}
div#navLinks {position:absolute; width:150px; height:100px;}
div#mainSection {position:absolute; left:150px;}
div#mainSection div#titleBar {position:absolute; width:150px; height:100px;}
div#mainSection div#content {position:absolute; width:150px; height:100px;}

cheers!!!

Fang

09-13-2005, 09:42 AM

The text string has no spaces, so it does not break within the width.

#mainSection is offset by 150px, then so are it's children in this example.

btw no point in adding the div to id selectors; the id can only be applied to one element.