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

CSS help wanted

Brogan

XenForo moderator
Staff member
#1
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:
 

projectego

Active member
#2
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.
 

Mike

XenForo developer
Staff member
#3
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.)
 

Brogan

XenForo moderator
Staff member
#5
Thanks guys.

Your fix worked projectego so thanks for that.

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

projectego

Active member
#6
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.
 
F

Floris

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



which is this:





which is this:



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



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



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



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

Brogan

XenForo moderator
Staff member
#10
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>
 

Anthony Parsons

Well-known member
#12
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.