How do I make divs of 150x150 squares along the screen

Question

*and to start new rows as they fill each previous row?
this should work but doesnt for me,
html:

<div id="squares">
<div id="1">
width:150px;
height:150px;
</div>
<div id="2">
width:150px;
height:150px;
</div>
<div id="3">
width:150px;
height:150px;
</div>  
</div>

so this established 3 boxes on the page

css:

#squares {
display:inline;
background-color:#000000;
}

The css should tell them to line up and be black, so that we can see them, to guage if they are in the right place or not.
Do I need to add anything? Can you think of any different methods of achieving this outcome?

There's a lot wrong with that code. Your width and height assignments are content of the `
` elements, not styles applied to them. Your CSS rule targets the container, not the `
`s within. `inline` elements don't accept widths and heights. — jackwanders, Aug 08 '12 at 19:20
You can do it without javascript as below answer div {float:left;} — Santiago Rebella, Aug 09 '12 at 08:54

score 6 · Answer 1 · answered Aug 08 '12 at 19:24

HTML

<div id="squares">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

CSS

#squares div {
    /* these styles will let the divs line up next to each other
       while accepting dimensions */
    display: block;
    float: left;

    width: 150px;
    height: 150px;
    background: black;

    /* a small margin to separate the blocks */
    margin-right: 5px;
}

An alternative to using float would be to use inline-block styling:

display: inline-block;
zoom: 1;
*display: inline;

Frank Orellana · Answer 2 · 2012-08-08T19:42:20.847

1

You are missing a div statement to indicate that it must apply to the divs inside the div with id "squares":

css:
#squares div {
display:inline;
background-color:#000000;
}

edited Aug 08 '12 at 19:42

answered Aug 08 '12 at 19:22

Frank Orellana

1,820
1
22
29

skoubin · Answer 3 · 2012-08-08T20:23:45.793

The best approach is with display: inline-block;

HTML

<div id="squares">
<div id="1" class="square">
</div><div id="2" class="square">
</div><div id="3" class="square">
</div>
</div>

Please notice how HTML markup has been formated, it's important to avoid getting additional margin between elements while using display inline-block (check this)

CSS:

.square {
background-color: #000;
display: inline-block;
height: 150px;
vertical-align: top;
width: 150px;
*display: inline;
zoom: 1;
}

for developer purpose you can add: CSS:

.square {outline: 1px solid red;}

so you can see their dimension without breaking the layout (by extending natural width of the element)

score 0 · Answer 4 · answered Aug 08 '12 at 19:20

0

i think you are missing;

div {float:left;}

answered Aug 08 '12 at 19:20

Santiago Rebella

2,399
2
22
29

score 0 · Answer 5 · answered Aug 08 '12 at 19:27

If I understand correctly you want each div #1 #2 and #3 to be 150px width and height to all be in a row, in this case

You want to target each div not the main one, like so

#squares > div {
    display:block;
    float:left;
    width:150px;
    height:150px;
    background-color:#000000;
    margin-right:5px;
}

How do I make divs of 150x150 squares along the screen

5 Answers5