Hey everyone
im having a problem with the width of my main (content) div. when i add text it expands with the text (instead of automaticly going down a line) although i have placed a width: property.
currently the width is set to auto however when a fixed number (Xpx) is placed it still happens, however overflow:scroll elimates the overlapping but adds a yucky scroll bar.
any ideas?
code:
html:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="hodvehadarstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box">
<div class="header"></div>
<div class="contentarea">
<div class="menucont">
</div>
<div class="right">
</div>
<div id="content">
<p>
</div>
</div>
</div>
</body>
</html
css (i excluded hyperlink related style to save room)
Code:
*{margin: 0px; padding: 0px;}
body{
background-color: #dddbcd;
font-size: xx-small;
font-family: "Lucida Sans", serif;
background-image: url('bg.jpg');
background-repeat: repeat-y;
}
div.box{
position: relative;
width: 750px;
max-width: 750px;
text-align: left;
color: #737373;;
}
div.header{
width: 750px;
height: 150px;
background-image: url('header.jpg');
background-repeat: no-repeat;
}
div.contentarea{
position: relative;
width: 750px;
max-width: 750px;
height: 800px;
}
div.menucont{
position: absolute;
top: 0px;
left: 0px;
width: 115px;
height: 100%;
margin-top: 5pt;
text-align: center;
margin-left: 30px;
}
div.right{
position: absolute;
right: 0px;
top: 0px;
width: 150px;
height: 100px;
text-align: center;
margin-top: 5pt;
margin-right: 30px;
font-family: sans-serif;
font-size: small;
}
#content{
width: auto;
margin: 6pt 185px 0 150px;
font-family: sans-serif;
font-size: medium;
color: inherit;
height: 75%;
overflow: scroll;
}
12-10-2006, 19:41
