CSS help wanted

Paul B

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.webp


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


Please help, it's driving me mad :mad:
 
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.
 
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.)
 
Thanks guys.

Your fix worked projectego so thanks for that.

And thanks for the link Mike, I'll be bookmarking that one.
 
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.
 
By the way, I've tried (for the fun of it) to convert vBulletin's cluttered postbit to xenforo ;)

wtn_postbit_old.png


which is this:

wtn_postbit_old_example.png


wtn_postbit_new.png


which is this:

wtn_postbit_new_example.png


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

Screen%20shot%202010-08-06%20at%205.24.54%20PM.png


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

Screen%20shot%202010-08-06%20at%205.21.03%20PM.png


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

Screen%20shot%202010-08-06%20at%205.18.15%20PM.png


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).
 
Stick it on the element that you want to be the container. In this case, what has the border.
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>
 
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.
 
Top Bottom