Responsive grid layout

Question

I'm wondering if anyone could help, I'm trying to get the latest article panel to run along side the image, and really struggling, here is an example page

http://www.g7g20.com/articles/winnie-byanyima-the-civil-society-contribution

and the code is as follows:

{tag_image} {tag_copyright} {tag_author image} {tag_author bio} {tag_author image 2} {tag_author bio 2} {tag_author image 3} {tag_author bio 3} @{tag_twitter handle} WEBSITE Published
{tag_releasedate} Share
{module_contentholder,name="Share this"} {tag_description}

    <div class="four columns side-bar">
    <div class="ad-rotator-side{tag_disable side bar banner}">{tag_side bar banner code}<br />
    </div>
    <div>{module_contentholder,name="latest list"}
        <br />
        <p>&nbsp;</p>
    </div>

    <div> {module_contentholder,name="Subscribe Form article"}
        <br /> </div>
        <div>
        {module_contentholder,name="Latest comment"}
        </div>
        </div>
</div>

I've tried nesting the columns and that did have the desired effect, but I know that is not recommended using a Skeleton grid system as yes the column widths the of nested columns skrunk.

Thanks

J-P

Answer 1

Nesting the article image, article details, and left-panel inside a single div is probably the simplest and best method for this as it will be easier to make things responsive - you just need to assign some extra classes to them so the widths display correctly.

If you really don't want to nest things then you could rearrange the sidebar so it sits inside a relative positioned container, alongside the article content... then set it to position: absolute; right: 0; I have mocked a sample pen here and tested it in the URL you supplied.

It works and I hope it helps, but I still think nesting is the best way to go!

section {
  max-width: 960px;
  margin: auto;
  position: relative;
}
.eight-col {
  width: 66.666%;
  float: left;
  background: aliceblue;
}
.eight-col img{
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
.four-col {
  width: 33.333%;
  position: absolute;
  background: lightpink;
  right: 0;
  height: 600px;
}
.two-col {
  width: 16.666%;
  float: left;
  clear: both;
}
.two-col img{
  width: 100%;
}
.six-col {
  float: left;
  width: 50%;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<section class="clearfix">
  <article class="eight-col">
    <img src="http://placehold.it/350x150">
  </article>
    <div class="two-col"><img src="http://placehold.it/120x120">Author info goes here</div>
    <div class="six-col"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
  </article>
  <aside class="four-col">
  <ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ul>
    </aside>
</section>

EDIT:

New pen with nested cols for content - FYI, this is very similar to the bootstrap column structure... instead of recreating things use what is already out there to do what you need! Bootstrap nesting columns

Alternate pen here