{"action":"created","issue":{"url":"https://api.github.com/repos/basscss/basscss/issues/160","labels_url":"https://api.github.com/repos/basscss/basscss/issues/160/labels{/name}","comments_url":"https://api.github.com/repos/basscss/basscss/issues/160/comments","events_url":"https://api.github.com/repos/basscss/basscss/issues/160/events","html_url":"https://github.com/basscss/basscss/issues/160","id":129464295,"number":160,"title":"Positioning an image or figure in left faux column","user":{"login":"RickCogley","id":512328,"avatar_url":"https://avatars.githubusercontent.com/u/512328?v=3","gravatar_id":"","url":"https://api.github.com/users/RickCogley","html_url":"https://github.com/RickCogley","followers_url":"https://api.github.com/users/RickCogley/followers","following_url":"https://api.github.com/users/RickCogley/following{/other_user}","gists_url":"https://api.github.com/users/RickCogley/gists{/gist_id}","starred_url":"https://api.github.com/users/RickCogley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RickCogley/subscriptions","organizations_url":"https://api.github.com/users/RickCogley/orgs","repos_url":"https://api.github.com/users/RickCogley/repos","events_url":"https://api.github.com/users/RickCogley/events{/privacy}","received_events_url":"https://api.github.com/users/RickCogley/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-01-28T14:15:55Z","updated_at":"2016-01-29T13:28:30Z","closed_at":null,"body":"Hello - thank you for basscss (\"basis\"?). I've been using it to learn more about css, and to also get used to a npm / gulp workflow. \r\n\r\nPerhaps this is easy to do given existing classes, but, please let me ask: \r\n\r\nI'd like to put my blog articles in a single column, set up so there is a large-ish left margin. In that margin, instead of a typical sidebar, I want to put all images and figures, so the text is not broken up so much. \r\n\r\nThere's a `<section>` in the bassplate template index, showing Typography, structured like: \r\n\r\n```\r\n<div class=\"sm-flex mxn2\">\r\n  <div class=\"sm-col-5 px2\">\r\n     <h1 class=\"mt0\">Hamburger 1</h1>\r\n     <h2>etc etc...\r\n  </div>\r\n  <div class=\"sm-col-7 px2\">\r\n    <p>Content, content, content</p>\r\n```\r\n\r\nThis seems to be close to what I need. Within the paragraphs of the ``sm-col-7`` div, I can put a: \r\n\r\n```\r\n<div style=\"position:relative;\">\r\n  <img src=\"img/logo.png\" style=\"position:absolute; float:left; left:-220px; margin-right:10px; width:200px; border:none;\"/>\r\n</div>\r\n```\r\n\r\nThis kind of ham-handedly places the ``img`` so it juts out into the left margin of this main column div, and works well enough, but is not responsive at all. \r\n\r\nI'm wondering, is there a more skillful way to do this, or a more \"accepted\" or \"best practice\" way to do this, so that it's responsive? \r\n\r\nWhen I write blog posts, I use a static site generator, and write in Markdown. The SSG supports putting html tags inside the markdown text, so, I can put a ``figure`` or ``img`` tag with specific classes, inside the paragraphs of the blog post. So that's my intention: combining a ``figure`` tag with an ``img`` or maybe a ``picture`` tag.\r\n\r\nAt a large viewport size, I'd like the image / figure to be in the left margin. As the viewport decreases, I'd like it to fold in, so the image / figure is between the paragraphs neatly.  \r\n\r\nAny code I add into the markdown, would end up being nested inside the ``sm-col-7`` div, so I'm just not sure what I can use here. \r\n\r\nThanks for your help and consideration. \r\n\r\nSincerely\r\nRick \r\n\r\n\r\n![jrc screenshot 2016-01-28 at 11 07 07 pm](https://cloud.githubusercontent.com/assets/512328/12646537/08243e7e-c614-11e5-8553-50180e6e4284.png)"},"comment":{"url":"https://api.github.com/repos/basscss/basscss/issues/comments/176753311","html_url":"https://github.com/basscss/basscss/issues/160#issuecomment-176753311","issue_url":"https://api.github.com/repos/basscss/basscss/issues/160","id":176753311,"user":{"login":"brianzelip","id":3411019,"avatar_url":"https://avatars.githubusercontent.com/u/3411019?v=3","gravatar_id":"","url":"https://api.github.com/users/brianzelip","html_url":"https://github.com/brianzelip","followers_url":"https://api.github.com/users/brianzelip/followers","following_url":"https://api.github.com/users/brianzelip/following{/other_user}","gists_url":"https://api.github.com/users/brianzelip/gists{/gist_id}","starred_url":"https://api.github.com/users/brianzelip/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brianzelip/subscriptions","organizations_url":"https://api.github.com/users/brianzelip/orgs","repos_url":"https://api.github.com/users/brianzelip/repos","events_url":"https://api.github.com/users/brianzelip/events{/privacy}","received_events_url":"https://api.github.com/users/brianzelip/received_events","type":"User","site_admin":false},"created_at":"2016-01-29T13:28:30Z","updated_at":"2016-01-29T13:28:30Z","body":"actually looking at ur snippet more, changing the position on the image parent div might not do what you need. Best to be able to actually see and tweak it in the browser."}}