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?
+1
A:
.myDiv { height: 150px; width 150px; }
<div class="mainDiv">
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
</div>
Jason
2009-12-30 02:34:21
If he's asking this question, he might want a bit more detail. You can do it with `<div style="width:150px;height:150px"></div>` right in the HTML (not recommended) or do what Jason said but you have to give your div a class, like `<div class="myDiv">`...
Mark
2009-12-30 02:36:27
i'm answering the question the OP asked.
Jason
2009-12-30 02:37:58
LOL yes Jason did answer it and all i needed to know was height exist and does apply to div's
acidzombie24
2009-12-30 02:48:06
...so why didn't you pick my answer as the one that answered your question? or even vote it up? lol...?
Jason
2009-12-30 02:55:20
A:
You can set the height and width of your divs with css.
<style type="text/css">
#box {
height = 150px;
width = 150px;
}
</style>
Is that what you're looking for?
mc6688
2009-12-30 02:35:18
+3
A:
The following will place three cubes per row within a larger container.
.container { width:450px; }
.cube { width:150px; height:150px; float:left; overflow:hidden; }
.clear { clear:both; }
<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="clear"></div>
</div>
Jonathan Sampson
2009-12-30 02:36:17
no, worse! any time you use a clearing element it's awful code bloat. learn how to clear floats!
Jason
2009-12-30 02:38:39
Oh goodness... This hardly counts as "code bloat." You're just being dramatic now ;)
Jonathan Sampson
2009-12-30 02:39:28
no i'm serious.. it's one of my developer pet peeves. what happens if you change your stylesheet and your "cubes" are no longer floated? now you have a random "clear" div that does nothing. this is the same as creating a div class called "redLeftColumn"
Jason
2009-12-30 02:42:13
+1
A:
<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; }
Switz
2009-12-30 02:36:32
A:
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>
Ralph The Mouf
2009-12-30 17:00:33
here is the example code: <div id="maindiv"> <div id="myDiv" style="width:150px; height:150px;"> </div></div>
Ralph The Mouf
2009-12-30 17:09:34
doesn't mean it doesn't work. if you are a total newbie (and since this question doesn't seem to have any knowledge of css, they might be), this is a viable temporary option while just learning html.
johnnietheblack
2009-12-30 17:13:16
It also can be a handy tactic if you want to customize a div that is in a class, but don't want to effect other divs that are in that class. 1990's or logical and crafty to an extent?
Ralph The Mouf
2009-12-30 17:14:32
Probably the best way to customize a classed div would to add an id in the class:<div id="custom" class="mydiv"> that way you can specify the customizations you want in the id and that will over ride what you don't want from the class. The hard coding would be good if you don't know about css I suppose.
Ralph The Mouf
2009-12-30 17:31:30
+1
A:
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>
Midas
2009-12-30 17:22:43