Jump to content


Photo
- - - - -

Positioning Elements Correctly within a Content Box


  • Please log in to reply
4 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 17 April 2012 - 04:51 PM

Hi, I am working at positioning 4 separate elements within a Content box. I am part way there having created my 4 CSS elements and having inserted the requisite HTML code. My issue is that I cannot get them to align properly (they need to be in a row horizontally. As you can see I have started to get things aligned:

Please Login or Register to see this Hidden Content

But I do need some coaching (obviously). I could probably make it work. But I am unsure as to how compliant I'd be! Any help will be appreciated (realizing that I may be pushing the boundaries of reasonable technical support.). ^#(^

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 17 April 2012 - 06:55 PM

Okay, I'm unclear which element is which, but if I get this right, you basically want this to be 4 elements side by side in a single row. I realize this is really antiquated, but had you thought about using a table? Is each element wrapped in a different class? Is there a common element to them? As an image, I can't see the source code or CSS behind them.

#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 April 2012 - 12:06 AM

@rangelone: Yes you are correct. The first 2 elements are images, the 3rd is text, and the last is an image. I thought of a table but decided against it. Each element has already been assigned a class. If you go to the site URL , you will see the area outlined in the screenie I posted. I have already inserted the HTML for the elements. You will see that they are not aligned properly. You will also see that I am "armed and dangerous" when it comes to CSS - LOL. :-) PS Food Expert? Tell me more!

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 April 2012 - 02:34 AM

I think you can try using DIV layers (aligned in 4 columns using CSS) to position the 4 elements the way you want. This tutorial explains the general idea (except with 3 columns) but it can be adapted to include 4 columns:

Please Login or Register to see this Hidden Content



#5 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 April 2012 - 11:23 AM

Thanks @catrina & @rangelone! I will give this a whirl later today. You guys really are awesome.