11 replies [Last post]
bgbs
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

I have exhasuted my day.
I need help to make the container auto height. When I try, it just breaks apart giving me no height at all. Your help is highly appreciated

This is how it looks like,

and this is how I want it to look like.

I'm working with a wordpress theme.

Here is the page.php file I'm having trouble with. I have this problem with all other pages as well.

<?php get_header(); 
?>
 
<?php get_sidebar(); ?>
<!-- show this part if this is a blog page -->
<div id="featured-header"></div><div id="page-body"><div id="wide-column">
				<?php while(have_posts()): the_post(); ?>
				<h2><?php the_title();?></h2>
				<img class="shade" src="<?php bloginfo('template_directory') ?>/images/heading-shade.png" alt="" />
				<div id="posts" class="blog post-<?php the_ID(); ?>">
					<div class="each-post postcontent">
 
			        	<div class="the-post">
							<?php the_content(''); ?>
							<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
							<?php edit_post_link('Edit', '<p class="edit">', '</p>'); ?>
						</div><!--end of .the-post -->
					</div><!-- end of each post -->
				</div><!-- end of #posts -->
				<?php endwhile; ?>
</div><!-- end of #wide-column --></div><!-- end of #page-body -->
<div id="featured-bottom"></div>
 
<?php get_footer(); ?>

CSS

	body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial;
	font-size: 82.5%;
	background-color: #000000;
	background-image: url(images/backgrounds/bg-office.jpg);
	background-repeat: repeat-x;
	padding-bottom: 30px;
}
	body, html {height:100%}
	a {	cursor: pointer;}
 
 
	#index-body {
	color:#fffƒ;
	background-repeat: repeat-y;
	background-image: url(images/content_back.png);
	height: 175px;
	display: block;
	width: 960px;
	clear: none;
	float: none;
	 }
	 #page-body {
	color:#fff;
	background-repeat: repeat-y;
	background-image: url(images/page-bg.png);
	height: 600px;
	display: block;
	width: 960px;
	clear: none;
	float: none;
	 }
 
 
