How can you make one Image not Float when the others are?

Lita · Jul 2, 2012

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

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 &copy; 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;

	}

CaldwellYSR · Jul 2, 2012

Lita said:

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

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 &copy; 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;

	}

What in the world is <br><h1>Words</br></h1>???

A) That's not even nested correctly... you close the inside tags before the outside tags

B) <br></br> is not even a tag? <br /> is a self closing tag that's a line break but why would you need that?

If you want to float the logo image and not any other images you can do one of two things... either

Code:

#header img { float: left; }

or even better put an id on the image in your header then just put the float on that id and only that id.

You really need to unlearn everything you "know" about html and then go relearn from the start because I can guarantee you there is not a tutorial anywhere that was written in the last 10 years that gives you code like

HTML:

<br><h1>Everything Is Better</br></h1>

<ul><center><a href="contactus.html">Contact Us</a></ul>
</center>

and if there is such a tutorial that person deserves to be gutted with a dull blade.

Lita · Jul 2, 2012

@CaldwellYSR Thank you for the suggestions, I know I need help, Im going to school in the fall for web design so Im hoping to learn how to code everything properly. Also that code you gave me worked perfectly, thank you for the suggestions.

CaldwellYSR · Jul 2, 2012

Lita said:
@CaldwellYSR Thank you for the suggestions, I know I need help, Im going to school in the fall for web design so Im hoping to learn how to code everything properly. Also that code you gave me worked perfectly, thank you for the suggestions.

For a starter I would look at this link for more information about making unordered lists. The way you did it makes alot of unordered lists with no information in them. In reality you only need one list with alot of list items.

Also if you ever find yourself wanting to write <center></center> then just slap yourself and come ask us how to fix that

I'll give you a hint it's handled in CSS either with the text-align: center; property or with margin: 0 auto; depending on what you're trying to center.

Lita · Jul 3, 2012

Thank you for the help and that tip about the centering is also very helpful, the typing in constantly is a pain.

How can you make one Image not Float when the others are?

Lita

New Member

CaldwellYSR

Member

Lita

New Member

CaldwellYSR

Member

Lita

New Member