Home/ Questions/Q 8173785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T22:17:03+00:00

Hello all I am working on html and javascript.And I am going to ask

  • 0

Hello all I am working on html and javascript.And I am going to ask a very basic question. I have written a simple code tried different thing.But unable to make it work my bad.
What I want to do is that I have a div which has two inner divs.Both inner divs has an svg element inside equal to the size of div.and I want both inner divs to be side by side.But my divs are not equal Ist div is big second is small in width.

<html>
<head></head>
<body>
 <div position:relative; width = "100%"; height = "400px" float:left>
  <div width = "1000px" height = "400px"; float:left>
    <svg width = "1000px" height = "400px"> 
    </svg>
  </div >
  <div width = "300px" height = "400px"float:left>
    <svg width = "300px" height = "400px"> 
    </svg>
  </div>
 </div>
</body>
</html>

How can I achieve this.
Also should i write height and width with both div and svg or it fine to use with only one

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want the divs to be equal in width, you’ll need to set their width value to be equal. There are two ways of doing this. First, you could manually set the width:

    <html>
<head></head>
<body>
 <div position:relative; width = "100%" height = "400px">
  <div width = "1000px" height = "400px" style="float:left">
    <svg width = "1000px" height = "400px"> 
    </svg>
  </div >
  <div width = "1000px" height = "400px" style="float:right">
    <svg width = "1000px" height = "400px"> 
    </svg>
  </div>
 </div>
</body>
</html>

    Or, you could just use percentages:

    <html>
<head></head>
<body>
 <div position:relative; width = "100%"; height = "400px">
  <div width = "50%" height = "400px" style="float:left">
    <svg width = "100%" height = "400px"> 
    </svg>
  </div >
  <div width = "50%" height = "400px" style="float:right">
    <svg width = "100%" height = "400px"> 
    </svg>
  </div>
 </div>
</body>
</html>

    In both cases, if you want the divs to be side-by-side, one needs to be float:right and the other float:left. There are other ways of accomplishing this but floats are simple.

    • 0