Float/position problem. Help!

[Deeper]

I’ve run out of solutions and hate to admit it but I need some help. I’m trying to finish off the build of my personal portfolio site.

http://establi.sh/

The content boxes are floated, all the boxes will stay the same height apart from the ‘Blog’ box, this height will differ depending on the amount of content within it. I have the blog archive on a list on the right hand side of the page, if you hover over a post link, using ajax, it brings that blog into the home page. When the ‘blog’ grows and shrinks in height, the 3 boxes underneath move down and up as needed.

The problem is the ‘Intro’ box, how can I make that move up and down in relation to the ‘Blog’ box? At the minute it’s just floated with a big top margin but obviously this doesn’t scale.

I can’t think of a way around it, I did think about absolute positioning the “Intro” box but that would mean putting it on the “Blog” post which would ruin the semantics of it. I presume you could do it with jQuery but want to rely on a CSS solution.

Hoping someone out there can help me, I’ve looked at it way too much now, my brain hurts.

Thanks

[clokey2k]

One thing that has worked in Chromes inspector is to try adding/modifying to:

#intro {

clear:right; //forces it to start below #blog

margin-top: -250px; //appears to be height of #intro

left: -460px; //tweak for preferrence

}

Seems to work, but I do not know how bullet proof it is.

[Deeper]

Thank you, I will try that today, seems like a good solution.

Yeah the archive links move to the bottom when the screens really small in width, I haven’t found a suitable place to put them when it’s half size, I’ve set them to display none at the minute so they don’t clash with the content until I figure out the best solution.

Thanks!

[Deeper]

@clokey2k Your solution worked perfectly, seems so simple now! Thanks

[Author]

Posts