Welcome to WebmasterWorld Guest from 174.129.151.95

Forum Moderators: not2easy

Message Too Old, No Replies

Expecting text to expand div out to the right

   
1:53 pm on Oct 25, 2008 (gmt 0)

5+ Year Member



I was expecting an absolutely positioned div - "bullet-1" to expand out to the right as I type however any new text I add pushes down one line and then out to the right. There is room in the containing div and I do not have a width set so I'm not sure why it does this. Can someone help explain. Thanks

Here is the HTML:

<body>
<div id="wrapper">
<div id="header"></div>
<div class="fltlft" id="buttons3">
<div id="bullet-1">Shop For Racks</div>
</div>
<div class="fltrt" id="feature">
<div id="rck_feature">
<ul>
<li>Content for this area</li>
<li>Take advantage of the protection that your sax cases are designed to ensure for your fine instruments.</li>
<li>Minimize required storage space.</li>
<li>Easily store and access each of your saxes without accidentally toppling other cases.</li>
<li>Eliminate scuffed walls and crowded closets.</li>
<li>Easily adjustable for different size and shaped baritone, tenor, alto, and soprano sax cases</li>
</ul>
</div>
</div>
<br clear="all" />
<div id="copy-3"></div>
<div id="footer"></div>

</div>
</body>
</html>

Here is the CSS:
body {
margin: 0;
padding: 0;
background: #000000;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
background: #E1CC95;
height: 768px;
width: 1000px;
position: relative;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
#header {
background: url(images/slices/header-bk.jpg) no-repeat;
height: 134px;
width: 1000px;
}
#feature {
height: 376px;
width: 764px;
background: url(images/slices/rack-feature.jpg) no-repeat;
}
#buttons3 {
height: 376px;
width: 236px;
background: url(images/slices/buttons3.gif);
position: relative;
}
.link_bullet {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
}

#bullet-1 {
height: 12px;
position: absolute;
top: 97px;
color: #F6CE6E;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
left: 33px;
}
#rck_feature {
color: #F6CE6E;
text-decoration: none;
height: 265px;
width: 215px;
margin-top: 100px;
margin-left: 61px;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
background: #0000CC;
text-align: left;
}

.fltrt {
float: right;
}
.fltlft {
float: left;
}
.clrflt {
clear: both;
}
#copy-3 {
background: url(images/slices/3-copy.jpg);
height: 173px;
width: 1000px;
}
#footer {
background: url(images/slices/footer.jpg);
height: 85px;
width: 1000px;
}

7:36 pm on Oct 25, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



In FF3 it seems to work as I expected. Although yellow on yellow is pretty hard to read.

What browser are you using to look at it?

What exactly do you mean by "add to it". Is that dynamically with javascript or just adding more text in the html ?

A div in the flow has the full width of it's parent. An absolutely positioned or floated div will try to collapse their width to the content they hold.

9:49 pm on Oct 25, 2008 (gmt 0)

5+ Year Member



you are correct. For some reason, when viewing it in Dreamweaver, the design view window of it is different. Anytime I added more text to #bullet-1 the next letter would drop down one line. However when I preview it in a browser, it looks fine