Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mason Reno
Mason Reno
1,988 Points

Need some help with some Div Positioning

Here is my Photoshop Mock up.

http://i.imgur.com/UWerMpo.png

I am having a few issues. For one, I don't know how to create the Divs to fit like they do on the mock up and I am trying desperately to get it right. I think I am on the right track here, but I am struggling to get it right. For instance, I don't understand why the text spills under the Div. http://jsfiddle.net/qLTMf/1534/

Secondly, I do not know how to get a full width background in Joomla. I tried using position:absolute; left:0; right:0; margin:10px; overflow:auto; But the Div covers the div below it. I know this has something to do with Z-Index but because I am working within a Joomla Template I am having trouble pulling this off.

1 Answer

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I noticed a few issues with your CSS:

  • Re-used an id
  • Missing semi-colons
  • Using Overflow instead of floating left
  • Setting height on the left & right divs instead of just on the parent box div
  • Right2 & left2 classes isn't very DRY
  • A <br> tag for positioning (instead of semantic value)

Check out this excellent tutorial on learnlayout.com to learn more about CSS positioning.

I made a codepen based off of your code that might get you pointed in the right direction.