CODEWITHSUNDEEP
html
user34537
user34537

Reputation:

Fixed size div?

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?

Upvotes: 17

Views: 127838

Answers (6)

Sampson
Sampson

Reputation: 268364

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.

Upvotes: 21

mscccc
mscccc

Reputation: 2275

You can set the height and width of your divs with css. 

<style type="text/css">
.box {
     height: 150px;
     width: 150px;
}
</style>

Is this what you're looking for?

Upvotes: 0

Midas
Midas

Reputation: 7131

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 }

<div class="container">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>

Upvotes: 5

Ralph The Mouf
Ralph The Mouf

Reputation: 1007

You can also hard code in the dimensions in your html code as opposed to putting the desired dimensions in a style sheet

<div id="mainDiv">
    <div id="mydiv" style="height:150px; width:150px;">
    </div>
</div>

Upvotes: 11

switz
switz

Reputation: 25188

<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>

css:

.smallDiv { height: 150px; width: 150px; }

Upvotes: 0

Jason
Jason

Reputation: 52533

.myDiv { height: 150px; width 150px; }

<div class="mainDiv">
   <div class="myDiv"></div>
   <div class="myDiv"></div>
   <div class="myDiv"></div>
</div>

Upvotes: 1

Related Questions