Fixed size div

Question

I want a normal div for the body of my text and a bunch of little divs that are exactly 150px by 150px  How might i do this

User · Answer

lt div id  normal gt text   lt  div gt   lt div id  small1  class  smallDiv  gt  lt  div gt   lt div id  small2  class  smallDiv  gt  lt  div gt   lt div id  small3  class  smallDiv  gt  lt  div gt    css    smallDiv   height  150px  width  150px

User · Answer

You can set the height and width of your divs with css     lt style type  text css  gt   box        height  150px       width  150px     lt  style gt     Is this what you re looking for

User · Answer

As reply to Jonathan Sampson  this is the best way to do it  without a clearing div    container   width 450px  overflow hidden    cube   width 150px  height 150px  float left     lt div class  container  gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt       lt div class  cube  gt  lt  div gt   lt  div gt

User · Answer

myDiv   height  150px  width 150px      lt div class  mainDiv  gt      lt div class  myDiv  gt  lt  div gt      lt div class  myDiv  gt  lt  div gt      lt div class  myDiv  gt  lt  div gt   lt  div gt

User · Answer

This is a fairly trivial effect to accomplish  One way to achieve this is to simply place floated div elements within a common parent container  and set their width and height  In order to clear the floated elements  we set the overflow property of the parent    lt div class  container  gt       lt div class  cube  gt do lt  div gt       lt div class  cube  gt ray lt  div gt       lt div class  cube  gt me lt  div gt       lt div class  cube  gt fa lt  div gt       lt div class  cube  gt so lt  div gt       lt div class  cube  gt la lt  div gt       lt div class  cube  gt te lt  div gt       lt div class  cube  gt do lt  div gt   lt  div gt    The CSS resembles the strategy outlined in the first paragraph above    container       width  450px      overflow  auto      cube       float  left      width  150px       height  150px      You can see the end result here  http   jsfiddle net Qjum2 2   Browsers that support pseudo elements provide an alternative way to clear    container  after       content          clear  both      display  block      You can see the results here  http   jsfiddle net Qjum2 3   I hope this helps

User · Answer

You can also hard code in the dimensions in your html code as opposed to putting the desired dimensions in a style sheet   lt div id  mainDiv  gt       lt div id  mydiv  style  height 150px  width 150px   gt       lt  div gt   lt  div gt

[html] Fixed size div?

Examples related to html