Hi all,

I wanna know that what will be better to move the contents of the Gallery Section here (I wanna centralize the contents). Whether to use the css margins or resizing the image but here only img would be effected, not the caption.

Abdullah

I would apply padding the the div that contains the content and reduce the image size.

After firebugging it, 15px looks like a nice padding.

So as an example,

Reduce the image by atleast 30px width.
Apply a padding value of 15px to the div (the one imidiatly after <div id="col2split">)

It has done the it, but not from both sides? Should I reduce the image size more?

Yes, you want the image at 260px width.

Your box is 290px wide, you are using 15px padding so take 30px (left padding at 15px and right padding at 15px totaling 30px) off of your image in total.

Why the <div> in search box is not ending just after the "submit" button?

The wrapping div "headerright2" is set to 234px width. It is causing the seach div to stretch the whole width rather than the div only wrapping the form.

Try giving the div wrapping the form tags a width of 221px.

I have modified it but the problem still persists. Should I add right margin in headerright2?

Please upload the changes, im not seeing the width in the code.

.headerright2 {
	width: 225px;
	float: right;
	margin: 6px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
	}

Try using:

.headerright2 {
        width: 221px;
	float: right;
	margin: 6px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;

If that still dosnt work for you then give .headerright2 a right margin of 5 to 10 pixels.

I have done it using a right margin

.headerright2 {
width: 225px;
float: right;
margin: 6px 3px 0px 0px;
padding: 0px 0px 0px 0px;
font-weight: bold;
}

It's ok now.

Now I have to add <div> in "Have you read" section in such a way that both of the stories come in a single <div>

Here is a php code, where I wanna add the <div>

PHP Code:

<?php $my_query = new WP_Query('showposts=1&offset=1'); ?>

<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

<?php if ( get_post_meta($post->ID, 'Image', true) ) { ?> 

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "Image", true); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?> <?php _e('thumbnail'); ?>" align="top" border="0" style="padding: 0px; margin: 10px 0px 0px 0px;width: 203px; height: 110px;"/></a>

<?php } else { ?>

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/default.gif" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" align="top" border="0" style="padding: 0px; margin: 10px 0px 0px 0px;width: 203px; height: 110px;"/></a>

<?php } ?>

<h1 class="splititem"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>

<?php the_content_limit(110, ""); ?>

<?php endwhile; ?>

</div>

<div class="col1split_right">

<?php $my_query = new WP_Query('showposts=1&offset=2'); ?>

<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

<?php if ( get_post_meta($post->ID, 'Image', true) ) { ?> 

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, "Image", true); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?> <?php _e('thumbnail'); ?>" align="top" border="0" style="padding: 0px; margin: 10px 0px 0px 0px;width: 203px; height: 110px;"/></a>

<?php } else { ?>

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/default.gif" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" align="top" border="0" style="padding: 0px; margin: 10px 0px 0px 0px;width: 203px; height: 110px;"/></a>

<?php } ?>

<h1 class="splititem"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>

<?php the_content_limit(110, ""); ?>

<?php endwhile; ?>

and here is the <div> code which I wanna add:

<div style="background: #FFFFFF;
            border: 1px solid #C8C8C8;
            -moz-border-radius: 0 0 10px 10px;
            -webkit-border-radius: 0 0 10px 10px;
            -khtml-border-radius: 0 0 10px 10px;
            border-radius: 0 0 10px 10px;
            -moz-box-shadow: 2px 2px 15px #464646;
            -webkit-box-shadow: 2px 2px 15px #464646;
            -khtml-box-shadow: 2px 2px 15px #464646;
            box-shadow: 2px 2px 15px #464646;  
            padding: 0px 15px 0px 15px;">

Its hard to tell whats going on with your code there.

From what I can see on your site, "<div class="col1split_left">" contains the two articles, so if anything you want to apply those styles to this div or wrap a new one around it.

On a side note, you shouldnt be using <h1>'s for general headings, tecnically speaking you should only use one <h1> per page then use <h2>,<h3> etc respectivly.

There are two col1split_left and I wanna combine both of them. Should I add the <div> code under col1split_left in style.css file?

I guess, I am only using one <h1> which is the title of mainstory.

be careful with your use of margins and paddings is all I can say, it makes it for a rather annoying time when cross browser optimizing for IE6.