Question

A lot of times when I design I thinking about the question:

Which html elements should be wrapped with div and in which cases?
(<img>,<input>,<textarea>,<form>, <ul>, etc..)

---

Example A- input text:

---

option1 without div:

<input class="input-wrapper" type="text" />

option2 with div around input:

<div class="input-wrapper"><input type="text" /></div>

---

Example B- img:

---

option1 without div:

<img class="image-wrapper" src="MyPic.jpg" alt="my pic" />

option2 with div around input:

<div class="image-wrapper"><img src="MyPic.jpg" alt="my pic" /></div>

---

---

Edit:

I talking about cases that as designer and programmer we have time to do best way with use of position: relative absolute, float and without <br/> etc..

Thanks

Answer 1

Lot of times, you use the div to wrap around other elements mostly for layout purposes. There is no rule which says you should not wrap div’s around elements or not. Echoing wb’s answer over here may be most of the time you can achieve the same result with applying the styles to the particular elements itself.

Me when started with css, used a lot of div’s as a wrapper, although they where not useful. But it took some time to get used to get the proper layout with appropriate tags and styles.

Some links might be useful reads

http://www.apaddedcell.com/div-itis#

http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/