CSS clear issue with my custom wordpress theme...

[khmedia]

Hello there, I have developed this piece of php/html code, for my custom Wordpress theme.

<?php get_header(); ?><div class="layout clearfix">	<div id="content">		<?php if (have_posts()) : ?>		<div id="loops-wrapper" class="left">			<?php while (have_posts()) : the_post(); ?>				<div id="article-<?php the_id(); ?>" class="article clearfix">					<div class="post-others-wrap">						<p class="categories"><?php the_category('<br />'); ?></p>						<div class="khmedia-social">							<p class='st_facebook_vcount' displayText='Facebook'></p>							<p class='st_twitter_vcount' displayText='Tweet'></p>							<p class='st_email_vcount' displayText='Email'></p>						</div>					</div>					<div class="post-date-wrap">						<p class="post-date">							<span class="day"><?php the_time('d'); ?></span>							<span class="month"><?php the_time('M'); ?></span>							<span class="year"><?php the_time('Y'); ?></span>						</p>					</div>					<div id="article-title-<?php the_id(); ?>" class="post-title">						<h1>							<?php echo the_title(); ?>						</h1>						<div id="article-excerpt-<?php the_id(); ?>" class="post-content">							<?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?>							<?php the_content(); ?>							<?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?>						</div>					</div>				</div>			<?php endwhile; ?>			<div id="pagelinks" class="clearfix">				<?php previous_post_link('<div class="prevlink">%link</div>'); ?>				<?php next_post_link('<div class="nextlink">%link</div>'); ?>			</div>		</div>		<?php endif; ?>	</div>	<div class="sidebar">		<?php			if ( is_active_sidebar( 'primary' ) ) :				dynamic_sidebar( 'primary' );			endif;		?>	</div></div><?php get_footer(); ?>

And now here is the CSS for it:

.layout {	display: block;	margin-top: 3em;	width: 100%;} #content {	line-height: 1.5em;	width: 697px;	float: left;	padding-right: 30px;	position: relative;	min-height: 300px;} .clearfix {	clear: both;	content: " ";	display: block;	line-height: 0;	visibility: inherit;} #loops-wrapper {	display: block;} #loops-wrapper .article {	padding-left: 122px;	width: 600px;	margin-bottom: 50px;	min-height: 150px;	display: block;	position: relative;} #loops-wrapper .article .post-others-wrap {	left: 0;	display: block;	position: absolute;	width: 100px;	margin: 55px 0 0;	text-align: right;	line-height: 1.5em;} #loops-wrapper .article .post-others-wrap .khmedia-social {	display: block;	border-top: 2px solid #8AE234;	border-bottom: 2px solid #8ae234;	padding: 0 0 5px;	margin-top: 20px;} #loops-wrapper .article .post-others-wrap .categories {	color: black;	position: relative;}

Actually, the main content area is expanding with large data. But, when I insert a simple post with only the title. The div is overlapping with the footer.Here is my site link: http://www.khmedia.in Please help guys...

Edited June 22, 2012 by khmedia

[Ingolme]

The "position: absolute" property completely messes up layouts and causes overlapping, you probably need to rethink your code.

[khmedia]

The "position: absolute" property completely messes up layouts and causes overlapping, you probably need to rethink your code.

Thanks for your reply foxy. Please help me, I am really not good in CSS, just started to program and I know that there's a clear issue and with the positions. But, I really don't know where to start. Please help me.

[Ingolme]

This is a good tutorial on how to make a proper layout, I'm not sure if it's a bit outdated since I haven't read through the whole thing in a while:http://www.subcide.com/articles/creating-a-css-layout-from-scratch/ You must read through and understand every page if you want to make your layout properly because there are a lot of important details to have in mind.

[khmedia]

Thanks foxy, I will first read the link.

[khmedia]

Thanks Ingolme, Your link helped me a lot and I got my problem resolved. Thanks a lot.