Welcome to WebmasterWorld Guest from 54.225.22.139

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)

New User

5+ Year Member

joined:Oct 23, 2008
posts: 20
votes: 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:

<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)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 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.

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

New User

5+ Year Member

joined:Oct 23, 2008
posts: 20
votes: 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