Content goes outside my divs?

Needs to grow with content!

Page 1 of 1

5 Replies - 5454 Views - Last Post: 17 January 2011 - 11:31 PM

#1 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Content goes outside my divs?

Posted 08 January 2011 - 10:18 AM

Hi,

I just made a Joomla site.

However, I'm having issues when I write A long article the content grows to outside my designated div.

I want my content area to grow with the assigned content. So if I wish to put 2 articles or 10 the content will grow.

This is an example. I know the positioning is off but shouldn't the css make the bottom content grow?

EXAMPLE HERE

This is my html before tanslaring it into joomla php.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Monsieur Web</title>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
</head>
<body>
 
<!--Header Top-->
<div id="header"></div>
 
<!--Menu Top Horizontal-->
<div id="Menu"><!--Menu Top Horizontal-->   
<div id="navcontainer">  
<ul id="navlist">  
<li><a href="#">Web Site Packages</a></li>
<li><a href="#">About Mr. Web</a></li>  
<li><a href="#">Web Site Design</a></li>  
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ink & Toner</a></li>  
<li><a href="#">Customer Management Systems</a></li>  
<li><a href="#">Hosting</a></li>  
</ul>
</div> 
</div>
 
<!--Wrap 1 is for 4 Packages-->
<div id="wrap1">
<div id="Package1"></div>
<div id="Package2">
<div class="rollover">
<p>
<a href="http://www.monsieurwebsite.com/index.php?option=com_content&view=article&id=25&Itemid=28"></a>
</p>
</div>
</div>
<div id="Package3">
<div class="rollover">
<p>
<a href="http://www.monsieurwebsite.com/index.php?option=com_content&view=article&id=25&Itemid=28"></a>
</p>
</div></div>
<div id="Package4">
<div class="rollover">
<p>
<a href="http://www.monsieurwebsite.com/index.php?option=com_content&view=article&id=25&Itemid=28"></a>
</p>
</div></div>
</div>
 
<!--Wrap 2 is for Ink & Toner Middle Section-->
<div id="wrap2">
<div id="FloatLeft">
<div class="rolloverInk"><a href="http://www.monsieurwebsite.com/index.php?option=com_hikashop&view=product&layout=show&Itemid=53"></a></div>
</div>
</div>
 
<!--Wrap 3 is for Joomla-->
<div id="wrap3">
<div class="Left_Menu">
<div id="links">
<ul>
<li><a href="#">Web Site Design</a></li>
<li><a href="#">Web Site Development</a></li>
<li><a href="#">About Mr. Web</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Customer Management Systems</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Ink & Toner</a></li>
<li><a href="#">Printing</a></li>
<li><a href="#">Consulting</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="Right_Content">This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.   This is my content.</div>
</div>
 
<!-- Footer  -->
<div id="Footer"></div>
 
</body>
</html>





and this is my CSS:

body {
	text-align:center;
	padding:0px;
	margin:0 auto;
	background-color:#006;
	}
a:link {
	color: #FF0;
	text-decoration: none;
}
a:visited {
	color: #FF0;
	text-decoration: none;
}
a:hover {
	color: #00ff42;
	text-decoration: none;
}
a:active {
	color: #FF0;
	text-decoration: none;
}
#CenterContent {
	text-align:center;
	padding:0px;
	margin:0 auto;
	
	}

#header {
	margin:0 auto;
	padding:0px;
	background-image:url(../images/header.png);
	width: 1038px;
	height: 190px;
	}
	
#Menu {
	margin:0 auto;
	background-image:url(../images/Menu.png);
	width: 1038px;
	height: 66px;
	}

#Menu a {
        font-size:15px;

        padding-top: 10px;
        padding-right: 15px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#e12526;
	text-decoration:none;
	
	}

#Menu a:hover {
        font-size:15px;

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#0075ac;
	text-decoration:none;
	
	}
#navlist  {
	width:1038px;
	height:66px;
        display: inline;
	padding:1px 5px 5px 5px;
	margin: 0px 0px 0px 0px;
	}
	
#wrap1 {
	margin:0 auto;
	width: 1038px;
	height: 382px;
	}
	
#Package1 {
	float:left;
	background-image:url(../images/Packages_1.png);
	width: 280px;
	height: 382px;
	}
	
#Package2 {
	float:left;
	background-image:url(../images/Packages_2.png);
	width: 239px;
	height: 382px;
	}
	
#Package3 {
	float:left;
	background-image:url(../images/Packages_3.png);
	width: 239px;
	height: 382px;
	}

#Package4 {
	float:left;
	background-image:url(../images/Packages_4.png);
	width: 280px;
	height: 382px;
	}

	
#wrap2 {
	margin:0 auto;
	background-image:url(../images/Ink_Toner.png);
	width: 1038px;
	height: 261px;
	}
	
