0

I have two SVGs I want side-by-side within its container:

HTML

<div id="container">
  <svg viewBox="100 185 275 655"></svg>
  <svg viewBox="100 185 275 655"></svg>
</div>
<br>
<div id="anotherdiv">Another div</div>

CSS

#container{width:100%;}
svg{width:50%;float:left;}

As of now, the div with id anotherdiv will spawn on the exact same place where the container starts. It looks like the container does not care about the height both SVGs bring with them. How can I solve this? Thanks!

DarkSuniuM
  • 2,523
  • 2
  • 26
  • 43
DTestA
  • 3
  • 3

1 Answers1

0

You have to clear floated elements. Example:

#container {
  width: 100%;
}

svg {
  width: 50%;
  float: left;
}

#anotherdiv {
  background: red;
  clear: both;
}
<div id="container">
  <svg viewBox="100 185 275 655"></svg>
  <svg viewBox="100 185 275 655"></svg>
</div>
<br>
<div id="anotherdiv">Another div</div>
pretzelhammer
  • 13,874
  • 15
  • 47
  • 98
  • Thank you, but do I really have to clear all divs surrounding or underneath the container div? It seems so excessive. – DTestA Oct 14 '18 at 21:40
  • That's why floating elements has gone out of style years ago. They're a nightmare to deal with. You can easily get rid of the problem by removing the float style from your SVGs as well. It's not doing anything here for you anyway. – pretzelhammer Oct 14 '18 at 21:49
  • Yepp. display: inline-block does the job –  Oct 14 '18 at 21:57
  • I see, but it appears display:inline-block has a different effect on SVG elements than it has on regular elements. It works if I don't make the widths 50% (two times). It does work if I make them 48%. I'm looking for why. Thanks to you both for the help. – DTestA Oct 14 '18 at 22:08