Menu
I'm programming a tic-tac-toe game and having trouble stacking my game tiles vertically to be 3x3 box.
As it stands, they are 9 horizontal boxes in a row, but when I use {clear: left;} It just turns them into 9 vertical boxes.
Here's my code so far:
<style type="text/css">
#div1 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
#div2 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
#div3 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
<body>
<p>Drag the X and O images into the tic-tac-toe board:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
841
Firstly, select the div and set the height, width, and border. Use the display property and set the value to table . It will make the div act like a table. Then, select the span and set the display property to table-cell and the vertical-align property to middle .
Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
To align div horizontally, one solution is to use css float property. But a better solution is to to use CSS display:inline-block on all divs which needs to be aligned horizontally and place them in some container div.
http://jsfiddle.net/justjavac/9s8CX/
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
CSS
#div1 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
clear: left;
}
#div2 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left; // <---- HERE
}
#div3 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
Why not just create a parent element, such as #parent, and set a defined width on it? Doing this, you don't have to change the position of the elements in the DOM.
jsFiddle example
#parent {
width: 306px;
margin: 0px auto;
}
Alternatively, you could also create row elements, as parents of each of the 3 child elements, and set display:block. In doing so, you could have to set an explicit width on the parent.. works well for dynamic content, or responsive design..
On a random note, I thought it would be cool to add something like:
#parent:hover > div:not(:hover){
background:black;
}
Basically, this sets the background-color of the children elements to black when hovering over the parent. However, when hovering over the child, it specifically isn't applied.. try hovering over the tiles.
jsFiddle example
3
First off, make sure you close your style tag.
You don't need to repeat your styles for each row (since it is exactly the same for div1, div2 and div3), instead change the ID to a class because IDs are intended for a single element.
To create rows you will need to place the 3 DIVs you want in a row inside another DIV with the position:relative attribute.
CSS:
.mydiv {
wclassth: 80px;
height: 80px;
padding: 10px;
border: 1px solclass #aaaaaa;
float:left;
}
.myrow {
position:relative;
}
HTML:
<div class="myrow">
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="myrow">
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="myrow">
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
http://jsfiddle.net/J2Qjb/
Please note that I added a background color to the mydiv class on the JSFiddle so that it would be visible.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
