1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS help wanted

Discussion in 'Off Topic' started by Brogan, Sep 30, 2010.

  1. Brogan

    Brogan XenForo Moderator Staff Member

    I know there are a lot of talented people on here so I'm after a bit of CSS help.

    Essentially I want to have an image floated left with a url link underneath it, adjacent to it will be some text and the whole lot will be underlined by a border.
    The problem is, if the amount of text rows is less than the height of the image, the border is directly under the text, not the floated image.

    Here's the code if it helps:

    HTML:
    <div style="border-bottom: 1px solid">
        <h1>Section Title</h1>
            <div style="float: left">
                <a href="/data/a/"><span style="background-image: url('img.png');"></span></a>
                <h3><a href="/data/a/">Title</a></h3>
            </div>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet, nisi in dignissim feugiat, nunc nisl rhoncus mi, vel convallis augue nibh quis tortor.</div>
    </div>
    And this is what it looks like:
    css.PNG

    But this is what I want it to look like:
    css2.PNG

    Please help, it's driving me mad :mad:
     
  2. projectego

    projectego Active Member

    The quickest fix would be:

    HTML:
    <div style="border-bottom: 1px solid">
    	<h1>Section Title</h1>
    	<div style="float: left">
    		<a href="/data/a/"><span style="background-image: url('img.png');"></span></a>
    		<h3><a href="/data/a/">Title</a></h3>
    	</div>
    	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet, nisi in dignissim feugiat, nunc nisl rhoncus mi, vel convallis augue nibh quis tortor.</div>
    	<div style="clear:both"></div>
    </div>
    
    I haven't test it - but I would assume there shouldn't be any complications.
     
    Brogan likes this.
  3. Mike

    Mike XenForo Developer Staff Member

    In general, this is float containment. There are a load of different approaches: http://www.ejeliot.com/blog/59

    We usually use... overflow: hidden; zoom: 1;
    Though it does have some caveats, that you're not likely to run into.

    Effectively, every float containment approach has unexpected side effects and is thus going to cause problems. (This is why adding floats in posts is a challenge.)
     
    Jethro and Brogan like this.
  4. Floris

    Floris Guest

    clear:both on <br /> (or <div) is what I use, and does the trick :)
     
    Brogan likes this.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Thanks guys.

    Your fix worked projectego so thanks for that.

    And thanks for the link Mike, I'll be bookmarking that one.
     
  6. projectego

    projectego Active Member

    No problem at all, Brogan. Happy to be of service. Floris is also correct. Replacing...
    HTML:
    <div style="clear:both"></div>
    ...with...
    HTML:
    <br clear="both" />
    ...would still work, but would not be XHTML Strict valid - if you happen to care about that sort of thing.

    It's just an alternative approach.
     
  7. Floris

    Floris Guest

    By the way, I've tried (for the fun of it) to convert vBulletin's cluttered postbit to xenforo ;)

    [​IMG]

    which is this:

    [​IMG]

    [​IMG]

    which is this:

    [​IMG]

    converting away from tables to divs with floats and containers, without double nesting everything:

    [​IMG]

    first attempt ^ - and then put the vBulletin variables in it

    [​IMG]

    replaced the postbit template with the new html5/css3 code:

    [​IMG]

    So about 25% got done, and looks pretty ok, obviously needs work.

    What did work, and in various browsers, is what we eventually ended up using, as a transition from vb's forum to xenforo, allowing our users to get used to it and give feedback. No negative feedback yet in the last month or so.

    With October 5th a handful of days away, we're not going to bother making a second draft :)

    But yeah .. the floats were a bit of a 'why does it DOoooo THat!!!'


    If people *really* want to use the postbit, the pre-variables version is here:
    http://wetalknation.net/beta/postbit.html - (just dont re-use for commercial ends).
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    I know this is a bit cheeky as it's essentially getting unpaid support from a coding genius :D but where would I use that in the example code Mike?
     
  9. Mike

    Mike XenForo Developer Staff Member

    Stick it on the element that you want to be the container. In this case, what has the border.
     
    Brogan likes this.
  10. Brogan

    Brogan XenForo Moderator Staff Member

    That is a great solution.

    I can just add it to the css class instead as an extra div/markup all throughout the code.

    <high five>
     
  11. Kier

    Kier XenForo Developer Staff Member

    We use overflow: hidden; zoom: 1; extensively in the XenForo CSS.
     
    Forsaken likes this.
  12. Anthony Parsons

    Anthony Parsons Well-Known Member

    That is the same way I learnt as the all round solution, being to turn specific elements into a block and then use overflow: hidden; which eliminates borders or lines travelling the width of the screen and instead become isolated to the block element itself.
     

Share This Page