Lita
New Member
I have the logo pf the company floating to the left in my site and I don't want anything to float in my content div but I can't figure out a good code to use. I have tried using the clear:both code but it didnt do anything.
Here is the HTML
And here is the CSS
Here is the HTML
HTML:
<!doctype html">
<head>
<title>Mama Cakes</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/infiniteCarousel/jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel();
});
</script>
</head>
<body>
<div id= "header">
<img src="http://img.photobucket.com/albums/v134/Invadergir1612/MamaCakes_Logo.png" alt="Logo" />
</div>
<div class="curved-box-css3" >
<br><h1>Everything Is Better</br></h1>
</div>
<div class="curved-box2-css3">
<br><h1>With Cupcakes</br></h1>
</div>
<div class="curved-box3-css3">
</div>
<div class="curved-box4-css3">
</div>
<div class="curved-box5-css3" >
<ul><center><a href="News.html">News</a></ul>
</center>
<ul><center><a href="Menu.html">Menu</a></ul>
</center>
<ul><center><a href="Flavors.html">Our Flavors</a></ul>
</center>
<ul><center><a href="Gallery.html">Photo Gallery</a></ul>
</center>
<ul><center><a href="Community.html">Community</a></ul>
</center>
<ul><center><a href="Visit.html">Visit</a></ul>
</center>
<ul><center><a href="contactus.html">Contact Us</a></ul>
</center>
</div>
<div id="content" style="background-color:#f3e9de;height:420px;width:820px;top:280px;">
<p>
<blockquote>
<center><h1>Welcome To Mama Cakes</h1></center>
<img src="http://img.photobucket.com/albums/v134/Invadergir1612/Mama%20Cakes/Gallery.jpg" />
<p>
We Are a family owned buisness. Our cupcakes are baked daily from the finest ingredients. We offer one of the largest selection of flavors. We have at least 18 available daily and more than 50 flavors to choose from.</p>
<p>
Our cupcakes are unique and delicious - everyday the variety changes. There are multiple sizes for every appetite. Every cupcake has a topper of some kind and a surprise filling inside. Once you try one, you'll come back for more.</p>
<p>
Opening Mama Cakes has been a dream since 2009 when we started our business from home. It is wonderful to see my vision become a reality and hear all the positive feedback from our customers. We look forward to serving our customers for years to come and we welcome your feedback. Our customers mean everything to us.</p>
</blockquote>
</p>
</div>
<div class="aside">
<center><br>
"Like" us on Facebook and check out our daily flavors.</br></center>
<p>
<a href="https://www.facebook.com/pages/Mama-Cakes/188302341183750">
<img src="http://img.photobucket.com/albums/v134/Invadergir1612/facebook_icon-1.png" alt="HTML tutorial" width="32" height="32" />
</a>
</p>
</div>
<div id="footer" style="height:70px;width:1050px;">
<center>
Copyright © 2012 Mama Cakes | 31 Elm Street, Westfield MA 01085
<br><br>
<a href="Index.html">Home</a>
|
<a href="contactus.html">Contact Us</a>
|
<a href="FAQ.html">FAQs</a>
|
<a href="Visit.html">Visit</a>
</center>
</div>
</body>
And here is the CSS
HTML:
body {background-image:url('http://img.photobucket.com/albums/v134/Invadergir1612/Mama%20Cakes/Dots.jpg');}
#body
{
background-color:#E9AECE;
}
img
{
float:left;
}
.curved-box-css3
{
width: 1130px;
height: 40px;
margin: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #c8645e;
font-family:Arial,Helvetica,sans-serif;
color:white;
text-shadow: 2px 2px #000000;
text-indent: 150px;
box-shadow: 4px 4px 3px #333;
}
.curved-box2-css3
{
width: 1130px;
height: 40px;
margin: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #d77872;
font-family:Arial,Helvetica,sans-serif;
color:white;
text-shadow: 2px 2px #000000;
text-indent: 430px;
box-shadow: 4px 4px 3px #333;
}
.curved-box3-css3
{
width: 1130px;
height: 40px;
margin: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #EC999F;
box-shadow: 4px 4px 3px #333;
}
.curved-box4-css3
{
width: 1130px;
height: 40px;
margin: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #f2c6c3;
box-shadow: 4px 4px 3px #333;
}
.curved-box5-css3
{
width: 1130px;
height: 50px;
margin: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #f3e9de;
box-shadow: 4px 4px 3px #333;
}
#carousel ul {
list-style: none;
width:1600px;
margin: 0;
padding: 0;
position:relative;
}
#carousel li {
display:inline;
float:left;
}
#content
{
background-color: #f3e9de;
position:absolute;
left:80px;
top:100px;
text-indent: 30px;
box-shadow: 4px 4px 3px #333;
border-radius: 10px;
padding-left:8px;
padding-right:8px;
border: 1px solid #000000;
overflow: auto;
width: 100%
margin:0 auto;
}
ul
{
float:left;
}
a
{
text-decoration:none;
Padding: 0px;
display:inline;
color:000;
font-family:Arial,Helvetica,sans-serif;
}
a:hover
{
color:8C7F79;
text-decoration:none;
border-bottom: solid;
}
.aside
{
width: 200px;
height: 420px;
margin: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #f3e9de;
position:absolute;
left:930px;
top:280px;
box-shadow: 4px 4px 3px #333;
}
#footer
{
background-color: #f3e9de;
position:absolute;
left:80px;
top:740px;
border-radius: 10px;
box-shadow: 4px 4px 3px #333;
}