Expecting text to expand div out to the right

Discussion in 'CSS' started by blueman2, Oct 24, 2008.

0
  1. #1
    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;
}
    Code (markup):
     
    blueman2, Oct 24, 2008 IP