Question

I currently have this layout designed and coded:

1. However, I’m unsure of how I would place the “View More, Email Us and the Send Message” buttons/icons to the bottom of the footer so they are inline without creating an alternative div that contains each separately.

   • This is for visual aesthetic purposes, to be adaptable or responsive to the device it is being viewed on, as well as if the user/site owner wanted to add more to the services list or place more in the testimonial area, the “View More, Email Us and the Send Message” buttons/icons would be pushed down to accommodate.

2. How would you go about achieving the “Call Us, Visit Us and Email Us” areas without splitting them into 4 divs/sections (1 container to hold them, 1 call us div, 1 visit us div and 1 email us div). Perhaps a pseudo :before content the icons/images and float left and right somehow? I’m not really too confident if this is right.

3. Am I also lining up the “Services, Testimonials and Quick Contact” areas correctly…float left, float left and float right? Because setting the positions left, right and having the “Testimonials” just center itself, only centers within the container and not between the two columns?

My code looks something similar to this: http://jsfiddle.net/mSmLH/

Any help would be greatly appreciated.

---

I applied:
position: relative to my parent (footer)

position: inherit; and bottom:0; to my View More button
position: absolute; and bottom:0; to both Mail icon and Send Message button which seems to have fixed it. I know that probably needs a little bit more tweaking but thank you for your time and effort @Surreal Dreams

Answer 1

1. To align the items at the bottom of the various patent containers, first ensure that the three container divs are the same height. You can manually adjust the position of those three elements with position: relative and some adjustments to the top and right or left rules.

2. I wouldn’t. Having those three sections in divs is working fine and that’s the straightforward way to do it. You could use tables, but that is the wrong approach to layout. You’re doing this the right way, and it’s working. That’s a good thing™.

3. I typically would float them all left, but two left and one right (or two right and one left) is perfectly legitimate, and more importantly, it works. When it comes to layouts, there are lots of ways to do things. You found one that works – and that’s the most important design feature of all.