SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A question about the effect of using the clear command

    I have a page in which a small photo is floated left, with text beside it.

    I have learned the way to get the rest of the text in the page to be below, not along side of, the photo is to use clear:both.

    But when I try that now, the entire rest of the text is shoved down the page a whole chunk. I have the divs outlined in red, and the div in which the clear command sits is well down the page.

    What am I missing here?

    TIA!

    Polly

    HTML:

    Code HTML4Strict:
    <body>
     
    <div id="navigation"> 
        ( list of links)
    </div> <!--   close navigation div-->
     
     
    <div id="contentother">
     
     <div class="spacing"><img src="graphics/Marta web.jpg" width="150" height="150" alt="photo of Marta preaching" class="left"><strong>The Rev. Marta Flanagan is our interim minister for the church year 2008-2009.</strong></div>
     
      <div class="clearfloats"> </div>         
     
    			<p>Marta graduated from Smith College in 1983 with a B.A. in history, and earned 
    			her M.Div. from Harvard Divinity School in 1986. </p>


    CSS:

    Code CSS:
    /* uu site*/
     
    html {
    	background-image: url(graphics/leftsideborder.gif);
    	background-repeat: repeat-y;
    }
     
    html, body {
    	height;100%;
    }
     
    /* this rule is so I can see where the divs are*/
    #tophead, #navigation, #contentindex, #footer, #contentother, #subhead, .left, .right, #centertext, #contentlist, #contentshort, .clearfloats   {
    	border: 1px solid red;
    	padding: 2px;
    	margin-bottom: 2px;
    }
     
    /* rules applying to all pages start here.*/
     
    #tophead {
    	font-size: 24px;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    	margin-left: 250px;
    	width: 535px;
    } 
     
    #subhead {
    	font-size: 20px;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    	margin-left: 250px;
    	margin-top: 20px;
    	width: 535px;
    }
     
    .left  {
    	float: left;
    }
     
    .right  {
    	float: right;
    }
     
    .clearfloats  {
    	clear:both;
    }
     
    .padding30  {
    	padding-top: 30px;
    }
     
    .padding10  {
    	padding-top: 10px;
    }
     
    .spacing  {
    	margin-top: 10px;
    	margin-bottom: 15px;
    }
     
    /* rules applying to all pages end here.*/
     
     
    /* navigation rules start here.*/
    #navigation {
    	font-size: 16px;
    	font-weight: bold;
    	width: 200px;
    	letter-spacing: 0.03em;
    	line-height: 200%;
    	margin-left: 20px;
    	float: left;
    	top: 0;
    	left: 0;
     
    }
     
    /* need this separately so that the rule overrides what the browser will do.*/
    #navigation a {
    	text-decoration: none;
    }
     
    #navigation ul {
    	list-style-type: none;
    	margin-top: 0;
    }
     
    a:link {
    	color: #6600CC; /* bright purple*/
    }
     
    a:visited {
    	color: #6699FF; /* light blue*/
    }
     
    a:hover {
    	color: #993333; /* rust*/
    }
     
    a:active {
    	color: #000099;  /* dark blue*/
    }
     
    /* navigation rules end here.*/
     
     
    /* rules applying only to the index page start here.*/
     
    #contentindex {
    	line-height: 150%;
    	margin-left: 250px;
    	padding-top: 5px;
    	background: url(graphics/church.jpg) no-repeat;
        background-position: top;
    	width: 600px;
        height: 750px;
     
    }
    #welcome  {
    	width: 250px;
    }
     
    /* rules applying only to the index page end here.*/
     
     
    /* rules for other than the index page start here.*/
     
    img  {  
    	margin-left: 10px;
    	margin-right: 10px;
    	border: 1px solid black;
    }
     
     
    #contentother {
    	margin-left: 250px;
    	background: url(graphics/screenedchurch.jpg) no-repeat;
        background-position: top;
        width: 600px;
        min-height: 100%;
    }
     
    #service  {						/* for "your first visit" page only*/
    	margin-left: 95px;
    }
     
    #centertext  {					/* for directions page only*/
    	margin-left: 150px;
    	line-height: 150%;
    }
     
    #centermap  {				/* for directions page only*/
    	margin-left: 68px;
    	padding-top: 30px;
    	padding-bottom: 30px;
    }
     
    #contentlist  {						/* for RE page only*/
    	line-height: 150%;
    }
     
    #contentlist ul {					/* for RE page only*/
    	list-style-type: none;
    	margin-top: 10px;
    }
     
    #contentlist  a {					/* for RE page only*/
    	text-decoration: none;
    }
     
     
    #contentshort {						/* in a short page, to force the footer down      
                                                below the background image*/
    	margin-left: 250px;
    	background: url(graphics/screenedchurch.jpg) no-repeat;
        background-position: top;
        width: 600px;
        height: 750px;
    }
     
     
     
     
    /*  rules for other than the index page end here.*/
     
     
    /* footer rules start here.*/
    #footer {
    	margin-left: 250px;
    	width: 535px;
    	height: 80px;
    	clear: both;
    }
     
     
    #footer img {
    	float: left;
    	margin-right: 10px;
    {
     
    /* footer rules end here.*/
    Last edited by Dan Grossman; Feb 8, 2009 at 20:09. Reason: Added code tags for readability

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would not be at all surprised to find out that it was the browser rules that was doing that!

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when I used your code I got the affect i thought you were going for. The text is just below the image. Isn't that what you want.
    HTML Code:
    <html>
    <header>
    <style type="text/css">
    /* uu site*/
     
    html {
        background-image: url(graphics/leftsideborder.gif);
        background-repeat: repeat-y;
    }
     
    html, body {
        height;100%;
    }
     
    /* this rule is so I can see where the divs are*/
    #tophead, #navigation, #contentindex, #footer, #contentother, #subhead, .left, .right, #centertext, #contentlist, #contentshort, .clearfloats   {
        border: 1px solid red;
        padding: 2px;
        margin-bottom: 2px;
    }
     
    /* rules applying to all pages start here.*/
     
    #tophead {
        font-size: 24px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        margin-left: 250px;
        width: 535px;
    } 
     
    #subhead {
        font-size: 20px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        margin-left: 250px;
        margin-top: 20px;
        width: 535px;
    }
     
    .left  {
        float: left;
    }
     
    .right  {
        float: right;
    }
     
    .clearfloats  {
        clear:both;
    }
     
    .padding30  {
        padding-top: 30px;
    }
     
    .padding10  {
        padding-top: 10px;
    }
     
    .spacing  {
        margin-top: 10px;
        margin-bottom: 15px;
    }
     
    /* rules applying to all pages end here.*/
     
     
    /* navigation rules start here.*/
    #navigation {
        font-size: 16px;
        font-weight: bold;
        width: 200px;
        letter-spacing: 0.03em;
        line-height: 200%;
        margin-left: 20px;
        float: left;
        top: 0;
        left: 0;
     
    }
     
    /* need this separately so that the rule overrides what the browser will do.*/
    #navigation a {
        text-decoration: none;
    }
     
    #navigation ul {
        list-style-type: none;
        margin-top: 0;
    }
     
    a:link {
        color: #6600CC; /* bright purple*/
    }
     
    a:visited {
        color: #6699FF; /* light blue*/
    }
     
    a:hover {
        color: #993333; /* rust*/
    }
     
    a:active {
        color: #000099;  /* dark blue*/
    }
     
    /* navigation rules end here.*/
     
     
    /* rules applying only to the index page start here.*/
            
    #contentindex {
        line-height: 150%;
        margin-left: 250px;
        padding-top: 5px;
        background: url(graphics/church.jpg) no-repeat;
        background-position: top;
        width: 600px;
        height: 750px;
        
    }
    #welcome  {
        width: 250px;
    }
     
    /* rules applying only to the index page end here.*/
     
     
    /* rules for other than the index page start here.*/
     
    img  {  
        margin-left: 10px;
        margin-right: 10px;
        border: 1px solid black;
    }
     
     
    #contentother {
        margin-left: 250px;
        background: url(graphics/screenedchurch.jpg) no-repeat;
        background-position: top;
        width: 600px;
        min-height: 100%;
    }
     
    #service  {      /* for "your first visit" page only*/
        margin-left: 95px;
    }
     
    #centertext  {          /* for directions page only*/
        margin-left: 150px;
        line-height: 150%;
    }
     
    #centermap  {            /* for directions page only*/
        margin-left: 68px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
     
    #contentlist  {      /* for RE page only*/
        line-height: 150%;
    }
     
    #contentlist ul {               /* for RE page only*/
        list-style-type: none;
        margin-top: 10px;
    }
     
    #contentlist  a {               /* for RE page only*/
        text-decoration: none;
    }
     
     
    #contentshort {      /* in a short page, to force the footer down      
                                                below the background image*/
        margin-left: 250px;
        background: url(graphics/screenedchurch.jpg) no-repeat;
        background-position: top;
        width: 600px;
        height: 750px;
    }
     
     
     
     
    /*  rules for other than the index page end here.*/
     
     
    /* footer rules start here.*/
    #footer {
        margin-left: 250px;
        width: 535px;
        height: 80px;
        clear: both;
    }
     
     
    #footer img {
        float: left;
        margin-right: 10px;
    {
     
    /* footer rules end here.*/
    </style>
    </header>
    <body>
     
    <div id="navigation"> 
        ( list of links)
    </div> <!--   close navigation div-->
     
     
    <div id="contentother">
     
     <div class="spacing"><img src="graphics/Marta web.jpg" width="150" height="150" alt="photo of Marta preaching" class="left">
    <strong>The Rev. Marta Flanagan is our interim minister for the church year 2008-2009.</strong></div>
     
      <div class="clearfloats">         
            
                <p>Marta graduated from Smith College in 1983 with a B.A. in history, and earned 
                her M.Div. from Harvard Divinity School in 1986. </p> </div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I think it is a float problem, because the clear command brings the div that contains the clear floats down to the end of the navigation div.

    So the question remains: how do I get the text block below "The Rev Marta ...." to stay below the photo, but not so far down as the end of the navigation div?

    Full HTML here [CSS in previous post]

    <body>

    <div id="tophead">

    Unitarian Church of Montpelier
    </div> <!-- close tophead div-->

    <div id="subhead">
    Our interim Minister
    </div> <!-- close subhead div-->


    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="believe.html">What We Believe
    <!-- plus other links-->
    </ul>
    </div> <!-- close navigation div-->


    <div id="contentother">

    <div class="spacing"><img src="graphics/Marta web.jpg" width="150" height="150" alt="photo of Marta preaching" class="left"><strong></div>

    The Rev. Marta Flanagan is our interim minister for the church year 2008-2009.</strong>

    <p>Marta graduated from Smith College in 1983 with a B.A. in history, and earned her M.Div. from Harvard Divinity School in 1986. </p>

    </div> <!-- close contentother div-->


    <div id="footer">
    <!--stuff in footer-->
    </div> <!-- close footer div-->

    </body>

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I moved the photo to float it right, and then specifically cleared just the right float, not both, and everything works!

    Apparently you can't float two things left on the same page, even though they are in different divs.

    Oh well, live and learn!

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,800
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pellerbe View Post
    Okay, I moved the photo to float it right, and then specifically cleared just the right float, not both, and everything works!

    Apparently you can't float two things left on the same page, even though they are in different divs.

    Oh well, live and learn!
    You can float multiple things left but clearing the left floats clears all of them that are within the same container as the clear is in.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    .clearfix{clear:both;}
    and apply this class to the first thing immediately after each floated item or set of floats

    And you can float lots of things left (and/or right) on the same page.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought divs were containers?

    If I float the navigation div left, and in another div float and clear the photo left, the text under the photo goes to the horizontal line formed by the bottom of the nav div.

    Mind, the problem is solved if I float and clear the photo right, but I'd love to understand what is going on when I float and clear left.


    Here is the HTML, abbreviated a bit:



    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="links.html">UU Links</a></li>
    </ul>
    </div> <!-- close navigation div-->


    <div id="contentother">

    <div class="spacing"><img src="graphics/Marta web.jpg" width="150" height="150" alt="photo of Marta preaching" class="left"></div>
    <strong>The Rev. Marta Flanagan is our interim minister for the church year 2008-2009.</strong>

    <div class="clearleft"></div>

    <p>Marta graduated from Smith College in 1983 with a B.A. in history. </p>

    </div> <!-- close contentother div-->


    Here is the CSS abbreviated:

    html {
    background-image: url(graphics/leftsideborder.gif);
    background-repeat: repeat-y;
    }

    html, body {
    height;100%;
    }

    /* this rule is so I can see where the divs are*/
    #tophead, #navigation, #contentindex, #footer, #contentother, #subhead, .left, .right, #centertext, #contentlist, #contentshort, .clearfloats, .clearleft, #calendar {
    border: 1px solid red;
    padding: 2px;
    margin-bottom: 2px;
    }

    /* rules applying to all pages start here.*/


    .left {
    float: left;
    }

    .right {
    float: right;
    }

    .clearfloats {
    clear:both;
    }

    .clearright {
    clear:right;
    }

    .clearleft {
    clear:left;
    }


    .spacing {
    margin-top: 10px;
    }


    /* rules applying to all pages end here.*/


    /* navigation rules start here.*/
    #navigation {
    font-size: 16px;
    font-weight: bold;
    width: 200px;
    letter-spacing: 0.03em;
    line-height: 200%;
    margin-left: 20px;
    float: left;
    top: 0;
    left: 0;

    }

    /* need this separately so that the rule overrides what the browser will do.*/
    #navigation a {
    text-decoration: none;
    }

    #navigation ul {
    list-style-type: none;
    margin-top: 0;
    }

    /* the usual list of options for links*/

    /* navigation rules end here.*/


    /* rules for other than the index page start here.*/


    #contentother {
    margin-left: 250px;
    background: url(graphics/screenedchurch.jpg) no-repeat;
    background-position: top;
    width: 600px;
    min-height: 100%;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •