Skip navigation
Currently Being Moderated

CSS How to clear left or right?

Jan 22, 2013 2:08 AM

Tags: #css #right #left #clear

<style type="text/css">
<!--
}
.placeimage {
    margin: 10px;
    float: left;
}
-->
</style>
<p>Park Geun-hye Elected As South Korea's First Female President</p>
<p><img src="http://survivor-story.com/wp-content/uploads/2013/01/park-geun-hye.jpg" alt="Park Geun-hye Elected As South Korea's First Female President" width="310" height="207" class="placeimage" /></p>
<p>After defeating Moon Jae-in in elections on December 19, 2012, she finally returned to her childhood home as the first female president of a country where women continue to face widespread sexism, huge income gaps with men doing the same work and few opportunities to rise to the top in business, politics and other fields.</p>
<p>When Park Geun-hye (Born: February 2, 1952) last lived in the presidential Blue House more than thirty years ago, she was a young, stand-in first lady, who served after the assassination of her mother and before the killing of her dictator father. </p>


<p style="clear: left;"></p>

 

I inserted  <p style="clear: left;"></p> manually but that's obviously not the way to do it.

 

I want to continue text after the clear left. Above text will be on the right of the image.

 

So any help on how to do it using CSS (which I've decided to finally really get my head around) would be very much appreciated.

 

CS4 - thinking of getting CS5 but don't imagine that the CSS will be a lot different.

 


Thanks

 

Michael

 
Replies
  • Currently Being Moderated
    Jan 22, 2013 5:17 AM   in reply to Michael Redbourn

    I think you want <p style="clear: both">.

     

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 11:32 AM   in reply to Michael Redbourn

    It would really be easier to answer if we had a live webpage from which to review the source code. Going on the snippets you've provided in the original post, I think you would need to either add a CSS class to clear the float, like so:

     

    <style type="text/css">

     

    .placeimage {

         margin-left: 10px;

         float: left;

    }

     

    .clearfloat {

         clear: both;

    }

     

    </style>

     

    and then add that new class to the paragraph, as in <p class="clearfloat"></p>, or add the code as an inline style, as in <p style="clear:both"></p>.

     

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2013 12:02 PM   in reply to Michael Redbourn

    Use overflow:hidden in the parent container that holds the floats.

    http://colinaarts.com/articles/the-magic-of-overflow-hidden/

     

    Float clearing CSS:

     

    .clearing {

    clear:both;

    display:block;

    font-size:0;

    line-height: 1px;

    visibility:hidden;

    }

     

     

    HTML:

     

    <!--add after floats are no longer needed-->

    <hr class="clearing" />

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 9:49 AM   in reply to Michael Redbourn

    Learning to work with code is an essential first step in web design/development.  Without a working knowledge of code basics, you will find DW very hard to work with.

     

    WordPress is a whole other matter.  To customize a WP Theme, you must understand how WP works and have strong coding skills in CSS, PHP & HTML.

    http://codex.wordpress.org/Theme_Development

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 3:09 PM   in reply to Michael Redbourn

    Michael, it sounds to me like you are thinking Dreamweaver is a WYSIWYG program, and it is not. What it is is a very powerful tool that can automate some hand coding functions but really expects the end user to be familiar with the basics of HTML and CSS. As Nancy (who I recommend you listen to before you listen to me) hints, without being able to understand coding, and in essence doing it by hand, you are likely to be frustrated using Dreamweaver.

     

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 3:17 PM   in reply to Michael Redbourn

    Adobe Developer's Center - Getting Started tutorials

    http://www.adobe.com/devnet/dreamweaver/?view=gettingstartedF

     

    Creating  your first web site in DW - 6-part tutorial

    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 24, 2013 12:54 PM   in reply to Michael Redbourn
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points