Issue
I've been trying to set 2 divs side by side without using a html table. I have tried CSS display:inline, float, margins and padding combinations but still couldn't get the desired effect.
The code is 2screens one Canvas and one SVG with the controls for each one bellow.
The image is the closest I could get :3
<style>
.etiq1{font-family:verdana; font-size:15px;}
#screen, #vect{border: 1px solid #000000;background-color:#0000FF;}
#pR, #pG,{font-family:arial; font-size:15px; text-align:right;}
#cR, #cG,{width:100px;}
#ctrlsSVG{margin-left:505px;}
</style>
<script>
var screen,paint,vect,pR,pG;
function inicGraf(){
screen = document.getElementById("screen");
vect = document.getElementById("vect");
paint = screen.getContext("2d");
pR=document.getElementById("pR");
pG=document.getElementById("pG");
}
</script>
</head>
<body>
<canvas id="screen" width="500" height="500"></canvas>
<svg id="vect" width="500" height="500"></svg>
<div id="ctrlsCanvas">
<span class="etiq1">CANVAS: click to alternate pattern.</span>
<br />
<span class="etiq1">Modulation (1-30):</span>
<input id="pR" size="1" value="4" min="1" max="30" />
<input id="cR" type="range" value="4" min="1" max="30" step="1"/><span class="etiq1">(auto-renew)</span>
<div/>
<div id="ctrlsSVG">
<span class="etiq1">SVG: click to alternate pattern.</span>
<br />
<span class="etiq1">Modulation (1-10):</span>
<input id="pG" size="1" value="4" min="1" max="10" />
<input id="cG" type="range" value="4" min="1" max="10" step="1" />
<button><span class="etiq1">renew</span></button>
<div/>
<script>
inicGraf();
</script>
</body>
Solution
I will show you an example of divs side by side using HTML/CSS.
Here is the HTML:
<div id="sides">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
And here is the CSS:
#sides {
margin: 0;
}
#left {
float: left;
width: 75%;
overflow: hidden;
}
#right {
float: left;
width: 25%;
overflow: hidden;
}
So if i implement this code in yours:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="ctrlsCanvas">
<span class="etiq1">CANVAS: click to alternate pattern.</span><br>
<span class="etiq1">Modulation (1-30):</span> <input id="pR" max=
"30" min="1" size="1" value="4"> <input id="cR" max="30" min="1"
step="1" type="range" value="4"><span class=
"etiq1">(auto-renew)</span>
<div></div>
<div id="ctrlsSVG">
<span class="etiq1">SVG: click to alternate pattern.</span><br>
<span class="etiq1">Modulation (1-10):</span> <input id="pG"
max="10" min="1" size="1" value="4"> <input id="cG" max="10"
min="1" step="1" type="range" value="4"> <button><span class=
"etiq1">renew</span></button>
<div></div>
</div>
</div>
</div>
</body>
</html>
CSS:
#wrapper {
margin: 0;
}
#left {
float: left;
width: 75%;
overflow: hidden;
}
#right {
float: left;
width: 25%;
overflow: hidden;
}
Answered By - user5613751
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.