Layout breaks when too much widgets in sidebar

Hey!

Started making wp layouts while ago and still learning the whole consept step by step.

Now making this theme http://hdaddy.net/testi/quisque which has png image with a bit of shadow in it in the container background.

Problem is, that when there´s too much widgets in the sidebar the layout breaks as you can see.

I can solve the problem using min heights but is there another solution to prevent the layout to break.

Because there might be pages with little text and then it will break, but if there´s enough text to go pass all
the widgets it´s okay.

Hope you understand what i´m after here

body {
	font: 62.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	color:#666;
	margin:0;
	background: #F7FBF7;
	
}

* {
	margin:0;
	padding:0;
}

h1 {
	font: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	font-size:2.5em;
	font-weight:normal;
	color:#333;
	margin:0 0 0 10px;
	padding: 7px 7px 10px 7px;
	border-bottom: 1px solid #000;
	width: 465px;
}

h1 a {
	text-decoration:none;
	color:#333;
}

#footer {
	background: url(images/footerbg.png) no-repeat;
	padding:0;
	margin:0;
	width: 783px;
	height: 75px;
	
	
}

#logo {background: url(images/blacklogo.png) no-repeat; 
	margin: 0 0 0 0;
	width: 245px;
	height: 151px;
	position: relative;
	float:left;
	top: 0;
	
}

.fright {

	color: #fff;
	float: right;
	margin: 25px 25px 0 0;
	padding:0;
	}



.fright a{
	color:#fff;
	text-decoration: none;
	}
	
.fright a:hover {
	color: #F7B032;
	text-decoration: none;
	}

	

.fleft {
	margin: 25px 0 0 25px;
	padding:0;
	color:#fff;
	float: left;
	}
	
.divider {border-bottom: 2px dotted #E0E0E0; width: 470px; height: 25px; margin-left: 15px;
padding:0;}


#header {
height: 214px;
margin:0;
padding:0;
background: url(images/headerbg.png) no-repeat ;
}

#header .description {
	float:right;
	margin:0 23px 0 0;
	padding:5px;
	color:#E7A511;
	font-size: 1.2em;
	font-style: italic;
}

#header h1 {
	margin:0 0 0 0;
	padding:0 0 0 0;
	}

#header h1 a {
	float: right;
	color: #fff;
	margin:30px 0 0 0;
	padding:25px;
	font-size: 1.4em;
	}

#wrapper {
	width:783px;
	margin:0 auto;
	
	}
	
#contentbg {
	width:783px;
	margin:0 auto;
	background: url(images/containerbg.png);
	
	}

/* =Main navigation with dropdown capabilities
-------------------------------------------------------------- */

#navi {
	background: #0B7DC5 url(images/navibg.png) repeat-x; 
	clear: both;
	display: block;
	margin: 0 0 0 20px;
	width: 743px;
	height: 50px;
	position: relative;
	top: 150px;
	
}
#navi ul {
	font-size: 13px;
	list-style: none;
	margin: 0px 0 0 5px;
	padding-left: 0;
}
#navi li {
	float: left;
	margin: 0 0 0 0;
	position: relative;
}
#navi a {
	color: #fff;
	font-weight:bold;
	font:Verdana;
	display: block;
	line-height: 3.333em;
	margin: 4px 0 0 0;
	padding: 0 1.2125em;
	text-decoration: none;
}

#navi ul ul {
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.65em;
	left: 0;
	width: 188px;
	z-index: 99999;
	
}
#navi ul ul ul {
	left: 100%;
	top: 0;
}
#navi ul ul a {
	background:#0F80C8 ;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #fff;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 7px 7px 7px 7px;
	width: 168px;
	margin:6px 0 0 0;
}
#navi li:hover > a,
#navi ul ul :hover > a{
	color: #fff;
	
}


#navi a:hover {
	color: #fff;
	
}

#navi ul li:hover > ul {
	display: block;
	margin:0;
	
	
}
#navi .current_page_item > a,
#navi .current_page_ancestor > a {
	font-weight: bold;
}

/* =Top navigation without dropdown capabilities
-------------------------------------------------------------- */

#topnav {
	background: url(images/topnavibg.png) no-repeat;
	width: 817px;
	padding:7px 0;
	margin:5px auto;
	height:50px;
}

#topnav li {
	float:left;
	list-style:none;
}

#topnav li a {
	color:#fff;
	padding:5px 5px 7px 7px;
	background:transparent;
	font:1.6em Trebuchet MS;
	margin:1px 2px 0 20px;
	font-weight:bold;
	text-decoration:none;
	display:block;
}
#topnav li a:hover {
	color:#eaa90e;
	text-decoration:none;
	
}

#topnav li a.active {
	background-color:#eee;
	color:#444;
	text-decoration:none;
}

/* Navigation ends
-------------------------------------------------------------- */

textarea#comment { width: 400px; padding: 5px; }

