Two nested DIVs are spilling out of my content DIV. I checked this site and didn't seem to find another similar situtation to get an answer for me. I have done about 10 pages with the CSS below and have had no issues whatsoever. Its only on the latest page I'm having an issue with two DIVs that want to spill out of the content DIV if I tell them to float LEFT. They look perfect in Dreamweaver and IE8, but Mozilla has them OUTSIDE of the content DIV.
These two:
#twentyninedollars {
background-color:#FF9900;
width: 200px;
float: left;
}
#twentyninetext {
background-color:#4160A1;
text-align: left;
width: 500px;
position: relative;
float: left;
(#twentyninedollars is a paypal button, and I want #twentyninetext to line up on the same line right next to it to the button's right.) If I don't float the two DIVS, it displays INSIDE the content DIV, in IE and Mozilla fine, BUT, not right next to other, but one UNDER the other.
Below is the complete page HTML and CSS (I deleted unnecessary content.) Any ideas? Again, I've had no problems up until now.
Thank you
__________________________________
body {
margin:0;
padding:0;
background-image: url(graphics/pagebackgroundtile.jpg);
}
#wrapper{
width: 950px;
text-align: left;
margin-right: auto;
margin-left: auto;
}
#header{
position:relative;
height:200px;
background-color:#4160A1;
width:950px;
display:block;
overflow:auto;
}
#topmenu{
position:relative;
height:30px;
background-color:#003366;
width:950px;
display:block;
}
#content{
background-color: #e0e0e0;
position: relative;
width:868px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #003366;
border-left-color: #003366;
border-right-style: solid;
border-left-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #003366;
background-image: url(graphics/whitemarblebackgrn.jpg);
}
#footer{
height:25px;
background-color:#cccc99;
clear:both;
display:block;
text-align: center;
width: 100%;
vertical-align: middle;
padding-top: 15px;
font-family: "Trebuchet MS";
font-size: small;
color: #000000;
}
#twentyninedollars {
background-color:#FF9900;
width: 200px;
float: left;
}
#twentyninetext {
background-color:#4160A1;
text-align: left;
width: 500px;
position: relative;
float: left;
<body>
<div id="wrapper">
<div id="header"></div>
<div id="topmenu">
<div id="navcontainer"><ul id="navlist">
<li id="active"><</a></li>
<li></li>
<li></li>
<li></li>
<li><</li>
<li></li>
<li></li>
</ul></div>
</div>
<div id="content">
<h1 align="center"></h1>
<p class="normal"><</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div id="twentyninedollars"> 29 Button </div>
<div id="twentyninetext">29 Text</div>
</div>
<div id="footer"></div>
</div>
</body>
These two:
#twentyninedollars {
background-color:#FF9900;
width: 200px;
float: left;
}
#twentyninetext {
background-color:#4160A1;
text-align: left;
width: 500px;
position: relative;
float: left;
(#twentyninedollars is a paypal button, and I want #twentyninetext to line up on the same line right next to it to the button's right.) If I don't float the two DIVS, it displays INSIDE the content DIV, in IE and Mozilla fine, BUT, not right next to other, but one UNDER the other.
Below is the complete page HTML and CSS (I deleted unnecessary content.) Any ideas? Again, I've had no problems up until now.
Thank you
__________________________________
body {
margin:0;
padding:0;
background-image: url(graphics/pagebackgroundtile.jpg);
}
#wrapper{
width: 950px;
text-align: left;
margin-right: auto;
margin-left: auto;
}
#header{
position:relative;
height:200px;
background-color:#4160A1;
width:950px;
display:block;
overflow:auto;
}
#topmenu{
position:relative;
height:30px;
background-color:#003366;
width:950px;
display:block;
}
#content{
background-color: #e0e0e0;
position: relative;
width:868px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #003366;
border-left-color: #003366;
border-right-style: solid;
border-left-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #003366;
background-image: url(graphics/whitemarblebackgrn.jpg);
}
#footer{
height:25px;
background-color:#cccc99;
clear:both;
display:block;
text-align: center;
width: 100%;
vertical-align: middle;
padding-top: 15px;
font-family: "Trebuchet MS";
font-size: small;
color: #000000;
}
#twentyninedollars {
background-color:#FF9900;
width: 200px;
float: left;
}
#twentyninetext {
background-color:#4160A1;
text-align: left;
width: 500px;
position: relative;
float: left;
<body>
<div id="wrapper">
<div id="header"></div>
<div id="topmenu">
<div id="navcontainer"><ul id="navlist">
<li id="active"><</a></li>
<li></li>
<li></li>
<li></li>
<li><</li>
<li></li>
<li></li>
</ul></div>
</div>
<div id="content">
<h1 align="center"></h1>
<p class="normal"><</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div id="twentyninedollars"> 29 Button </div>
<div id="twentyninetext">29 Text</div>
</div>
<div id="footer"></div>
</div>
</body>