/** common classes **/
	.clearfix {	width: 100%; height: 0px; clear: both; display: block;}/* clearfix for floated elements */
	.hidden {display: none;}
 
	.right {float: right;}
	.left {float: left;}
 
	.morespace {padding: 3px 0 !important;}
	.full-width {width: 93.5% !important;}
 
 
	a.bt, a.bt span, a.more-link, a.more-link span {display: inline-block; height:22px; border:none !important;}
	a.bt, a.more-link {padding-left: 15px; background: url(images/bt-casual-left.png) no-repeat; color:#333 !important; margin-top: 5px; text-decoration: none; }
	a.bt:hover {color: #666 !important;}
 
	a.bt span, a.more-link span { background: url(images/bt-casual-right.png) no-repeat right; padding-right: 15px; line-height:20px}
 
	a.arrowedbt {background: url(images/bt-casual-left-arrowed.png) no-repeat; padding-left: 26px; font-size:1em !important; margin-top: 0px !important; }
	a.arrowedbt:hover  {background: url(images/bt-casual-left-arrowed-hover.png) no-repeat;}
	a.left-button {background-image: url(images/bt-casual-left-arrowed-left.png) !important}
	a.left-button:hover {background-image: url(images/bt-casual-left-arrowed-left-hover.png) !important}
 
	div.leftbutton, div.rightbutton {margin:0px 0px 20px 0px!important; }	
	div.leftbutton a, div.leftbutton a span, div.rightbutton a, div.rightbutton a span {display: inline-block; height:22px}
	div.leftbutton a span, div.rightbutton a span {display: inline-block; height:22px;  background: url(images/bt-casual-right.png) no-repeat right; 
	padding-right: 15px; line-height:20px}
	div.leftbutton a, div.rightbutton a {padding-left: 26px; color:#333 !important; margin-top: 5px; text-decoration: none; }
	div.leftbutton a {background: url(images/bt-casual-left-arrowed-left.png) no-repeat;}
	div.rightbutton a {background: url(images/bt-casual-left-arrowed.png) no-repeat;}
	div.leftbutton a:hover, div.rightbutton a:hover {color: #666 !important;}
 
 
 
 
/*** 01.a - Headings **/
 
	/** logo **/
	#header h1 {
	float: left;
	margin-right: 60px;
	padding-left: 20px;
	margin-top: 20px;
}
	#header h1 a {width: 163px; height: 46px; display:block; text-indent:-9999px}
 
	/** home featured section headings **/
	#featured-info h3 {	font-size: 2em;	margin-bottom: 25px;}
	#featured-info h3 a { color: #fff; text-decoration: none;}
	#featured-info h3 a:hover:after {content: " →";}
 
	/** #content general headings **/
	#content h3 {font-size: 1.75em; font-family: "Lucida Grande", Verdana, Helvetica, Arial; }
	#content h4 {font-size: 1.35em;}
	#content h5 {font-size: 1.15em;}
 
	div.postcontent h4 {font-size:1.25em !important;}
 
	/** sidebar headings **/
	#sidebar-home h3, h3#blog-title {	border-bottom: 1px solid #999; margin-bottom:1px; padding-bottom:5px}
	#sidebar-home h3 { color: #333;}
	#sidebar h3 {font-size: 1.3em; border-bottom: 1px solid #999; margin-bottom:1px; padding-bottom:5px; color: #333;}
	div.home ul li h3 {
	font-size: 1.3em !important;
}
 
	/** flickr heading **/
	li.flickr h3 {background: url(images/icon-flickr.png) no-repeat 2px 0; padding-left: 38px;}
 
	/** post listing general headings **/
	#posts h4 {margin-bottom: 8px;}
	#posts h4 a {color:#333; text-decoration: none; text-transform: uppercase;}
	#posts h4 a:hover {text-decoration: underline;}
 
	.portfolio h4 {font-size: 1.3em !important; line-height:1.4em;}
 
	/** twitter heading **/
	li#portfolious-twitter h3 {padding-left: 28px; background: url(images/icon-twitter.png) no-repeat ;}
 
	/** right side wide column headings **/	
	#wide-column h2 {font-size:1.7em; border-bottom: 1px solid #999; margin-bottom:1px; padding-bottom:5px;}
 
	div.the-post h2, div.the-post h3, div.the-post h4, div.the-post h5 {margin-bottom:15px; padding-top:5px; color:#111 !important;}
	div.the-post h3 {font-size: 1.3em !important;}
	div.the-post h4 {font-size: 1.15em !important;}
	div.the-post h5 {font-size: 1em !important;}
 
	div#info h3 { border-bottom: 1px solid #aaa; font-size: 1.3em;  padding-bottom: 2px; padding-top: 10px; color: #333; }
 
	#comments h3, h3#respond-title {font-size:1.4em ; color: #333;}	
 
 
/** Container Settings **/
	#container-wrap {width: 100%; height:100%; margin: 0 auto -65px; position:relative; min-height: 100%; height: auto !important; height: 100%;}
	#container {width: 960px;  padding: 20px 5px; margin: 0 auto; }
 
	.push {height:61px;}
 
 
/*** 02. Header ***/
 
	/** main and footer navigation **/
	#header ul, ul#nav-footer {min-width: 400px; max-width: 475px; float:left; padding-top:10px}
	#header ul li, ul#nav-footer li {	float:left; margin-right:10px;}
	#header ul li a, ul#nav-footer li a {display:block; color: #ccc; text-decoration: none; text-transform: uppercase;	padding: 6px 10px; 
	 -moz-border-radius: 10px; -webkit-border-radius: 10px;}
	#header ul li a:hover, #header ul li.current-cat a,	#header ul li.current_page_item a {color: #fff; background: #111; }
	#header ul li.current_page_item ul li a {color: #666 !important; background: none !important;}
 
 
 
	#header ul li {position: relative; }
	#header ul li ul {position: absolute; margin-top: 0px; background: #fff; -moz-border-radius: 10px;-webkit-border-radius: 10px; -khtml-border-radius: 10px; 
	min-width: 150px; max-width:200px !important; padding: 5px; display:none; z-index:10; }
	#header ul li ul li {margin: 0; float: none;}
	#header ul li ul li a {color: #666 !important; text-transform: none; font-size: 0.9em;}
	#header ul li ul li a, #header ul li ul li a:hover {background-image: none; padding: 5px !important; }
	#header ul li ul li a:hover, #header ul li ul.children li.current-cat a:hover {
	-moz-border-radius: 5px !important;-webkit-border-radius: 5px !important; -khtml-border-radius: 5px !important; background: #333 !important; color: #fff !important; }
	ul.children li a {background:none !important;}
 
 
	ul#nav-footer li {	margin-right: 5px;}
	ul#nav-footer li a {color: #666; -moz-border-radius: 10px;-webkit-border-radius: 10px; -khtml-border-radius: 10px; background-image:none;
	font-size:0.9em}
	ul#nav-footer li a span {background-image: none !important; line-height:25px}
	ul#nav-footer li a:hover, ul#nav-footer li.selected a {	background: #666; color: #fff;}
 
 
	/** search **/	
	#header fieldset {
	float: right;
	width:500px;
	padding-top: 10px;
}
	#header fieldset legend {display: none;}
	#header fieldset label {background: url(images/bg-search.png); padding-left: 38px; height: 27px; display:block}
	#header fieldset label input {border: none; background: none; padding-top:6px; color:#666; line-height:17px /** <- be careful **/}
 