#wrap3 {
	margin:0 auto;
	padding:15px 0 0 0;
	background-image:url(../images/Left_MENU_Right_CONTENT.png);
	background-repeat: repeat-y;
	width: 1038px;
	height: 555px;
	}
	
.Left_Menu {
	margin:0 0 0 0;
	float:left;
	width: 310px;
	height: 519px;
	padding:0px;
	background-repeat:repeat-y;
	}
		
.Right_Content {
	width: 720px;
	height: 519px;
	padding:25px 0px 0px 0px;
	margin:0px 0px 0 260px;
	color:#FFF;
	text-align:left;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	background-repeat:repeat-y;
	}
	
#Footer {
	clear:both;
	margin:0 auto;
	padding:10px 0 0 0;
	background-image:url(../images/Footer.png);
	background-repeat:repeat-y;
	width: 1038px;
	height: 58px;
	color:#FFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	}
	
	
.rollover a {
	margin: 270px 0px 0px 120px;
	display:block;
	width:107px;
	height:29px;
	background-image:url(../images/find_out_more.png);
	background-repeat:no-repeat;
	}
	
.rollover a:hover {
	margin: 270px 0px 0px 120px;
	
	background-repeat:no-repeat;
	background-position:0 -30px;
	background-repeat:no-repeat;
	
	}
	
#FloatLeft {
	float:left;
	width:1038px;
	height:261px;
	}
	
.rolloverInk a {
	margin: 110px 0px 0px 610px;
	width:188px;
	height:51px;
	background-image:url(../images/Click_hereDouble.png);
	background-position:0 0;
	display:block;
	background-repeat:no-repeat;
	}
	
.rolloverInk a:hover {
	background-position:0 -51px;
	background-repeat:no-repeat;
	}
	
#links {
	width:298px;
	height:519px;
	}

#links ul{
	margin:14px 0 0 0px;
	padding:2px 0 0 22px;
	list-style:none;
	}
	
#links ul li {
	margin:14px 0 0 0px;
	list-style:none;
	}
	
#links ul li a {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
	}

#links ul li a:hover {
		
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FF0;
	text-decoration:none;
	}

#navlist li {
	width:1038px;
	height:66px;
    display: inline;
	padding:3px 8px 10px 10px;
	margin: 0px 0px 0px 0px;
	}

#navlist li a {
	font-size:15px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#e12526;
	text-decoration:none;
	}

#navlist li a:hover {
	font-size:15px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#0075ac;
	text-decoration:none;
	}

#navcontainer {
	width:1038px;
	height:66px;
	margin:0px 0px 0px 0px;
	padding: 5px 0px 0px 0px;
	}




Can someone tell me what I'm doing wrong?
I need to get this 2 grow with content.

Ps sorry about the little amount of typing (broke my shoulder)

thanks,
bmcc

This post has been edited by bmcc81: 08 January 2011 - 01:40 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Content goes outside my divs?

#2 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Content goes outside my divs?

Posted 08 January 2011 - 04:43 PM

Hello there,
by looking to your link I noticed that #wrap3 and .Right_Content selectors simply force a fixed height to their related elements.
so try to set the height property in both selectors to auto

height:auto;



Hope it helps
Was This Post Helpful? 0
  • +
  • -

#3 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Content goes outside my divs?

Posted 16 January 2011 - 06:57 PM

View Postahmad_511, on 08 January 2011 - 07:43 PM, said:

Hello there,
by looking to your link I noticed that #wrap3 and .Right_Content selectors simply force a fixed height to their related elements.
so try to set the height property in both selectors to auto

height:auto;



Hope it helps



Hi & thanks for the reply.

I tried that however I stops even higher up the gap now. You can see what i mean here

Is there a way to get this to work properly? Should I make any other Divs
height:auto;
?

Also how come my
background-repeat:repeat-y; 
doesn't work in my #wrap3?

Thanks,
Bmcc81

This post has been edited by bmcc81: 16 January 2011 - 07:02 PM

Was This Post Helpful? 0
  • +
  • -

#4 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Content goes outside my divs?

Posted 17 January 2011 - 04:35 AM

Hi again.
apply the auto height on the .Left_Menu and #links too.

and about the #wrap3 background, it works on IE8(standard mode), Chrome 10.0.634.0, Safari 5.0.2, FF 4.0 Beta 8 and Opra 11
Was This Post Helpful? 1
  • +
  • -

#5 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Content goes outside my divs?

Posted 17 January 2011 - 08:01 PM

View Postahmad_511, on 17 January 2011 - 07:35 AM, said:

Hi again.
apply the auto height on the .Left_Menu and #links too.

and about the #wrap3 background, it works on IE8(standard mode), Chrome 10.0.634.0, Safari 5.0.2, FF 4.0 Beta 8 and Opra 11



Thanks everyone!!! :)
Was This Post Helpful? 0
  • +
  • -

#6 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Content goes outside my divs?

Posted 17 January 2011 - 11:31 PM

No problem :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1