CSS HTML Semantics and Positioning
Question
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.
1 answers
solution1
2 2012-04-29 09:09:37
- If you are using
<!doctype html>it's definitely better to use semantic tags, becausedivshave NO semantic meaning at all. - To my mind the best way to position the elements is to use
floatproperty - 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 - Drop your
brtags after each paragraph.pelements are block-level - so you can usemargin-bottomproperty to push the nextpdown a bit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.