/*** 03. Home Featured Section ***/
	#featured {
	padding-top: 0px;
	color:#fff;
	background-repeat: repeat-y;
	background-image: url(images/content_back.png);
}
	#featured-header {
	background-image: url(images/content-header.png);
	height: 15px;
	background-repeat: no-repeat;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-position: bottom;	
	 }
	 #featured-bottom {
	background-image: url(images/content-bottom.png);
	height: 15px;
	background-repeat: no-repeat;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	background-position: top;
	display: block;
	 }
	#featured-info, #home-featured-nav {float: left;}
	#featured-images {float: right;}
 
	#featured-info {
	width: 880px;
	margin-top: 0px;
	padding-left: 30px;
	padding-right: 30px;
	margin-left: 10px;
	background-image: url(images/main-content.jpg);
	background-repeat: no-repeat;
	height: 489px;
	padding-bottom: 20px;
}
	#featured-info ul li {height:200px;}
	#featured-info p {	margin: 10px 0; color:#ddd}
	#featured-info p strong {color:#fff;}
 
	a.home-read-more-button {
	background: url(images/bt-home-readmore.png) no-repeat;
	width:103px;
	height: 42px;
	margin-top: 25px;
	display:block;
	text-indent: -9999px;
	margin-left: 30px;
}
 
	/** featured images**/
	#featured-images {
	width: 440px;
	height: 416px;
	background:url(images/computer.png) no-repeat top center;
	margin-right:-10px;
	position:relative;
	z-index:2;
	padding-right: 20px;
}
 
#hire-me {
width: 240px;
float: left
 }
#recent-work {
	display:inline;
	float:left;
	margin:25px 0 15px;
	padding:0;
	width:640px;
}
 
 
 
	#images {margin: 42px 0 0 50px;}
	#images ul li {width: 354px; height: 214px; overflow:hidden;}
	span.glare {	background: url(images/computer-glare.png) no-repeat; display:block; position: absolute; right: 25px; top: 30px;
	width: 219px; height: 239px; z-index: 9; }
 
	/** featured slider navigation **/
	ul#home-featured-nav {
	background: url(images/bg-homeslider.png) no-repeat;
	width: 33px;
	height: 48px;
	margin-left: 25px;
	margin-top: 127px;
	padding-top: 12px;
}
	ul#home-featured-nav li {	margin-bottom: 5px;}
	ul#home-featured-nav a {	width: 16px; height: 18px; display: block; text-indent: -9999px; margin: auto;
	filter:alpha(opacity=60); -moz-opacity:0.6;	-khtml-opacity: 0.6; opacity: 0.6;}
	ul#home-featured-nav a:hover {filter:alpha(opacity=100); -moz-opacity:1;	-khtml-opacity: 1; opacity: 1;}
	ul#home-featured-nav li.next a {	background: url(images/homeslider-arrow-down.png) no-repeat; margin-left: 10px;}
	ul#home-featured-nav li.prev a {	background: url(images/homeslider-arrow-up.png) no-repeat;}
 
 
/*** 04. Content ***/
	#content {font-size: 0.95em;}
		#content p {margin: 15px 0; color: #555;}
 