.commentmetadata { font-size: 10px; color:#fff; }

#respond {
margin: 0 0 0 25px;
}

/* =Search
-------------------------------------------------------------- */
#searchwrapper {
float:right;
width:200px; /*follow your image's size*/
height:20px;/*follow your image's size*/
padding:0px;
margin:4px 70px 0 0px;
position:relative; /*important*/


}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:7px;
width:183px;
height:18px;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:0px;
left:205px;
width:55px;
height:26px;
color:#fff;
font: bold 1.3em Trebuchet MS;
}

/* Search ends
-------------------------------------------------------------- */

.clear {
	clear:both;
}

.entry {
	margin: 0;
	padding:0 20px 0 20px;
	overflow:auto;
	}
	
.entry p {
	line-height:25px;
	margin:15px 0;
	word-spacing:2px;
	font-size:110%;
	}

.aligncenter, div.aligncenter
{
display: block; margin-left: auto; margin-right: auto;
}
.wp-caption
{
border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.wp-caption img
{
margin: 0; padding: 0; border: 0 none;
}
.wp-caption p.wp-caption-text
{
font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;
}
	
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 auto 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.meta {
margin: 10px 0 0 20px;
color:#007AC3;
}

#welcome {
width: 500px;
padding:0;
margin:0 0 10px 20px;
border: 1px solid #DEDBDE;
background: #F5F5F5;
height:150px;
}

#welcome h2 {
	color: #000;
	padding: 8px 10px 0 10px ;
	margin:0 ;
	font-size:2em;
	
	}

#welcome p{
	color: #000;
	padding: 8px 10px 0 10px ;
	line-height: 1.4em;
	font-size:1.2em;
	}

#content {
	margin:0 0 0 20px ;
	padding:0 0 0 0;
	width: 500px;
	background: #F5F5F5;
	border: 1px solid #DEDBDE;

	}

#content a {
	text-decoration:none;
	color:#007AC3;
	}

#content a:hover {
	color:#007AC3;
	text-decoration:underline;
}

#content h2 {
	font-family:"Times New Roman", Times, serif;
	font-size:2.8em;
	font-weight:normal;
	margin:0 0 0 15px;
	padding:7px;
	width:90.5%;
	color:#000;
	line-height: 30px;
	border-bottom: 1px solid #E0E0E0;
	
}

#content h2 a {
	color:#fff;
	text-decoration:none;
	margin:0;
	border:none;
	
}

#sidebar {
	width:230px;
	
	float:right;
	padding:0px 20px 30px 0;
	
	
}

#sidebar h2 {
	
	background: #007AC3 url(images/h2bg.png);
	height: 25px;
	letter-spacing:2px;
	font-size:1.5em;
	color:#333;
	position:relative;
	margin:  0 0 0;
	padding:5px 0 0 7px;
}

#sidebar ul {
	list-style:none;
	margin:0 0 20px 0;
	padding-left: 7px;
	background: #fff;
	position:relative;
}

#sidebar li {
	padding:4px 0 4px 0;
	font-size:1.4em;
	
}

#sidebar li a {
	color:#000;
	text-decoration:none;
}

#sidebar input {
	width:240px;
	padding:5px;
	background:red;
	color:#444;
	border:1px solid #f6f6f6;
	font:11px Verdana;
}

#sidebar input:focus {
	background:#fff;
	border:1px solid #eee;
}

#sidebar li a:hover {
	color:#007AC3;
}

p.news {
	padding:10px;
	background:#D7F0B2;
	margin:10px 0;
	color:#537B17;
	border-bottom:2px solid #BCE67D;
	border-top:2px solid #BCE67D;
}

blockquote {
	padding:5px 15px;
	background:#f6f6f6;
	margin:10px 0;
	border:1px solid #eee;
}

#content ul, ol {
	margin:10px 10px 10px 25px;
	border-top:1px solid #eee;
}
#content li {
	padding:10px;
	border-bottom:1px solid #eee;
}



#content h3 {
	margin:10px 0;
	font:160% Trebuchet MS;
	color:#666666;
}

a.more {
	display:block;
	text-align:right;
	color:#2F460D;
	text-decoration:none;
	margin:10px 0 0 0 ;
}
a.more:hover {
	text-decoration:underline;
}

Code (markup):

The problem area is this i think.

#contentbg {
width:783px;
margin:0 auto;
background: url(images/containerbg.png);

}

Hope you can help me with this one. It would be nice

Thanks in advance!

 

Change bottom padding of #sidebar to 0.

 

Thanks babushkyn but did not help..falsly i had forgotten the height: 700px in #containerbg removed it now. The problem still exists.

 

I see the problem now. Why don't you put #sidebar and #contentbg divs in another div, and set the background to it, also you'd probably need "overflow: hidden" on that div.

 

My advice is to hide overflow too.

text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;