Div element ignore image content

  • Ains

    (@ains)


    7 years, 10 months ago

    Hi All,

    I have an issue with an image on one of my post that which I aligned left but seems to be ignored by the post navigation div, which is letting the image overlap. If I align centre it’s fine, as the text drops below, followed by the post navigation. It seems that the post navigation is ignoring the image but not the text, even though the image sits with the post content.

    If you click on the previous post link you can see what it’s supposed to look like.

    I have included what I think are the affecting lines of code below. Any help would be much appreciated.

    Thanks,
    Ainsley

    <?php the_content(); ?>
			<div class="postNav clearfix">

				<?php previous_post_link('Previous post: %link', '%title'); ?> &nbsp;&nbsp;&bull;&nbsp;&nbsp; <?php next_post_link('Next post: %link', '%title'); ?>

			</div> <!-- end navigation -->
    .postNav { 
	text-align: center;
	padding: 10px 0 9px 0;
	border: 1px solid #000;
	border-left: none;
	border-right: none;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
}

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Jacob Peattie

    (@jakept)

    7 years, 10 months ago

    This is how floats work in CSS. If you want to force an element to appear below any floated elements you need to use clear. So to make sure left or right floated elements don’t overlap the post navigation, use clear: both; in your .postNav CSS:

    .postNav { 
	clear: both;
	text-align: center;
	padding: 10px 0 9px 0;
	border: 1px solid #000;
	border-left: none;
	border-right: none;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
}
    Thread Starter Ains

    (@ains)

    7 years, 10 months ago

    Hi Jacob, thanks for your time.

    I tried adding the ‘clear: both;’ to the CSS but unfortunately there was no change.

    Any other ideas?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Div element ignore image content’ is closed to new replies.