/** 04.a - Home Sidebar and Sidebar General **/
	#sidebar-home {
	width: 415px;
	float: left;
	padding-left: 30px;
}
		#sidebar-home img.shade, #home-blogposts img.shade, #sidebar img.shade {display: block; height: 20px;}
		#sidebar-home img.shade{width: 435px;}
		#sidebar-home p strong {color: #333;}
 
		#sidebar-home ul li p:first-child {margin-top: 0px;}
		#sidebar-home ul li, #sidebar ul li { border-bottom: 1px solid #ccc; margin-bottom: 35px; padding-bottom: 3px; }
		#sidebar-home ul li ul li, #sidebar ul li ul li {	border-bottom: none; margin-bottom:0px;}
 
	/** flickr **/
	li.flickr {	position: relative;}
	li.flickr ul li img { border: 1px solid #999; margin: 0 10px 0px 0;  }
	a.bt-flickr {width: 38px; height: 85px; position: absolute; right:10px; top:50px; background: url(images/bt-flickr.png) no-repeat;}
	a.bt-flickr span { display: none;}
 
	li.sideflickr ul li img {margin-right: 0px;}
	div.flickr_badge_image {border: 1px solid #999; margin: 0 9px 10px 0; width:75px; height:75px; float:left;}
 
/** 04.b - Home Blog Posts **/
	#home-blogposts {
	width: 455px;
	float: right;
	border-bottom:1px solid #ccc;
	position: relative;
	padding-bottom: 15px;
	padding-right: 20px;
}
	#home-blogposts img.shade {width: 475px;}
 
	#home-blogposts ul li.no-slide-list {margin-bottom:25px; border-bottom:1px solid #ccc;}
	#home-blogposts #posts {padding-top:0 !important;}
 
	span.date {	color: #999; padding-left: 22px; display: block; background: url(images/icon-date.png) no-repeat; font-size: 0.9em;
	line-height:18px; margin-bottom: 10px; }
 
	img.post-thumb { border: 1px solid #666;float: left; margin: 0 12px 12px 0;}
	.portfolio_crop {height:155px; overflow:hidden; border: 1px solid #666;float: left; margin: 0 12px 12px 0; margin: 0 20px 20px 0;}
	.portfolio 	img.post-thumb { margin: 0 20px 10px 0;}
 
 
	/** homepage blog posts, testimonials and twitter slider navigation **/
	ul#home-blogposts-nav, ul.testimonials-nav, ul.twitter-nav 
	{width: 43px !important; height: 20px !important; padding: 4px 0 0 5px !important; background: #dfdfdf !important; -moz-border-radius: 10px;
	-webkit-border-radius: 10px; -khtml-border-radius: 10px; position: absolute; right: 0; bottom: -12px; }
 
	ul#home-blogposts-nav li, ul.testimonials-nav li, ul.twitter-nav li {float: left !important;}
 
	ul#home-blogposts-nav a, ul.testimonials-nav a, ul.twitter-nav a
	{display: block !important; width: 16px !important; height: 16px !important; margin-right: 5px !important; filter:alpha(opacity=60); -moz-opacity:0.6;	-khtml-opacity: 0.6; opacity: 0.6; padding:0px !important;}
 
	ul#home-blogposts-nav a:hover, ul.testimonials-nav a:hover, ul.twitter-nav a:hover
	{filter:alpha(opacity=100); -moz-opacity:1;	-khtml-opacity: 1; opacity: 1;}
 
 
	ul#home-blogposts-nav a span, ul.testimonials-nav a span, ul.twitter-nav a span {display: none;}
	ul#home-blogposts-nav li.prev a, ul.twitter-nav li.prev a {background: url(images/arrow-low-prev.gif) no-repeat !important;}
	ul#home-blogposts-nav li.next a, ul.twitter-nav li.next a {background: url(images/arrow-low-next.gif) no-repeat !important;}
 
	ul.testimonials-nav li.next a {background: url(images/arrow-low-down.gif) no-repeat;}
	ul.testimonials-nav li.prev a {background: url(images/arrow-low-up.gif) no-repeat;}
 
 
/*** 05. Footer ***/
	#footer-wrap {background: url(images/bg-footer.gif) #d9dada repeat-x; padding-bottom: 10px; position: relative; }
	#footer {width: 960px; padding: 10px; margin: 0 auto;}
 
	a#monofactor {display: block; width:180px; float: right; color:#999; text-decoration: none; line-height:22px; font-size:0.9em; padding-top: 12px; }
	a#monofactor span {display: inline-block; background: url(images/logo-monofactor.png) no-repeat; width: 104px; height: 22px; text-indent:-9999px}
 
/*** 06. General Sidebar ***/
	#sidebar {
	width: 235px;
	float: right;
	padding-top: 6px;
	margin-top: 30px;
	margin-right: 30px;
}
	#sidebar img.shade{width: 250px; height: 20px !important; }
	#sidebar p:first-child {margin-top: 0px;}
 
	#sidebar ul li {padding-bottom: 8px;}
	#sidebar ul li ul {font-size:0.95em;}
	#sidebar ul li a {color: #333; text-decoration: none;}
	#sidebar ul li a:hover {color: #666}
 
	/** sidebar categories **/
	ul.cats li {width: 120px ; margin-right: 10px; margin-bottom:10px; float:left;}
	ul.cats li a {display:block; padding:5px; padding-left:18px; background:url(images/arrow-mini.png) no-repeat 10px 8px; 
	-moz-border-radius: 10px;-webkit-border-radius: 10px; -khtml-border-radius: 10px; border:1px solid #d1d1d1;}
 
	/** sidebar alternate link lists **/
	li.alternate-lists ul li {padding: 0 !important;}
	li.alternate-lists ul li a {display: block; background: url(images/dot.gif) no-repeat 5px 11px; padding: 5px; padding-left: 15px; }
	li.alternate-lists ul li a:hover {background-image:url(images/dot-hover.gif); background-color: #f1f1f1; }
 
 
 
	/** testimonials and twitter widget **/
	li.testimonials, li#portfolious-twitter {position: relative; font-size: 0.9em; padding-bottom: 10px !important; }	
	li.testimonials  blockquote p, 	li#portfolious-twitter p {color: #777 !important;}
	li.testimonials  blockquote  {font-style: italic;  background: url(images/quote.png) no-repeat; padding: 0px 10px 0 20px; }
 
 
	ul.testimonials-nav li {padding: 0px !important; background: none !important;}
 
 
	li#portfolious-twitter p {margin: 5px 0 !important;}
	li#portfolious-twitter p.timeago {color: #333 !important;}
 
 
/*** 07. Post General Settings **/
 
	/** wide column **/
	#wide-column {
	width: 625px;
	float: left;
	display: block;
	margin-left: 30px;
	margin-top: 7px;
}
 
	div.full-width p {margin-top: 15px !important;}
	#info a {text-decoration: none; border-bottom: 1px solid #999; }
	#info a:hover {color:#666; text-decoration: none;}
	#info h4 { text-transform: uppercase;}
 
	#posts {
	padding-top:0px;
	display: block;
}
	/** 07.a posts general settings **/
	.each-post {border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 30px;}
	.each-post {
	color: #444;
}
	.each-post p {margin-top: 0px !important;line-height:1.4em; }
	.each-post a.bt {margin-top:10px !important;}
 
	div.blog span.date {float: left !important;}
	div.blog p:first-child {margin-top: 0px !important;}
 
	a.comment-count, a.comment-add {display:inline-block; font-size:0.9em; color:#666; padding-left:20px; background: url(images/icon-comments.png) no-repeat; line-height: 16px; margin-left: 15px; text-decoration:none; }
	a.comment-count:hover, a.comment-add:hover { color: #333;}
	a.comment-add {background-image:  url(images/icon-comment-add.png) !important;}
 
	div.the-post ul { padding: 5px 10px 20px 25px; }
	#info ul {padding: 5px 10px 10px 15px;}
	div.the-post ul li, #info ul li {line-height: 1.5em; color: #666; list-style-type: disc; list-style-position: inside; }
	div.the-post ul li strong, #info ul li strong {color: #333;}
 
	div.the-post blockquote {font-style: italic;  background: url(images/quote.png) no-repeat; padding: 10px 10px 10px 20px; padding-bottom: 15px; color: #777; }
 
	/** 07.b post meta **/
	.postmeta {	clear: both; 	line-height:3em;		font-size: 0.9em;	color: #999; 	background: #f7f7f7;	margin-top: 10px;}
	.postmeta a:hover {	text-decoration: none;}
	.postmeta div {	float: left;	}
	.author {display: block; color: #666; float: left; padding: 0 15px 0 30px;	background: url(images/icon-author.gif) no-repeat 10px 8px;	}
	.categories, .tags {padding: 0 15px;}
	.categories {background: #f1f1f1;}
 
	.tags a {color: #927b57;} 
 
	#info {float: right; width: 265px;}
 
 
	/** 07.c comments **/
 
	#comments_wrap h3 {	font-size: 22px;	font-weight: normal;	margin: 0px;	padding-bottom: 20px;	margin-top: 10px;}
	#comments_wrap h3 a, #comments_wrap h3 a:hover {color: #242323;	text-decoration: none;}
	#comments_wrap .get_avatar {color: #a7a7a7; font-size: 10px;letter-spacing: -1px;padding-top: 10px;}
	#comments ol.parent {padding-bottom: 25px}
	#comments ol { margin: 0px;	padding: 0px; padding-left: 100px;}
	#comments ol li {list-style: none;	padding: 0px; margin: 10px 0px;	padding-top: 1px;}
	#comments span.comment-reply {	font-size: 10px;	text-transform: uppercase;}
	#comments .comment_wrap {position: relative; background: #f2f2f2;}
	#comments .single_comment {	padding: 10px;}
 
	#comments .comment-content {	padding: 10px;		background: #fafafa;	}
 
	#comments .comment-content p, .children .comment-content p {padding-bottom: 15px;		color: #666;}
 
	#comments a, div#respond ol li a {color:#333; text-decoration:none}
	#comments a:hover, div#respond ol li a:hover  {border-bottom:1px solid #ccc; text-decoration:none}
 
 
	#comments .comment_arrow {	position: absolute;	top: 20px;	left: -11px;}
	#comments .comment_author {	position: absolute;	left: -100px;	width: 100px;	color: #8d8d8d;	font-size: 10px; line-height: 14px;	}
	#comments .comment_author span {display: block;}
	#comments .comment_author a {border-bottom:none;}
	#comments .comment_author p {margin:5px 0 2px 0;}
	#comments .children {	padding-left: 0px;	border-left: 1px solid #ced0d0;}
	#comments .children li {padding-left: 25px;	background: url(images/comment_li_bg.gif) no-repeat 0px 25px;}
	#comments .children .comment_wrap {	background: #f2f2f2;	border-top: 1px solid #dedede;	border-bottom: 1px solid #dedede;}
	#comments .children .comment_arrow {	display: none;}
	#comments .children .comment_author {	position: absolute;	left: auto;	right: 20px;	bottom: 10px;	width: 200px;	height: 40px;}
	#comments .children .comment_author p {	position: absolute;	right: 40px;	bottom: 10px;	text-align: right;}
	#comments .children .comment_author span {	display: block;}
	#comments .children .comment_author img {	width: 32px;	height: 32px;	float: right;}
 
	/** 07.d comment form **/
	div#respond {padding: 20px 0;}
	div#respond ol li {padding:8px; -moz-border-radius: 5px;-webkit-border-radius: 5px; -khtml-border-radius: 5px; background: #d9d6cc; margin-bottom: 10px;
	clear: both; }
	div#respond ol li:hover, 	#respond ol li:focus  {background: #fff !important; }
 
	div#respond ol li label {float: left; padding-left: 15px; color: #666; border-left: 1px solid #ccc; }
	div#respond ol li label.field-title { width:30%; border-left:none !important; padding-left: 0px; }
 
	div#respond ol li label small {font-size: 0.8em; color: 999;}
 
	div#respond ol li.text input {border: none !important; background: none !important; width:420px; line-height: 1.3em; }
	div#respond ol li textarea {border: none !important; background: none !important; width:420px; line-height: 1.6em; }
	div#respond ol li br {display: none;}
	div.contactform ol li.text input, div.contactform ol li textarea {width:350px !important;}
	div.contactform ol li.text input {padding: 5px;}
	div.contactform ol li label.field-title {
	line-height: 1.6em;
}
 
	#work-list {margin-bottom: 15px;}
	#work-list ul {display: none;  height: 80px; }
	#work-list ul li {float:left; margin-right:10px}
	#work-list ul li a {display: block; padding: 2px 0 0 2px; background: url(images/bg-avatar.png) no-repeat; width: 68px; height: 68px;
	overflow:hidden;}
 
 
 
 
	a#bt-expander {width: 300px; height: 15px; background: url(images/bt-expander.png) no-repeat; display: block; padding-left: 80px; color: #999; font-size: 0.8em; padding-top: 3px; }
	a.expanded,  a#bt-expander:hover { background-position: 0px -18px !important; color: #777; }
 
 
	/** widget styles **/
	#sidebar ul li.widget ul { padding-top:15px !important; background:url(images/heading-shade.png) no-repeat;}
	li.widget_recent_entries ul li ul {background:none; padding-top:0px !important; padding-left:15px;}
	li.widget_recent_entries ul li {padding-bottom: 3px !important;}
	li.widget_recent_entries ul li a {display: block; background: url(images/dot.gif) no-repeat 5px 11px; padding: 5px; padding-left: 17px; }
	li.widget_recent_entries ul li a:hover  {background-image:url(images/dot-hover.gif); background-color: #f1f1f1; }
 
 
	ul#twitter_update_list li {padding: 0 !important; height: 90px !important; margin-top: -15px;}
	ul#twitter_update_list li span {display: block; margin: 5px 0; color: #666 !important;}
	ul#twitter_update_list li a {background: none !important; padding: 0px !important; display: inline !important;}
 
 
	/** a few more overrides **/
	#respond-title a, a#cancel-comment-reply-link {color: #666; text-decoration: none;}
	a#cancel-comment-reply-link {display: block; padding-bottom:10px; color: #333;}

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 41 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Provide a link

You've probably forgotten this but showing code that contains server side scripting leaves people guessing: it's best to provide a link to a live page - the server side work will have been done then and we'll be able to see the resulting HTML.

In the meantime, if I have to guess, it is likely to be something to do with the floating of various elements on your page and making sure that they are enclosed by their parent container (at least where you want this to happen).

A standards compliant browser will not by default enclose its floated children elements. IE, surprise, is different in its behaviour. Do some research on this. One useful place to start is Gary Turner who covers this topic here http://gtwebdev.com/workshop/floats/.

Hope that helps you progress. Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

css-helper wrote:Do some

css-helper wrote:

Do some research on this. One useful place to start is Gary Turner who covers this topic here http://gtwebdev.com/workshop/floats/.

Add overflow:hidden to #page-body

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

bgbs
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

I added hidden but now it does something else

I added hidden but now it does something else

Please view my live site at bibikova.com and click on about us page you will see what it did.

Thanks for your help

bgbs
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

css-helper wrote:You've

css-helper wrote:

You've probably forgotten this but showing code that contains server side scripting leaves people guessing: it's best to provide a link to a live page - the server side work will have been done then and we'll be able to see the resulting HTML.

In the meantime, if I have to guess, it is likely to be something to do with the floating of various elements on your page and making sure that they are enclosed by their parent container (at least where you want this to happen).

A standards compliant browser will not by default enclose its floated children elements. IE, surprise, is different in its behaviour. Do some research on this. One useful place to start is Gary Turner who covers this topic here http://gtwebdev.com/workshop/floats/.

Hope that helps you progress. Regards

Ok, my site is bibikova.com
Look at the subpages and you will see the problem. I addded hidden overflow and now it does something else.
Thanks

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You need to validate. You

You need to validate.
You have some pretty glaring errors.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbibikova.com%2Fabout%2F

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

bgbs
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

I fixed some validation

I fixed some validation errors, but when I fixed all validation errors it messed up my template completely, so I had to remove the valid elements so that the template looked alright.

The sidebar for some reason doesnt want to be contained within the body, it flows on its own.
I dont know what to do to get it in there unless I remove hidden overflow and and define height in pixels or set it at 100%

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 44 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

If the site is appearing

If the site is appearing incorrectly with valid code you're in a whole lot more trouble than you initially thought. No one here will even begin to help you make invalid code render the site as you want.

Validate fully then show us what's wrong and we can take it from the start.

If your house was sinking to one side would you fix the foundation or sink the other side to match?

bgbs
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

I fixed all my validation

I fixed all my validation issues.
Can I please get some help now.

I dont know what I'm doing wrong with all this css, but I need all the elements to be contained in the box. If I apply the hidden overflow, then the sidebar becomes disobedient but the wide-column gets contained, and my guess it is because sidebar is included in the page where as wide-column is not, so maybe something needs to be done to sidebar.

Thanks ahead of time.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If you want the sidebar to

If you want the sidebar to be in the white content area, why not move your html around so that the #sidebar is in the #index-body?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

bgbs
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

Unbelievable, such a simple

Unbelievable, such a simple fix, how could I not see it. Now I feel stupid

Thanks for your help man.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

That's why a second set of

That's why a second set of eyes is always helpful :thumbsup:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph