homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Expecting text to expand div out to the right

5+ Year Member

Msg#: 3773388 posted 1:53 pm on Oct 25, 2008 (gmt 0)

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:

<div id="wrapper">
<div id="header"></div>
<div class="fltlft" id="buttons3">
<div id="bullet-1">Shop For Racks</div>
<div class="fltrt" id="feature">
<div id="rck_feature">
<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>
<br clear="all" />
<div id="copy-3"></div>
<div id="footer"></div>


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;



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

Msg#: 3773388 posted 7:36 pm on Oct 25, 2008 (gmt 0)

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.


5+ Year Member

Msg#: 3773388 posted 9:49 pm on Oct 25, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved