Noob Question About Wordpress CSS Problem

[pije76]

I apologize if I'm not posting to the forum correctly and my english is bad cause I'm from Indonesia.
And again, I'm sorry if I put image with url cause I can't explain in english what my css problem.

Here's my screenshot about my problem:


From image above, I want to show footer area into below the wordpress's widget.
What element/property to do that?

thanks

[Paul O'B]

Hi Welcome to Sitepoint

We'd need to see you code to determine how to fix it. Do you have a link to the site which is the easiest way for us to work on otherwise you will need to post html and css which could be a lot for a wordpress page?

If the question is about wordpress widgets then the wordpress forum may be more appropriate but if its and html/css issue then we can deal with that here.

At first glance I would say that you need to add clear:both to the footer and make sure that you haven't used absolute positioning on it. But that's just a wild guess.

[pije76]

thanks Paul for quick reply, the problem is on the homepages & archive pages.
On the homepage the problems is not happen because there's 5 articles but if go to category pages they will produce that problems. Here's the example URL : http://panjianom.net/category/make-money-online.html

And here's the wordpress code for archive.php:

<?php get_header(); ?>
<?php is_tag(); ?>

    <div id="primary" class="single-post">
    <div class="inside">
        <div class="primary">

            <?php if (have_posts()) : ?>
            <?php $ctr = 1; ?>
            <?php $cd = ""; ?>

            <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
            <?php /* If this is a category archive */ if (is_category()) { ?>
            <h1>Archive for the '<?php single_cat_title(); ?>' Category</h1>

            <?php /* If this is a tag archive */ } elseif (is_tag()) { ?>
            <h1>Archive for the '<?php single_tag_title(); ?>' Tag</h1>
            
            <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
            <h1>Archive for <?php the_time('F jS, Y'); ?></h1>
            
         <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
            <h1>Archive for <?php the_time('F, Y'); ?></h1>
    
            <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
            <h1>Archive for <?php the_time('Y'); ?></h1>
            
            <?php /* If this is a search */ } elseif (is_search()) { ?>
            <h1>Search Results</h1>
            
            <?php /* If this is an author archive */ } elseif (is_author()) { ?>
            <h1>Author Archive</h1>
    
            <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
            <h1>Blog Archives</h1>
    
            <?php } ?>

         <ul class="dates">
             <?php while (have_posts()) : the_post(); ?>
            <li>
                <span class="date"><?php $curd = the_time('F jS, Y'); if ($curd != $cd) { if ($cd != "") { ?></span>
                <?php } $cd = $curd; ?>
                <?php echo $cd; ?>
                <?php } ?>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a> 
                 posted in 
                <?php the_category(', ') ?>
                <?php if (is_callable('the_tags')) the_tags('tagged as ', ', '); ?>
                <?php $ctr++; ?>
            </li>
        
            <?php endwhile; ?>
        </ul>
        
        <div class="navigation">
            <div class="left"><?php next_posts_link('&laquo; Previous Entries') ?></div>
            <div class="right"><?php previous_posts_link('Next Entries &raquo;') ?></div>
        </div>

    
    <?php else : ?>

        <h1>Not Found</h1>

    <?php endif; ?>
        
    </div>

<!-- [BEGIN] .kedua -->
<div class="kedua">
<h2>About the archives</h2>
    <!-- [BEGIN] .featured -->
    <div class="featured">
    <p>Welcome to the archives here at <?php bloginfo('name'); ?>. Have a look around.</p>
    <br />            
        <h2><?php     /* Widgetized sidebar, if you have the plugin installed. */
        if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?></h2>
        <?php endif; ?>
    <!-- [END] .featured -->
    </div>
<!-- [END] .kedua -->
</div>
<div class="clear"></div>
</div>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

/* Home Pages Styles */
#primary .pertama{
  float:left;
  width:65%;
}
 
#primary .kedua{
  float:center;
  width:30%;
  margin-left:5%;
  padding-top:0.65em;
  display:inline;
  position:absolute;
}
 
* html #primary .kedua{ margin-right:4%; }
 
.kedua .featured p{
  border-bottom:1px solid #333333;
  border-top: 1px solid #333333;
  padding:0.5em 0 0.6em 0;
  line-height:1.5em;
  margin:1em 0 0 0;
  position:absolute;
  display:absolute;
}
.kedua .featured dl{
  margin:0 0;
  border-bottom:1px solid #333333;
  padding:0.5em 0 0.6em 0;
}
.kedua .featured h2{
  list-style-type:none;
  margin-left: 8px;
}
.kedua .featured li{
  list-style-type:none;
}
 
.kedua dt{
  display:inline;
  margin:0;
  padding:0;
  color:#AAA;
}
.kedua dd{
  display:inline;
  margin:0;
  padding:0;
}
.kedua dd a{ color:#808080; }
.kedua dd a:hover{ color:#FFF; }

[Paul O'B]

Hi,

You have placed the right column absolutely into position which means it is removed from the floaw and the rest of the page will think that it there is noithing there and thus overlap.

You should float the element into position so that the footer can then be cleared. Yuo also had the p element absolutely placed so change that also.

.kedua .featured p {
    border-bottom:1px solid #333;
    border-top:1px solid #333;
    padding:0.5em 0 0.6em 0;
    line-height:1.5em;
    margin:1em 0 0 0;
    /*position:absolute;*/
    position:relative;
    clear:both
}
#primary .kedua {
    float:right;
    width:30%;
    margin-left:5%;
    padding-top:0.65em;
    display:inline;
    position:relative;
}

With any luck it should click back into place.

You do have a lot of errors in the code so pop along to the w3c validator and weed them out otherwise they will trip you up later

[pije76]

hi Paul, thanks again for your help. it's work !
but now on the homepage, the widget don't want to the top.

[Paul O'B]

I get a 404 so can't check

Not Found

The requested URL /category/make-money-online.html/ was not found on this server.

[pije76]

fixed done!
here's the url: Panjianom.Net

[pije76]

I get a 404 so can't check

404 is fixed now, please check my homepage Paul...
Panjianom.Net

[Paul O'B]

I'm still getting a problem - is it just me?

Warning: Unterminated comment starting line 21 in /home2/chroot/panji/htdocs/index.php on line 21

Fatal error: fatal flex scanner internal error--end of buffer missed in /home2/chroot/panji/htdocs/index.php on line 21

[pije76]

Oops, I'm really sorry for my mistake.
now that site can seen, please check my site.
many many thanks Paul...

[Paul O'B]

Sorry that link goes to daxa.net which I assume is your host.

[pije76]

OMG, it's may be my bad day.
I will contact the host provider ASAP.
I'm sorry Paul...

[ralph.m]

Off Topic:

By the look of that landing page, I wouldn't be using that host. Honestly, run!

[TheRaptor]

Off Topic:

By the look of that landing page, I wouldn't be using that host. Honestly, run!

Off Topic:

+1. Get out of there as fast as you can, seems to be a very shady/shifty company...

[pije76]

thank all of your advices guys !
yes, I have same thought from my intuition about that host is shady/shifty but i don't know where's the wrong.. can you tell me? I will move to other host ASAP..

back to topic, Paul.. my homepage is ready to check now
sorry for that mistake..

[Paul O'B]

Hi,

If you have multiple left floated elements then you can't float a column to the right because it will only line up with the last floated element assuming it was the right size anyway which yours isn't.

You need to wrap all those pertama divs in a single floated column of correct width and then the 2 columns will sit side by side.

.innerwrap {
    float:left;
    width:65%
}
#primary.twocol-stories .pertama {
  display: inline;
  float: left;
  margin: 0 0 0 4%;
  width: 95%;
}

<div id="primary" class="twocol-stories">
    <!-- [BEGIN] .inside -->
    <div class="inside">
        <!-- [BEGIN] .pertama -->
        <div class="innerwrap">
            <div class="pertama">
                <h1><a href="http://panjianom.net/make-money-online-from-home-with-your-skill/" rel="bookmark" title="Permanent Link to Make Money Online From Home With Your Skill">Make Money Online From Home With Your Skill</a></h1>
                <p>Finding a free way to make money online isn’t easy and might take a lot of time, especially work from home &amp; newbie. So, I have done research on some money making methods from home and I founded the most important to get money by online, that is if you have some requirement skills to [...]</p>
                <div class="details"> Posted at 10am on 7/7/11  | <a href="http://panjianom.net/make-money-online-from-home-with-your-skill/#respond" title="Comment on Make Money Online From Home With Your Skill">no comments</a> | Filed Under: <a href="http://panjianom.net/category/make-money-online.html/" title="View all posts in Make Money Online" rel="category tag">Make Money Online</a> | Tagged: <a href="http://panjianom.net/tag/make-money-online.html/" rel="tag">Make Money Online</a> | <span class="read-on"><a href="http://panjianom.net/make-money-online-from-home-with-your-skill/">read on</a></span> </div>
                <!-- [END] .pertama -->
            </div>
            <!-- [BEGIN] .pertama -->
            <div class="pertama">
                <h1><a href="http://panjianom.net/download-100-inspirational-quotes/" rel="bookmark" title="Permanent Link to Download 100 Inspirational Quotes">Download 100 Inspirational Quotes</a></h1>
                <p>Inspirational Quotes<br />
                    A quotation or quote is the repetition of one expression as part of another one, particularly when the quoted expression is well-known or explicitly attributed by citation to its original source, and it is indicated by (punctuated with) quotation marks.<br />
                    Motivation refers to the initiation, direction, intensity and persistence of behavior. Motivation, a temporal and [...]</p>
                <div class="details"> Posted at 11pm on 7/4/11  | <a href="http://panjianom.net/download-100-inspirational-quotes/#respond" title="Comment on Download 100 Inspirational Quotes">no comments</a> | Filed Under: <a href="http://panjianom.net/category/reviews.html/" title="View all posts in Reviews" rel="category tag">Reviews</a> | <span class="read-on"><a href="http://panjianom.net/download-100-inspirational-quotes/">read on</a></span> </div>
                <!-- [END] .pertama -->
            </div>
            <!-- [BEGIN] .pertama -->
            <div class="pertama">
                <h1><a href="http://panjianom.net/how-to-make-money-10000-per-month-with-cpa-marketing/" rel="bookmark" title="Permanent Link to How To Make Money $10,000 Per Month With Cpa Marketing">How To Make Money $10,000 Per Month With Cpa Marketing</a></h1>
                <p>How To Make Money $10,000 Per Month With CPA Marketing<br />
                    If you really want to make FAT affiliate  commission with paid traffic sources, firstly you  must clearly understand how the paid traffic model works and you also need to know what the specific techniques and  strategies of each traffic source or channel.<br />
                    Because paid [...]</p>
                <div class="details"> Posted at 3am on 6/29/11  | <a href="http://panjianom.net/how-to-make-money-10000-per-month-with-cpa-marketing/#respond" title="Comment on How To Make Money $10,000 Per Month With Cpa Marketing">no comments</a> | Filed Under: <a href="http://panjianom.net/category/make-money-online.html/" title="View all posts in Make Money Online" rel="category tag">Make Money Online</a>, <a href="http://panjianom.net/category/reviews.html/" title="View all posts in Reviews" rel="category tag">Reviews</a> | Tagged: <a href="http://panjianom.net/tag/make-money-online.html/" rel="tag">Make Money Online</a> | <span class="read-on"><a href="http://panjianom.net/how-to-make-money-10000-per-month-with-cpa-marketing/">read on</a></span> </div>
                <!-- [END] .pertama -->
            </div>
            <!-- [BEGIN] .pertama -->
            <div class="pertama">
                <h1><a href="http://panjianom.net/how-to-show-insert-ads-in-the-middle-or-in-wordpress-post-paragraph/" rel="bookmark" title="Permanent Link to How To Show &#038; Insert Ads In The Middle Or In Wordpress Post Paragraph">How To Show &#038; Insert Ads In The Middle Or In Wordpress Post Paragraph</a></h1>
                <p>To insert advertisement and/or other content in middle or in the article paragraph, we only need using one variable to keep of index&rsquo;s article and then we exploit that variable to do verification and display advertisement/other content certain at position that we want to show:</p>
                <p>This tips only fit used in single post template and/or page [...]</p>
                <div class="details"> Posted at 8am on 11/17/10  | <a href="http://panjianom.net/how-to-show-insert-ads-in-the-middle-or-in-wordpress-post-paragraph/#respond" title="Comment on How To Show &amp; Insert Ads In The Middle Or In Wordpress Post Paragraph">no comments</a> | Filed Under: <a href="http://panjianom.net/category/make-money-online.html/" title="View all posts in Make Money Online" rel="category tag">Make Money Online</a> | Tagged: <a href="http://panjianom.net/tag/make-money-online.html/" rel="tag">Make Money Online</a> | <span class="read-on"><a href="http://panjianom.net/how-to-show-insert-ads-in-the-middle-or-in-wordpress-post-paragraph/">read on</a></span> </div>
                <!-- [END] .pertama -->
            </div>
            <!-- [BEGIN] .pertama -->
            <div class="pertama">
                <h1><a href="http://panjianom.net/get-free-backlink-free-traffic-high-pr-with-microblogging-site-part-1/" rel="bookmark" title="Permanent Link to Get Free Backlink, Free Traffic &#038; High Pr With Microblogging Site [part 1]">Get Free Backlink, Free Traffic &#038; High Pr With Microblogging Site [part 1]</a></h1>
                <p>I have a trick from my experience to get free backlink, free traffic &amp; visitor targeted with microblogging sites to increase your pagerank blog at least PR 2.</p>
                <p>Register new account at Identica (PR 7)<br />
                    If you have site about betta fish, then you register with username: bettafish too. Don&rsquo;t forget to use your origin email because [...]</p>
                <div class="details"> Posted at 1am on 7/10/11  | <a href="http://panjianom.net/get-free-backlink-free-traffic-high-pr-with-microblogging-site-part-1/#respond" title="Comment on Get Free Backlink, Free Traffic &amp; High Pr With Microblogging Site [part 1]">no comments</a> | Filed Under: <a href="http://panjianom.net/category/seo.html/" title="View all posts in SEO" rel="category tag">SEO</a> | Tagged: <a href="http://panjianom.net/tag/seo.html/" rel="tag">SEO</a> | <span class="read-on"><a href="http://panjianom.net/get-free-backlink-free-traffic-high-pr-with-microblogging-site-part-1/">read on</a></span> </div>
                <!-- [END] .pertama -->
            </div>
            <!-- [BEGIN] .pertama -->
            <div class="pertama">
                <h1><a href="http://panjianom.net/how-to-disable-fixing-php-memory-limit-error-message/" rel="bookmark" title="Permanent Link to How To Disable &#038; Fixing Php Memory Limit Error Message">How To Disable &#038; Fixing Php Memory Limit Error Message</a></h1>
                <p>“Fatal error: allowed memory size of xxxxx bytes exhausted”<br />
                    If you are getting errors that memory has been exhausted, that means  that PHP is not allocating enough memory for WordPress and all its  plugins to run. You can fix this by allocating more memory to PHP or to  reduce the amount of memory [...]</p>
                <div class="details"> Posted at 11pm on 7/7/11  | <a href="http://panjianom.net/how-to-disable-fixing-php-memory-limit-error-message/#respond" title="Comment on How To Disable &amp; Fixing Php Memory Limit Error Message">no comments</a> | Filed Under: <a href="http://panjianom.net/category/tips-trick.html/" title="View all posts in Tips &amp; Trick" rel="category tag">Tips &amp; Trick</a>, <a href="http://panjianom.net/category/wordpress.html/" title="View all posts in Wordpress" rel="category tag">Wordpress</a> | Tagged: <a href="http://panjianom.net/tag/wordpress.html/" rel="tag">Wordpress</a> | <span class="read-on"><a href="http://panjianom.net/how-to-disable-fixing-php-memory-limit-error-message/">read on</a></span> </div>
                <!-- [END] .pertama -->
            </div>
        </div>
        <!-- [END] .innerwrap -->
        <hr class="hide" />
        <!-- [BEGIN] .kedua -->
        <div class="kedua">

Make sure everything fits as you are adding margins and padding and widths and making things bigger than the space available.

You still have a number of errors in that page and missing or unclosed tags that need tidying up.

[pije76]

Paul, still no luck with code from you...
then i add this code:

.kedua .featured {
    margin-top:-1150px;
}

the result on homepage is fine but on the output on category/archive page make the content of featured's class is dissapear.
so i switch back to code from you.

here's my homepage's php code:

<?php get_header(); ?>
 
	<!-- [BEGIN] #primary .twocol-stories -->
	<div id="primary" class="twocol-stories">
	<!-- [BEGIN] .inside -->
		<div class="inside">
					<?php
				// Here is the call to only make two posts show up on the homepage REGARDLESS of your options in the control panel
				query_posts('showposts=3');
			?>
 
			<?php if (have_posts()) : ?>
				<?php while (have_posts()) : the_post(); ?>
			<!-- [BEGIN] .pertama -->
			<div class="innerwrap">
					<div class="pertama">
						<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
						<?php the_excerpt() ?>
						<div class="details">
							Posted at <?php the_time('ga \o\n n/j/y') ?> <?php if(function_exists('relative_post_the_date')) { relative_post_the_date(); } ?> | <?php comments_popup_link('no comments', '1 comment', '% comments'); ?> | Filed Under: <?php the_category(', ') ?> | <?php if (is_callable('the_tags')) the_tags('Tagged: ', ', ', ' | '); ?> <span class="read-on"><a href="<?php the_permalink() ?>">read on</a></span>
						</div>
	        <!-- [END] .innerwrap -->
	        </div>
			<!-- [END] .pertama -->
			</div>
				<?php endwhile; ?>
 
			<hr class="hide" />
			<!-- [BEGIN] .kedua -->
			<div class="kedua">
				<!-- [BEGIN] .featured -->
				<div class="featured">
					<h2><?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?></h2>
					<?php endif; ?>
				<!-- [END] .featured -->
				</div>
			<!-- [END] .kedua -->
			</div>
			<div class="clear"></div>
			<?php else : ?>
 
				<h2 class="center">Not Found</h2>
				<p class="center">Sorry, but you are looking for something that isn't here.</p>
				<?php include (TEMPLATEPATH . "/searchform.php"); ?>
 
			<?php endif; ?>
		<!-- [END] .inside -->
		</div>
	<!-- [END] #primary .single-post -->
	</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

And here's the complete code for homepage's css:

/*-----------------------------------------------------------------------------------------------
  Primary Items
-----------------------------------------------------------------------------------------------*/
 
#primary{
  background:#121212;
  padding:1em 0 2em 0;
  color:#808080;
}
 
#primary.onecol-stories .primary{
  float:left;
  width:50%;
}
#primary.onecol-stories .secondary{
  float:right;
  width:40%;
  margin:0 0 0 10%;
}
 
.innerwrap {
    float:left;
    width:65%
}
#primary.twocol-stories .pertama {
  display: inline;
  float: left;
  margin: 0 0 0 4%;
  width: 95%;
}
 
* html #primary.twocol-stories .pertama{
  margin-left:2%;
}
#primary.twocol-stories .first, * html #primary.twocol-stories .first{
  margin:0 0 0 0;
}
 
.pertama h1{
  font-size:1.15em;
  margin:0 0 1.5em 0;
  font-weight:normal;
  color:#CCC;
}
.pertama h1 a{
  color:#CCC;
  text-decoration:none;
  border-bottom:1px dotted #666;
}
.pertama h1 a:hover{
  color:#fcf8d4;
  border-bottom:1px solid #555;
}
 
.pertama .details{
  margin:1em 0;
  text-align:right;
  border-top:1px solid #333;
  padding:0.5em 0;
  font-size:0.95em;
  color:#4D4D4D;
}
 
.pertama .details .read-on{
  background:url(images/readon_black.gif) 100% 60% no-repeat;
  padding-right:20px;
}
.pertama .details a{
  color:#4D4D4D;
  text-decoration:none;
}
.pertama .details a:hover{ color:#FFF; }
 
/* Home Pages Styles */
#primary .pertama{
  float:left;
  width:65%;
}
 
#primary .kedua {
    float:right;
    width:30%;
    margin-left:5%;
    padding-top:0.65em;
    display:inline;
    position:relative;
}
 
* html #primary .kedua{ margin-right:4%; }
 
/*.kedua .featured {
    margin-top:-1150px;
}*/
.kedua .featured p {
    border-bottom:1px solid #333;
    border-top:1px solid #333;
    padding:0.5em 0 0.6em 0;
    line-height:1.5em;
    margin:1em 0 0 0;
    /*position:absolute;*/
    position:relative;
    clear:both
}
 
.kedua .featured dl{
  margin:0 0;
  border-bottom:1px solid #333333;
  padding:0.5em 0 0.6em 0;
}
.kedua .featured h2{
  list-style-type:none;
  margin-left: 8px;
}
.kedua .featured li{
  list-style-type:none;
}
 
.kedua dt{
  display:inline;
  margin:0;
  padding:0;
  color:#AAA;
}
.kedua dd{
  display:inline;
  margin:0;
  padding:0;
}
.kedua dd a{ color:#808080; }
.kedua dd a:hover{ color:#FFF; }
 
.twocol-stories h1, .twocol-stories h2{ margin-top:0; }
 
/* Single Post Styles */
 
#primary .primary{
  float:left;
  width:65%;
}
#primary .secondary{
  float:right;
  width:30%;
  margin-left:5%;
  padding-top:0.65em;
  display:inline;
}
* html #primary .secondary{ margin-right:4%; }
 
.secondary .featured {
  font-size:1em;
}
 
.secondary .featured p{
  border-bottom:1px solid #333333;
  border-top: 1px solid #333333;
  padding:0.5em 0 0.6em 0;
  font-size:1.1em;
  line-height:1.5em;
  margin:1em 0 0 0;
}
.secondary .featured p a {
  font-size:11.5px;
}
 
.secondary .featured dl{
  margin:0 0;
  border-bottom:1px solid #333333;
  padding:0.5em 0 0.6em 0;
}
.secondary dt{
  display:inline;
  margin:0;
  padding:0;
  color:#AAA;
}
.secondary dd{
  display:inline;
  margin:0;
  padding:0;
}
.secondary dd a{ color:#808080; }
.secondary dd a:hover{ color:#FFF; }
 
.single-post h1, .single-post h2{
  margin-top:0;
  /*font-family:"Gentium Basic",Garamond,Palatino,Georgia,serif;*/
}
 
/*-----------------------------------------------------------------------------------------------
  Secondary Items
-----------------------------------------------------------------------------------------------*/
 
#secondary{
  background:#0C0C0C;
  padding:1px 2em;
  border-top:1px solid #1C1C1C;
}
 
.comment-head{
  border-bottom:1px solid #1C1C1C;
  padding:0.8em 2em 1.0em 2em;
}
.comment-head h2{
  font-size:1.5em;
  margin:0;
}
.comment-head a{
  text-decoration:none;
  color:#868686;
}
 
.comment-head a:hover{
  color:#fcf8d4;
}
 
.comment-head .details{
  font-size:0.95em;
}
 
ol#comments{
  list-style-type:none;
  margin:2em 0;
}
ol#comments li{
  list-style-type:none;
  margin:2em 0;
}
 
#comments cite{
  float:left;
  width:31%;
  font-style:normal;
  text-align:right;
}
* html #comments cite{ width:30.6%; }
#comments cite span{
  display:block;
}
#comments cite span.avatarspan{ float: left; }
#comments cite span.author{ margin-left:30px; }
#comments cite span.author a { margin-left:5px; }
#comments cite .author{ font-size:1em; }
#comments cite .author a{
  text-decoration:none;
}
#comments cite .admin-tools{
  margin:5px 0;
}
#comments cite .admin-tools a{
  float:right;
  margin:0 5px;
  padding:0px 3px 3px;
  background:#666;
  border:1px solid #999;
  text-decoration:none;
}
#primary .secondary .admin-tools{ margin:1em 0; }
 
#preview{
  margin:1em 0;
  padding:0.5em;
  border:1px solid #333;
}
#preview p{ margin:1em 0 0 0; }
#errors{ color:#FF0000; font-weight:bold; }
 
#comments .pingback cite .author{
  display:block;
  padding-top:68px;
  background:url(images/trackback_pingback.gif) 100% 0 no-repeat;
}
 
#comments .content{
  float:left;
  width:60%;
  margin-left:1.9%;
  border-left:1px solid #868686;
  padding: 0 0 0 2%;
}
#comments .content p{
  margin:0 0 1em 0;
}
#comments .content h3{
  margin:0;
  font-size:1em;
}
 
#comment-form{
  margin:5em 0 5em 35.4%;
  width:36em;
}
input.textfield{
  width: 15em;
  margin:5px 0;
}
textarea.commentbox{
  width:28em;
  height:10em;
  padding:0.25em;
  margin:5px 0;
  font-size:1.25em;
  font-family:Arial, Helvetica, sans-serif;
}
 
label.text{
  position:relative;
  left:0.5em;
  top:-0.5em;
}
.formactions input.submit{ 
  float:right; 
  margin:-1em 0 0 0;
  padding:0 0.5em;
}
.formactions .spinner{
  float:right;
  margin:-8px -20px 0 0;
}

thanks Paul...

[ralph.m]

the output on category/archive page make the content of featured's class is dissapear.

Post the generated HTML (that the browser sees—i.e. without PHP) from a category or archive page.

[Paul O'B]

Paul, still no luck with code from you...
then i add this code:

.kedua .featured {
    margin-top:-1150px;
}

No you must never do something like that as that is totally dependent on the content in place and will never work consistenty or cross browser and will only work for that single instance in time.

The code I posted above is working as I have it running locally here so you need to copy the format exactly and make sure all your pages have the same structure.

You must have read my reply incorrectly as you have wrapped every single .pertama div in the wrapper I gave you when you should have wrapped all your pertama divs in one single parent to make one column.

You need to wrap all those pertama divs in a single floated column of correct width and then the 2 columns will sit side by side.

There should only be a single instance of .innerwrap on the page. refer to the code I posted in my previous post to see your mistake