2 Divs side by side, HTML/CSS

Question

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

Notice that the Canvas-controls are in the correct place but the SVG-controls not in the right place and should be in the same line as the canvas-controls.

<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>

score 1 · Accepted Answer · 2021-12-24T20:04:02.427

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;
}

Thanks, I've finally done it. I used the left and right css and inserted the canvas and canvas-controls in it and the svg + svg-controls in the other. Then I used CSS margin-right: 35px on the svg to center it. Thanks again and have a happy new year. — Vagabond, Dec 29 '15 at 04:04

score 1 · Answer 2 · edited Dec 27 '15 at 06:09

Use the bootstrap classes col-xx-# and col-xx-offset-#

So what is happening here is your screen is getting divided into 12 columns. In col-xx-#, # is the number of columns you cover and offset is the number of columns you leave.

For xx, in a general website, md is preferred and if you want your layout to look the same in a mobile device, xs is preferred.

With what I can make of your requirement,

<div class="row">
  <div class="col-md-4">Left side Div</div>
  <div class="col-md-8">Right side DIV </div>
</div

Should do the trick.

score 0 · Answer 3 · answered Dec 27 '15 at 03:22

0

Try adding a CSS:

margin-left: -5px;

to #vect. Example: https://jsfiddle.net/yuxnLtru/

answered Dec 27 '15 at 03:22

kzhao14

2,470
14
21

2 Divs side by side, HTML/CSS

3 Answers3

HTML:

CSS: