Jump to content

CSS clear issue with my custom wordpress theme...


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 post
Share on other sites

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...