Jump to content

CSS clear issue with my custom wordpress theme...


khmedia
 Share

Recommended Posts

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...

post-97398-0-92160400-1340368297_thumb.png

Edited by khmedia
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...