Remove DIV Breaks WordPress

Lucas Wynne comments:

This could possibly be the answer, but I'd like to see if somebody has a CSS-only answer first.

Jens Filipsson comments:

No problem my friend, we should never rush things. Taking it easy is a good counterweight to everything else now a days.

Jens Filipsson comments:

I just got one more idea you could try. Then I'm off to bed! :)

Try wrapping ALL you elements with the <NOBR> tag.

Like this:

<NOBR> All you content </NOBR>

Jens Filipsson comments:

Just checked your source code, you shouldn't wrap every object, but all objects of the page :)

Jens Filipsson comments:

Like this:

<nobr><div class="portfolio_wrap">
<div class="img">
<a href="http://themeforward.com/demo2/?p=272">
<img src="http://lucaswynne.com/wp-content/uploads/2010/12/1292257325008.jpeg" alt="Big Post" title="Big Post, No comments" />

<span class="title">Big Post</span>
</a>

<div class="desc"><p>In 2002, three long-time colleagues <a href="http://themeforward.com/demo2/?p=272"></a></p>

</div>
</div>
</div>



<div class="portfolio_wrap">
<div class="img">
<a href="http://themeforward.com/demo2/?p=268">
<img src="http://lucaswynne.com/wp-content/uploads/2010/12/1292257325008.jpeg" alt="Here&#039;s Another One I Guess" title="Here&#039;s Another One I Guess, No comments" />

<span class="title">Here&#039;s Another One I Guess</span>
</a>

<div class="desc"><p>In 2002, three long-time colleagues <a href="http://themeforward.com/demo2/?p=268"></a></p>

</div>
</div>
</div>



<div class="portfolio_wrap">
<div class="img">
<a href="http://themeforward.com/demo2/?p=266">
<img src="http://lucaswynne.com/wp-content/uploads/2010/12/1292257325008.jpeg" alt="Another Post" title="Another Post, No comments" />

<span class="title">Another Post</span>
</a>

<div class="desc"><p>In 2002, three long-time colleagues <a href="http://themeforward.com/demo2/?p=266"></a></p>

</div>
</div>
</div>
</nobr>

Jens Filipsson comments:

(you probably need to put this code in your template somewhere, before and after the loop probably. or in between the if have posts and while have post statements.)

Jens Filipsson comments:

You might also need to set
overflow:scroll;
to one of these to:
<div id="single_wrap">
<div id="portfolio_content">
in you style.css file.

Jens Filipsson comments:

If you want to, post the source code to the template you're modifying, and i can show you where to put the code.

Lucas Wynne comments:

<?php get_header(); ?>

<nobr>
<div id="portfolio_content">

<!-- Grab posts -->
<?php query_posts('cat=51&posts_per_page=1000&paged='.$paged);
if (have_posts()) :
while (have_posts()) : the_post(); ?>

<div class="portfolio_wrap">
<div class="img">
<a href="<?php the_permalink() ?>">
<?php $image = catch_that_image();
if( $image ) { ?>
<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>, <?php comments_number('No comments','One comment','% comments'); ?>" />
<?php } ?>

<span class="title"><?php the_title(); ?></span>
</a>

<div class="desc"><?php my_excerpt('short'); ?></div>
</div>
</div>
</nobr>

<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>


I've tried it most ways, I'm confused.

Jens Filipsson comments:

Try it like this:

<?php get_header(); ?>

<div id="portfolio_content">



<!-- Grab posts -->

<?php query_posts('cat=51&posts_per_page=1000&paged='.$paged);

if (have_posts()) : ?>
<nobr>
<?php
while (have_posts()) : the_post(); ?>



<div class="portfolio_wrap">

<div class="img">

<a href="<?php the_permalink() ?>">

<?php $image = catch_that_image();

if( $image ) { ?>

<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>, <?php comments_number('No comments','One comment','% comments'); ?>" />

<?php } ?>



<span class="title"><?php the_title(); ?></span>

</a>



<div class="desc"><?php my_excerpt('short'); ?></div>

</div>

</div>



<?php endwhile; ?>

</nobr>

<?php endif; ?>

</div>

</div>

<?php get_footer(); ?>

Lucas Wynne comments:

Doesn't work. I don't personally know of any way to prevent DIVS from creating a break on a page. Maybe somebody can convert it to a span or something, I don't know.

Jens Filipsson comments:

Ok, this is my last suggestion, apart from the link i gave you in the beginning:

First of all, remove the nobr tags from the code again.

Then, go to you style.css file and find this line:

#portfolio_content { clear:both; padding:0 0 20px 25px; border-top:0px solid #DCDCDC; margin:0 auto; overflow:hidden }

Change this to this instead:

#portfolio_content { clear:both; padding:0 0 20px 25px; border-top:0px solid #DCDCDC; margin:0 auto; white-space: nowrap; overflow:scroll; }

See the last two?

You can experiment with those two a little, but try this first.

Jens Filipsson comments:

Hey there,
just curious, did you try my last suggestion? Would be cool to know if it worked or not...

Take care!

Lucas Wynne comments:

I must need to do something else here because that's not working. A little help?

Here's my CSS:
.portfolio_wrap { width:100%; margin:103px 0 0 0 }

#portfolio_content { clear:both; padding:0 0 20px 25px; border-top:0px solid #DCDCDC; margin:0 auto; overflow:hidden }
#portfolio_content p { margin:0px 0 0 0 }
#portfolio_content ul { list-style:none }
.portfolio_wrap a { color:#555!important }
.portfolio_wrap a:hover { color:#000!important }
#portfolio_content .img { border:1px solid #E8E8E8; background:#FFF; width:206px; margin:0 6px 10px 0; padding:15px; height:220px; float:left }
#portfolio_content .img img { width:200px; margin:0 0 8px 0; padding:3px; border:1px solid #E8E8E8; height:130px }
#portfolio_content .img a:hover img { }
#portfolio_content .desc p { text-align:left; font-weight:normal; width:auto; font-size:12px; margin:0 0 0 0 }
#portfolio_content .title, #portfolio_content .title a { clear:both; margin-bottom:20px!important; text-align:left; width:auto; font-weight:bold; font-size:16px }


devjah comments:

have you removed overflow:hidden from #portfolio_content ?

Lucas Wynne comments:

Yes, I did, but it didn't work.

The page doesn't actually have tables on it, is that the problem?

devjah comments:

the code mentioned above:


<script type="text/javascript" charset="utf-8">

$(function(){

$("#portfolio_content").wrapInner("<table cellspacing='30'><tr>");

$(".portfolio_wrap").wrap("<td>");

});

</script>


must be after

<!-- Get jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



this should solve the problem