0

Having problems executing a complex layout with minimal usage of relative and absolute positioning.

Here's my layout:

enter image description here

All my elements are floating left sitting side by side with only a single problem: the border img needs to bleed down into the next row. How can I do that while preventing the elements in the 2nd row (the CTA elements) from scooting down below the lower margin of border img?

This is what happens if I set the height of border img

For clarification:

The dom is such that border img is between main_sidebar and CTA_top_container.

  1. main_side_image
  2. main_heading_container
  3. main_sidebar
  4. border_img
  5. CTA_top_container
  6. CTA_Button_relative

Closing thoughts:

I have some ideas, like floating right the border img as a div (or susy's last) and setting background-image as 60% width and positioned on the left of the div or nesting an absolute positioned img inside of a relative container to nudge it over to the left, but i am afraid of destroying the fluidity of the layout (it's inside of a susy fluid grid).

Any thoughts?

Community
  • 1
  • 1
Andrew
  • 737
  • 2
  • 8
  • 24
  • First thought is Wow! Put a JsFiddle on that bad boy, because its fairly complicated to decipher. – technophobia Jun 04 '15 at 18:15
  • I would love to, but I am not exactly sure how to add external resources. I'm using normalize, sass, and susy. Do you know where I can find their resource links? – Andrew Jun 04 '15 at 18:23
  • Here's them mockup I did through wix. Dunno if that helps you visualize it. http://andrewmcswain.wix.com/intensivaotosite – Andrew Jun 04 '15 at 18:24

1 Answers1

1

If you float the border_img right instead of left (with some right margin to push it off the edge), everything else should be able to flow around it.

You might also want to use a grid with more columns. If you're always having to split columns into fractions, it's not really the right grid for the job.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Thanks again, Eric. I agree about my grid. I'm aware that I'm not using the framework properly. Fixing the grid is on the checklist! – Andrew Jun 04 '15 at 21:41