homepage Welcome to WebmasterWorld Guest from 54.226.180.223
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Expecting text to expand div out to the right
blueman2




msg:3773390
 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:

<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;
}

 

swa66




msg:3773478
 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.

blueman2




msg:3773510
 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