1

I'm building a responsive layout that has boxes in a grid at a certain screen size.

This is what it looks like:

enter image description here

What I'm trying to do is add some top margin to box 3 to push it down to produce the desired effect:

enter image description here

  • I don't want to apply a class to box 3
  • I can't increase the width of the heading across because it resides in the box 4 container
  • I wish I could target "the element before" with CSS but that doesn't seem possible
  • The boxes are currently floated, and I can't use inline-block due to responsive spacing issues
Community
  • 1
  • 1
Alec Rust
  • 10,532
  • 12
  • 48
  • 63
  • If these are floated boxes, why don't you try to add another
    between 1 & 3
     – Prasanna Sep 14 '12 at 11:44
  • You could simply add annother heading tag above box number 3 and place a non-breaking space in it i.e.   – Billy Moat Sep 14 '12 at 11:57
  • @Prasanna an empty `
    ` the height of the heading? That would increase complexity of the responsive design and muddy the markup (although granted, not too bad). @BillyMoat that would seriously muddy the markup, with an empty heading element. Also as the responsive design changes this would remain. They're all on one row on larger screens.
     – Alec Rust Sep 14 '12 at 12:46
  • Simply adding `clear: both` to the heading element may do the trick. – techfoobar Sep 14 '12 at 13:10
  • The heading element is inside the box. – A.M.K Sep 14 '12 at 13:13
  • There is no CSS solution to this problem since you can't use `inline-block` and there is no baseline align for block elements. But, you can do this pretty easily using jQuery. (or plain old JS but it's harder) – A.M.K Sep 14 '12 at 13:14
  • I understand I can solve this with jQuery's `.prev()` but I'm looking for a CSS solution. Doesn't seem like it should be too difficult to achieve! – Alec Rust Sep 14 '12 at 13:27
  • 1
    Actually, in "CSS4" (in quotes because [there will never be one](http://www.xanthir.com/b4Ko0)) you would be able to because there are/will be parent and previous sibling selectors. – A.M.K Sep 14 '12 at 14:12

2 Answers2

1

This cannot be done using pure CSS with the restrictions that you have. However, you can do it using jQuery:

Demo: http://jsfiddle.net/SO_AMK/DKkLh/

jQuery: 

$("section").each(function() {
    if ($(this).children("h1").length > 0) {
        $(this).prev().css("margin-top", ($(this).children("h1").height() + 5));
        // +5 for the margin on sections
    }
});​
A.M.K
  • 16,727
  • 4
  • 32
  • 64
  • I understand I can solve this with jQuery's .prev() but I'm looking for a CSS solution. Doesn't seem like it should be too difficult to achieve! – Alec Rust Sep 14 '12 at 13:28
  • There isn't a baseline align for block elements, but if your `h1` was outside of the box or if you could use `inline-block` then it would be possible. – A.M.K Sep 14 '12 at 13:29
0

Put heading and div no4 in the same div/section and you will get the desired effect. Here is the jfiddle. Is that what you want to achieve?

hjuster
  • 3,985
  • 9
  • 34
  • 51
  • The heading is already in the box 4 container, as explained in question.Your fiddle seems to show the same problem on the other side. Second image is what I'm trying to achieve. – Alec Rust Sep 14 '12 at 12:47
  • There you go... http://jsfiddle.net/Yx6mg/3/ Use display:inline-block instead of float. – hjuster Sep 14 '12 at 13:02
  • Thanks for that. Unfortunately I can't use `inline-block` for other responsive spacing issues ([info](http://css-tricks.com/fighting-the-space-between-inline-block-elements/)). – Alec Rust Sep 14 '12 at 13:08