Solved

Render SVG elements in Grid Layout

Posted on 2014-01-21
3
655 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

636 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