0

I'm currently working on a site with this design and layout for my main-content area: http://img528.imageshack.us/img528/9483/screenshot20120429at124.png

However, I'm finding it a little difficult to write up the HTML and CSS using proper semantics.
Firstly, should I be using divs to split the left and right columns, or, HTML5 section tags with an aside tag for the picture?

Secondly, what is the best way to position each section or area?

And finally, with that being said, at the bottom of each content area there are 2 buttons that should be horizontally inline. What is the best way to go about achieving this considering the fact the the user of the site will later on be placing in their own text and both buttons should push or position themselves further down as more text is placed inside.

This jsfiddle is currently what's making it work...but, seems wrong? http://jsfiddle.net/LGEKW/

Should those 2 buttons be in that current div, do I use position absolute, relative or floats … I have no idea. Any help on how you would go about doing this would be greatly appreciated.

Improve this question
3
  • Your 2 buttons should be at the end of their respective columns in the HTML code. If you want them horizontally aligned, then it's more complicated. They should then be absolutely positioned relative to #maincontent at the bottom and superposition of text can be avoided by sufficient padding-bottom on the latter. Buttons will display in the "padding zone". Commented Apr 29, 2012 at 9:29
  • (cont) if both columns weren't floats but display: table-cell; vertical-align: top; (and display: table; table-layout:fixed on #maincontent) then those buttons could easily be placed at the bottom with absolute positioning relative to their column and not relative to some ancestor. But this value of display is compatible with IE8+ and you're stuck with other methods or polyfills for IE7- Commented Apr 29, 2012 at 9:33
  • Thank you for your quick response Felipe. Could you please demonstrate this within a jsfiddle. I'll understand if it's a bit much to ask. Commented Apr 29, 2012 at 9:52

1 Answer 1

Reset to default
2
  1. If you are using <!doctype html> it's definitely better to use semantic tags, because divs have NO semantic meaning at all.
  2. To my mind the best way to position the elements is to use float property
  3. The buttons should be floated as well. Not absolutely positioned. Thus they will be pushed down when the user adds more content. Try placing them after the content in the same wrapper
  4. Drop your br tags after each paragraph. p elements are block-level - so you can use margin-bottom property to push the next p down a bit
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for responding so quick skip405. I'll use the <section> tags to divide the areas, floating each left and right, and an <aside> tag for the picture. An additional div below that will contain the the two buttons that will bump down with more text placed within each section. I have placed the necessary css to my paragraphs as you suggested.
I would also recommend to avoid applying display: inline-block and float property at the same time. Because floats become block level automatically. Advise you to delete the display property as it's not applied.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.