Solved

Render SVG elements in Grid Layout

Posted on 2014-01-21
3
644 Views
Last Modified: 2014-01-21
Attached I have a simple HTML file that renders 6 charts all SVG elements.  Currently, they all are rendered in a single column centered in the middle of the body.  I'd like to render them in a grid style layout - 2 rows, 3 in each row.  

Any help would be greatly appreciated!  Thanks for the time! :)
index.html
0
Comment
Question by:cbrune
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39797869
The svg elements created are 800px wide. To get three side by side you need to increase the body width to 2400px.

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 2400px;
}

Then you can just float the svg elements left and they will automatically go to the second row after the first three.

svg {
  font: 15px sans-serif;
  fill:#bdc3c7;
  float: left
}
0
 

Author Closing Comment

by:cbrune
ID: 39798414
Brilliant!  Thank you for the help! :)
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39798420
You're welcome. Thanks for the points.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to count occurrences of each item in an array.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question