how to align divs when multiple divs are disturbing its alignment
Question
I have been trying to line up several divs in a row. I have 8 divs next to each other, but when I try to allign the 2nd row, I can only fit one div in. I need help
Here is my code:
<!DOCTYPE html>
<html lang="en">
<body bgcolor="H70D4R334">
<title>Ordinate</title>
<head>
<style text/css>
#div1{
float:left;
width:50px;
height:50px;
margin-top:50px;
margin-right:500px;
margin-left:400px;
border:0px solid blue;
}
#div2{
float:left;
width:50px;
height:50px;
margin-top:50px;
margin-right:50px;
border:0px solid blue;
}
#div3{
float:left;
width:50px;
height:50px;
margin-top:300px;
margin-right:5px;
border:0px solid green;
}
#div4{
float:left;
width:50px;
height:50px;
margin-top:300px;
margin-left:5px;
border:0px solid green;
}
#div5{
float:left;
width:50px;
height:50px;
margin-top:300px;
margin-left:5px;
border:0px solid green;
}
#div6{
float:left;
width:50px;
height:50px;
margin-top:300px;
margin-left:5px;
border:0px solid green;
}
#div7{
float:left;
width:50px;
height:50px;
margin-top:300px;
margin-left:5px;
border:0px solid green;
}
#div8{
float:left;
width:50px;
height:50px;
margin-top:300px;
margin-left:5px;
border:0px solid green;
}
#div10{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:400px;
border:1px solid green;
}
#div11{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:5px;
border:1px solid green;
}
#div12{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:5px;
border:1px solid green;
}
#div13{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:5px;
border:1px solid green;
}
#div14{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:5px;
border:1px solid green;
}
#div15{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:5px;
border:1px solid green;
}
#div16{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:5px;
border:1px solid green;
}
#div17{
float:left;
width:50px;
height:50px;
margin-top:100px;
margin-left:5px;
border:1px solid green;
}
#Button{
float:center;
width:200px;
height:50px;
margin:25px;
}
</style>
<script>
var dragSrcEl = null;
var draggSrcID = null;
function dragStart(ev) {
draggSrcID = ev.target.id;
dragSrcEl = ev.target;
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData('text/html', ev.target.outerHTML);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.target.appendChild(document.getElementById(draggSrcID));
ev.preventDefault();
}
function swapDrop(ev) {
if (ev.stopPropagation) {
ev.stopPropagation(); // Stops some browsers from redirecting.
}
// Don't do anything if dropping the same image we're dragging.
if (dragSrcEl != ev.target) {
// Set the source image to the HTML of the image we're dropping on.
srcEl = document.getElementById(draggSrcID);
srcEl.outerHTML = ev.target.outerHTML;
ev.target.outerHTML = ev.dataTransfer.getData('text/html');
}
ev.preventDefault();
}
</script>
</head>
<body>
<center><font size="10">Ordinate</font></center>
<div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div1" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="D" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=D&w=50&h=50" draggable="true" ondragstart="dragStart(event)" />
</div>
<div id="div2" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="E" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=E&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="div3" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="I" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=I&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="div4" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="T" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=T&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="div5" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="A" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=A&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="div6" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="N" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=N&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="div7" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="O" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=O&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="div8" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
<img id="R" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=R&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
</div>
<center><input id="Button" type="submit" value="Click me to check" onclick="HitEnter()"></center>
<script>
word = "ordinate"
function HitEnter() {
for (i = 10, str = ""; i <= 17; i++) {
if (document.getElementById("div" + i).childNodes.length > 1) {
str += document.getElementById("div" + i).childNodes[1].id
}
}
if (str.toLowerCase() == word) {
alert("Good job!!!")
}
else {
alert('You got the word incorrect! Please try again.')
}
}
</script>
</body>
</html>
I am a beginner at css, js, and html. I will appreciate any help I can get. Thank You!
1 answers
solution1
1 ACCPTED 2016-01-15 14:18:56
You have set following attributes for you div with the id 1
margin-right: 500px;
margin-left: 400px;
therefore it's positioned 400 px away from left border. Since you also have margin right set, the next element to it's right is set 500px away. This is why your rows break.
Edit:
how to fix it: Remove all
margin-right
from your second row and add
margin-left: 5px
to have it the same as the other row
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to center a div and keep the alignment to its nested floating divs?
How to align divs horizontally?
How to align divs in a DOM
Align multiple divs created with javascript
how to align divs in a horizontal format?
how to organize events when multiple divs overlap
How to fix divs alignment using Bootstrap
How to wrap multiple divs
How to align inner divs in centre or bottom based on %
How can I horizontally align these divs in the centre?
Related Tags