Content is spilling out of the Div

Lita · Jun 24, 2012

Ok so I set the div size and it is showing up but when the content exceeds the div box, instead of creating a scroll bar it flows out of the box and down the page. Also I am trying to figure out how to fully center my website, everything is floating on the left side of the page and I would prefer it to stay to the center, like most sites. Here is the CSS

HTML:

body {background-image:url('http://img.photobucket.com/albums/v134/Invadergir1612/Tin3.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: #BA9786;
	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: #D88FBC;
    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;

}




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:480px;
    box-shadow: 4px 4px 3px #333;
    
    
	
}



#footer
	{
	background-color: #f3e9de;
	position:absolute;
	left:80px;
	top:930px;
	border-radius: 10px;
	box-shadow: 4px 4px 3px #333;

	}

And 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="About.html">About Us</a></ul></center>


<ul><center><a href="Menu.html">Menu</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="carousel" >
<p>
<ul>
	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel3.jpg" width="800" height="250" /><p>To see more cakes and cupcakes follow us on Facebook.</p></li>
	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel_image.png" width="800" height="250" /></li>
	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel2.jpg" width="800" height="250" /><p>Got a special event coming up? Let us take care of the dessert.</p></li>
	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel_image.png" width="800" height="250" /><p>It's not easy being green.</p></li>
	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel_image.png" width="800" height="250" /></li>
	<li><img alt="" src="http://img.photobucket.com/albums/v134/Invadergir1612/Carousel_image.png" width="800" height="250" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>

</ul>

</div>





<div id="content" style="background-color:#f3e9de;height:420px;width:820px;top:480px;">
<p>
<center><h1>Welcome To Mama Cakes</h1></center>

Not sure what to put here yet so here is some lorem ipsum
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur mauris vitae libero consectetur et rutrum sapien vulputate. Duis lectus lectus, bibendum ut interdum eget, aliquam porta enim. Mauris semper, orci ut pulvinar tempus, augue neque feugiat augue, nec pellentesque arcu augue vel lorem. Mauris ut lacus ligula. Quisque vitae ligula arcu, sed condimentum nunc. Ut vel quam id enim faucibus vulputate id sed sem. Proin euismod risus et lacus consectetur posuere. Donec quis sapien non risus tincidunt porttitor nec vel lacus. Integer vitae neque at massa tempus egestas. Donec massa arcu, accumsan ut condimentum sed, egestas vitae erat.</p>
<p>
Phasellus enim metus, ornare ac facilisis fringilla, iaculis non orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tincidunt arcu a nunc pulvinar ut luctus turpis pellentesque. Quisque et augue id lectus scelerisque hendrerit. Integer at dui nisi. Pellentesque commodo, felis a placerat adipiscing, turpis orci ornare ipsum, eget consequat massa est consequat nibh. Phasellus justo risus, semper eu lobortis consequat, rutrum id velit. Nam sed bibendum tortor. Maecenas molestie enim sed urna fringilla gravida. </p>



</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
<br><br>
<a href="Index.html">Home</a>
|
<a href="About.html">About Us</a>
|
<a href="contactus.html">Contact Us</a>
|
<a href="FAQ.html">FAQs</a>
|
<a href="Visit.html">Visit</a>

</center>
</div>





</body>

If anyone could help me I would appreciate it.

chrishirst · Jun 24, 2012

"clear" the floats before closing the container

Lita · Jun 24, 2012

I hate to sound like a pain but how would I go about doing that?

chrishirst · Jun 24, 2012

http://www.quirksmode.org/css/clearing.html

Lita · Jun 24, 2012

Thank you I will check that out

Lita · Jun 24, 2012

It worked perfectly thank you very much for helping me out. Any ideas on how to get it to center on the page? Normal <center></center> Tags dont work and the trouble is keeping the logo image over the 5 divs.

RAJO · Jun 24, 2012

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

Lita · Jun 24, 2012

@RAJO I know that, Im just having problems with the <center> code, I'm new to this and I cant find any good guides to help me. I breaks my webpage a part when I use it so that is why I am asking for help. I'm working on getting the lightbox in and the fact that the site isn't centered is starting to bother me. Is there any other way to center a webpage other than with the <center> code?

ronaldroe · Jun 24, 2012

There are a number of ways to center your site, depending on how your site is built. As long as what you're trying to center has a defined width (% or px both work), you can just add

Code:

margin:0 auto;

to your css for that element.

Content is spilling out of the Div

Lita

New Member

chrishirst

Well-Known Member

Lita

New Member

chrishirst

Well-Known Member

Lita

New Member

Lita

New Member

RAJO

New Member

Lita

New Member

ronaldroe

Super Moderator