CODEWITHSUNDEEP
htmlsvg
A_user
A_user

Reputation: 2157

how to make two inser svg elements side by side in a bigger div

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

Upvotes: 1

Views: 10299

Answers (2)

Shovan
Shovan

Reputation: 21

You can add float inside svg tag

<html>
<head></head>
<body>
 <div>
  <div>
    <svg width = "1000px" height = "400px" style="float:right"> 
    </svg>
  </div >
  <div>
    <svg width = "300px" height = "400px" style="float:right"> 
    </svg>
  </div>
 </div>
</body>
</html>

Read more here

Upvotes: 0

SomeKittens
SomeKittens

Reputation: 39532

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.

Upvotes: 2

Related Questions