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

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.

<div class="container">
    <div class="cube">do</div>
    <div class="cube">ray</div>
    <div class="cube">me</div>
    <div class="cube">fa</div>
    <div class="cube">so</div>
    <div class="cube">la</div>
    <div class="cube">te</div>
    <div class="cube">do</div>
</div>

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

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

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

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

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

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

[html] Fixed size div?

Examples related to html