SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropping floated images

    Hello

    On this page ...

    http://www.balgowlah.anglican.asn.au/youth.html

    the pictures in the middle div drop when the window is narrowed. I want them to stay between the two dark headings. If I clear:right then they drop down below the image in the right div. I looked at this possible solution ..

    http://www.pmob.co.uk/temp/flclear2.htm

    and tried it but had the same result so I have probably misunderstood it.

    I also read the FAQ about floats on this site but I couldn't really relate it to this situation ... I gather if I had no images in the right div then it wouldn't drop. Would a table be better in this situation? There are a couple of other places where I will want to do the same thing (have pictures to the right or left of content that is divided with headings eg http://www.balgowlah.anglican.asn.au/services.html

    The page is two fixed width floated columns (right and left). I am not sure what part of the css you would need so I have just posted it all.

    Many thanks for any assistance you can give me (yet again).

    Deb


    body {
    margin:0; padding:0;
    font-family: Tahoma, Arial, sans-serif ;
    background-color: #F7F1D5;
    line-height: 125%;
    }

    #header {
    margin:0; padding:.5em;
    background:#423C18;
    border-top: 3px solid #ADA242;
    }

    #tagline, #footer {
    font-family: Georgia, Times, serif;
    border-top: 3px solid #ADA242;
    border-bottom: 3px solid #ADA242;
    padding-left: .8em;
    margin: 0;
    background: #F7F1D5;
    }

    #tagline #footer p {
    padding-top: .1em;
    padding-bottom: .1em;
    padding-left: .8em;
    margin: 0;
    }

    #tagline #tag-email {
    padding-right: .8em;
    float: right;
    }

    #footer {
    text-align: center;
    }

    #main1 {
    margin:0; padding:0;
    }

    #main2 {
    margin:0; padding:0;
    }

    #left {
    float:left;
    width:175px;
    min-height: 500px;
    margin:0; padding:0;
    background-color: #F7F1D5;
    background-image: url(images/left_fade.jpg);
    background-repeat: repeat-x;

    }

    ul.left {
    font-size: 100%;
    padding: .5em 0em 0em .5em ;
    margin-left: 0;
    line-height: 150%;
    list-style-position: outside;
    list-style-type: none;
    }

    #right {
    float:right;
    width:175px;
    min-height: 500px;
    background-color: #F7F1D5;
    background-image: url(images/left_fade.jpg);
    background-repeat: repeat-x;
    margin:0; padding:0;
    }

    #right p {
    margin: .5em;
    padding:.5em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: 75%;
    line-height: 100%;
    }

    ul.right {
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    padding: .5em;
    margin: .5em;
    font-size: normal;
    line-height: 125%;
    list-style-type: none;
    list-style-position: outside;
    }

    #middle {
    margin:0 175px;
    background:#F7F1D5;
    font-size:100%;
    border-right: 3px solid #ADA242;
    border-left: 3px solid #ADA242;
    }

    # allowclearboth {
    width: 100%;
    float: left;
    }


    .column-in {
    margin:0; padding:0.5em 1em;
    }

    .cleaner {
    clear:both;
    height:1px;
    font-size:1px;
    border:none;
    margin:0; padding:0;
    background:transparent;
    }

    h1,h2,h3,h4 {
    margin: 0.2em 0;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    }

    h1 {
    font-size: 100%;
    background-image: url(images/heading_fade.gif);
    background-repeat: repeat-y;
    background-color: #F7F1D5;
    color: #F7F1D5;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .4em;
    padding-right: .4em;
    margin: 0;
    }

    h2 {
    color: #423C18;
    font-size: 175%;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom:15px;
    text-transform: uppercase;
    }

    h3 {
    color: #423C18;
    font-size: 120%;
    font-weight: bold;
    padding-top: 15px;
    }

    h4 {
    color: #423C18;
    font-weight: bold;
    padding-top: 10px;
    }

    h5 {
    margin: .2em;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #423C18;
    color: #F7F1D5;
    font-size: small;
    font-weight: bold;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .4em;

    }
    li {
    font-size: 75%;
    list-style-type: none;
    }

    p {
    margin: 0.5em 0;
    font-size: smaller;
    color: #423C18;
    }

    a {
    font-weight: bold;
    }

    a:link {
    color: #423C18;
    }

    a:visited {
    color: #655B25;
    }

    a:hover {
    text-decoration: none;
    color: white;
    background-color: #423C18;
    }

    a:active {
    color: white;
    background-color: #423C18;
    }

    .copy { text-align:center; font-size:80%
    }

    img.home {
    padding: 0;
    border: 0;
    float: right;
    margin: 0;
    }

    img.staff {
    float: left;
    margin: 30px 20px 20px 0px;
    padding: 0;
    }

    img.floatright {
    float: right;
    border: 1px solid #423C18;
    margin: 10px;
    padding: 0;
    }
    img.floatleft {
    border: 1px solid #423C18;
    float: left;
    margin: 10px;
    padding: 0;
    }


    img.right {
    border: 1px solid #423C18;
    margin: 20px 0px 0px 20px;
    padding: 0;
    }
    img.spire {
    border: none;
    }

    img.left {
    border: 1px solid #423C18;
    margin: 0px 0px 0px 8px;
    padding: 0;
    }

    .fun {
    color: #6D6729;
    font-family: Georgia, Times, serif;
    letter-spacing: 0.05em;
    }

    /* applied to list on staff page */

    ul.fun {
    list-style: square;
    margin-left: 100px;
    }

    blockquote.fun {
    font-style: italic;
    }

    /* text of blog post content */
    .post-body {
    background-color: #E5DEB2;
    font-size: smaller;
    color: #423C18;
    }

    table.download {
    border-collapse: collapse;
    }

    table.download th, table.download td {
    padding: 4px;
    border: 2px solid #ADA242;
    }

    table.download th {
    font-size: x-small;
    text-align: left;
    background-image: url(../newasweb/images/banner_gradient_dark_top.gif);
    background-repeat: repeat-x;
    background: #F7F1D5;
    color: #423C18;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2px;
    padding-right: 2px;
    }

    table.download td {
    font-size: small;
    background: #F7F1D5;
    }

    table.download caption {
    color: #423C18;
    font-size: small;
    font-weight: bold;
    text-align: left;
    padding-bottom: 5px;
    }

    .galleryphoto {
    padding-bottom: 10px;
    border-bottom: 1px solid #423C18;
    margin-bottom: 20px;
    }

    .galleryphoto img {
    margin-top: 20px;
    }

    .galleryphoto p {
    font-size: 65%;
    font-weight: bold;
    margin-top: 0;
    width: 430px;
    line-height: 1.4em;
    }

    .galleryphoto p span {
    font-weight: normal;
    color: gray;
    }

    div.credit {
    font-family: Georgia, Times, serif;
    color: #6D6729;
    letter-spacing: .05em;
    padding-top: .2em;
    padding-bottom: 2em;
    padding-left: 20em;
    padding-right: 2em;
    margin: 0;
    background: #F7F1D5;
    }

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to YET ANOTHERTM shortcoming of floated layouts. Problem is the 'real' solution is min-width, which is poorly supported cross-browser, if at all. You will likely get a half dozen posts of cryptic hacks and radical redesign changes, which will all work to varying degrees in one browser or the other, likely increasing the size of your CSS by several dozen lines while never quite getting it right.

    There's a obvious solution - but you might not like it. It does have the advantage of widespread support back over a decade worth of browsers - It's called a table... Which if you style it with CSS instead of inline properties can be almost as clean if not cleaner than many of the so called 'pureCSS' solutions.

    Even though considering that it only does the behavior you describe at widths WELL BELOW 800 pixels, I probably wouldn't sweat it.

  3. #3
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This isn't quite what I was shooting for but it might be a possible solution:
    Code:
    #left { position: relative; z-index: 1; }
    This won't make the images in the middle column stay contained (as they are floated), but at least it will clip them so they don't look quite so terrible if and when the page is narrowed.

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    Even though considering that it only does the behavior you describe at widths WELL BELOW 800 pixels, I probably wouldn't sweat it.
    It's not the behaviour at below 800 pixels it is the behaviour above 1000 or so - because as the window widens the content stretches and the space between the two headings decreases, then the top floated image slips down. Most of the people using this site will have resolutions of 800 width but as more get wider lcds it will show up then, I think.

    I might experiment with a simple table depending on how complex other solutions are.

    Thanks

    Deb

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John Wozniak
    This isn't quite what I was shooting for but it might be a possible solution:
    Code:
    #left { position: relative; z-index: 1; }
    This won't make the images in the middle column stay contained (as they are floated), but at least it will clip them so they don't look quite so terrible if and when the page is narrowed.
    Sorry, I don't quite get this ... are you adding that to the actual left div on this page? Or replacing it?

    Deb

  6. #6
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    Use min (and maybe max) width, if not design for a minimum screen width (768px app 48em)

    (code snipped)
    Thank you. This looks like it would require a fair bit of reworking of the site. I am still a bit of a newbie at all this and you are using classes where I have learned to use ids ... I'm just not all that flexible yet but I will experiment with it and see what happens.

    Deb

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by djaneb
    It's not the behaviour at below 800 pixels it is the behaviour above 1000 or so - because as the window widens the content stretches and the space between the two headings decreases, then the top floated image slips down.
    Not quite sure what you mean by that - as in both IE and Opera at 1600x1200 it looks fine...

    Though in Firefux the bottom image is riding UP next to the image above it... the normal solution would then be a clear:right on the content of the second item - but because you have a menu floating right doing so will screw up the entire page layout... another possibility would be wrapping both news items in their own DIV, then making the DIV's float to one side or the other so they 'pay attention' to the content inside them - this has the problem that if you don't declare the widths properly you could end up having even MORE content riding up in unpredictable fashions...

    Which is when switching your columns to a table so you can actually use the clear property with impunity might be your best bet.

  8. #8
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    Not quite sure what you mean by that - as in both IE and Opera at 1600x1200 it looks fine...

    Though in Firefux the bottom image is riding UP next to the image above it...
    Here's some dumps ... in Opera. Same thing happens in IE7 on my screen.

    http://www.balgowlah.anglican.asn.au...STempPage.html

    It is a riding up problem the dropping problem occurs when I try to clear.

    Will look at simple table.

    Really appreciate your input. I want it to function properly and be neat and clean and I have another couple of pages where I will be doing the same thing so it is worth finding a solution, even though it is hardly the biggest problem in the whole world.

    Deb

  9. #9
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by djaneb
    Sorry, I don't quite get this ... are you adding that to the actual left div on this page? Or replacing it?

    Deb
    I had hacked something like this together in replace of what you currently have for "#left" in hopes of coming up with something simple that would not call for major code changes:
    Code:
    #left {
        position: absolute;
        z-index: 1;
        width: 175px;
        min-height: 500px;
        margin: 0; padding: 0;
        background-color: #F7F1D5;
        background-image: url(images/left_fade.jpg);
        background-repeat: repeat-x;
    }
    This is far from the solution and (only tested in Firefox 1.5), but my intention was to see if I could get the left div to be on top of anything in the middle column by giving it a position (so it can be affected by a z-index) and then a z-index to stack it on top. It works for the top most middle image (it gets clipped or overlapped by the left div) but not for those further down .

    The site looks really nice by the way - great job!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I must be looking at something different to all you lot

    The problem as described above seems to be that the element after the image just needs to have clear applied to it.

    In order to stop the clear from dropping the whole content the middle content should be contained in a float as explained in my example that djaneb already pointed to.

    Wrap the middle content in an inner div:
    Code:
    	<div class="column-in" id="middle">
    	    <div id="inner">
    			<h2>Youth</h2>
    			<p>All Saints' is blessed to have Duncan Barlow as our Assistant Minister in charge of Youth Work. He is ably assisted with many of the activites by the Sarah-Louise, the Children's Worker. See the Chrysalis Children's Ministry Page for more information.</p>
    
    
    
    etc.....
    
    
    </div
    </div>

    Then just add this css:

    Code:
    #inner{width:100%;float:left}
    #inner h1{clear:both}
    Couldn't be simpler

  11. #11
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I am not a fan of the "add another extraneous non semantic div" school of layout building, but of course, in the real world it is sometimes necessary. This layout seems a little heavy on the divs.

    Simplest is best, I agree. I should have read the OP a little more carefully - then perhaps I would have understood the problem better.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I am not a fan of the "add another extraneous non semantic div" school of layout building,
    Neither am I and I would rather use a css hack than add extraneous html .

    However as you say in the real world compromises do have to be made when necessary although a lot of the time an alternative design approach may well circumvent the problem.

  13. #13
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    HI,

    I must be looking at something different to all you lot

    The problem as described above seems to be that the element after the image just needs to have clear applied to it.

    In order to stop the clear from dropping the whole content the middle content should be contained in a float as explained in my example that djaneb already pointed to.

    Wrap the middle content in an inner div:
    Code:
    	<div class="column-in" id="middle">
    	    <div id="inner">
    			<h2>Youth</h2>
    			<p>All Saints' is blessed to have Duncan Barlow as our Assistant Minister in charge of Youth Work. He is ably assisted with many of the activites by the Sarah-Louise, the Children's Worker. See the Chrysalis Children's Ministry Page for more information.</p>
    
    
    
    etc.....
    
    
    </div
    </div>

    Then just add this css:

    Code:
    #inner{width:100%;float:left}
    #inner h1{clear:both}
    Couldn't be simpler
    OK - I have done this - as I did originally when I found the solution on your pages ... the result is that h1 drops below the image in the left (floated) column. That was the problem I had when I originally tried it. I do not know if I have some other extraneous code in there somewhere and I don't want to take up all your time ... at the point where I should just use a table I will. Do you want the code again, or a screen dump?

    Here is the bit I added

    # inner {
    width: 100%;
    float: left;
    }

    # inner h1 {
    clear: both;
    }

    and then wrapped the section you demonstrated in <div id="inner"></div>

    I would also consider another design approach - I am so new at this that alternatives don't come rushing into my head and I am still waiting for delivery of the book "CSS Utopia ...." and still trying to find my way through the maze of differing opinions about clean css and good code and tableless layout ... etc.

    Many thanks

    Deb

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    OK - I have done this -
    Then you did it wrong

    The page online hasn't been updated so I can't check what you did wrong.

    This is not a design issue it is the simple fact that when you add clear to an element it will clear all floats above it in the html including floated columns. The only way to stop this happening is to make sure the middle content is in a float itself and the the clear is contained to the float as it can't clear itself.

    You will run into this issue in all sorts of layouts so you need to understand it

    If you have actually added the code as shown in your post and it is not a typo then you have inserted a gap between the hash and the selector. # inner should be #inner. I am assuming that it is just a typo above and that you didn't put that in your code

    You will need to update the page with the correct code added so that I can take a look. I have tested the code locally on multiple browsers and it works fine. But then of course you may be talking about a completely different issue

  15. #15
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Then you did it wrong

    If you have actually added the code as shown in your post and it is not a typo then you have inserted a gap between the hash and the selector. # inner should be #inner. I am assuming that it is just a typo above and that you didn't put that in your code

    You will need to update the page with the correct code added so that I can take a look. I have tested the code locally on multiple browsers and it works fine. But then of course you may be talking about a completely different issue
    I did have the gap - I can't imagine why as I've never done that before. It works now. I don't know what I did wrong when I first tried your solution. I think one of the times I didn't upload the refreshed css. I've certainly done that before. I really appreciate your perseverance - thank you very much.

    Deb

    Deb

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    thank you very much.
    You're welcome - Glad we got there in the end


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
  •