Table XI Blog


Selling in a Responsive Design

Drawing of computer, tablet and mobile phoneIf there's one thing that's sure to drive you batty in a responsive layout it's working with third party ad services. Not everyone can afford their own ad sales team or has the resources to support their own ad network, and because of this, they turn to services such as Google DFP. Those services are easy to implement and enable an instant revenue stream. They also don't work well in fluid width layouts.

We ran into this wall the weekend before the launch of the new Roger Ebert website. We were implementing a new ad network that did not play nicely with our fluid width columns. Not having the time to fully implement and test an entire new layout for the site, we had to think quickly. Here's what we did...


Our ads were all 300 pixels wide and existed in the same column. This column was one of two columns in its parent container. On the parent container, we put a class of fixed-rail. Inside the container we added a class of pad to our main content and place to our ad rail. The HTML looked like this...

<section class="fixed-rail">
    <section class="main pad">
        ... Insert main content here ...
    <aside class="place">
        ... Insert ad rail content here ...


Easy enough, right? The magic is the CSS. We're already using border-box box-sizing, so we set our pad column to width: 100%;. We then give it right padding of 330px (300 pixels for our ad-rail and 30px as the universal gutter width setting in our SASS files). We then position the placecolumn absolutely to the upper right corner. Instant fixed width right rail and fluid width content column.

$gutter-width: 30px;

.fixed-rail {
    position: relative;

.pad {
    width: 100%;
    padding: 300px + $gutter-width;

.place {
    width: 300px;
    position: absolute;
    top: 0;
    right: 0;

We Got This...

Looks great, right? One problem. There were some cases where the ad rail was taller than the content column. Since it was positioned absolutely, the layout would collapse. Uh-oh. The solution? We inserted a quick bit of JS to calculate the height of the place column and added that as a minimum height on its sibling pad column.

    var forceHeight = $(this).height() + 'px';
    var sibling = $(this).siblings('.pad');
    $(sibling).css({'min-height': forceHeight});

Honestly, I don't know how this solution will hold up over time, but it seems to have been doing just fine in practice so far. If you've got some thoughts on this, let's chat.

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

Our Starter League Mentees

The Table XI Starter League officeTable XI is proud to be mentoring three students from the Starter League, an intensive 12-week dev training program based out of Chicago's exciting new tech incubator, 1871. In addition to rigorous coursework in web development, design, and HTML/CSS, the Starter League pairs students with professional mentors from their fields of study.

Erik Schwartz (whose wife, Smith, is a Starter League alumna and current TA) and I will be mentoring web development students, while Ed LaFoy has been paired with a design student.

Inside of 1871 space

My mentee, Alejandro Acosta-Rubio, is a 19-year-old Venezuelan native who felt that his traditional university wasn't fast or relevant enough to prepare him for a career in web development, so he moved from Miami to Chicago and enrolled in the Starter League. He's arming himself to be a triple threat, taking web development, UX/UI, and HTML/CSS—only one of two students this session to take on such a load. Though his original plan was to return to Miami, he's quickly falling in love with this city, and hopes to stay here after his time at the Starter League is up.

Erik's mentee, Mike Chau, graduated with a degree in finance from Illinois Wesleyan University in May. He was gainfully employed for about two months before realizing that the Fortune 500 world wasn't for him, and that the job market for finance majors isn't great these days. He had programmed a bit as a hobby in college and enjoyed it, but never threw himself fully into it. However, he jumped at the opportunity to join the Starter League, and tells the story better on his blog.

Man working on his computer inside the 1871

Ed's mentee, Christopher Lindsey, runs Ear2Ground Media, a consultancy servicing the entertainment, hospitality, and lifestyle arenas. An entrepreneur, he joined the Starter League not to become a developer, but to be able to better communicate with the developers he hires. He's currently taking the front-end class, but plans to follow up with web dev and Ruby for designers.

"I have chosen Starter League because it is a hub of passionate energy for technology and entrepreneurial spirit. The atmosphere and culture seems infectious, and will inspire and motivate me to further myself personally and professionally," he says, and it's hard to disagree with that. For myself, being a mentor also provides an excuse to hang out at 1871, the epicenter of Chicago's burgeoning digital startup scene. It's a beautiful and motivating space.

Rows of desks with computers inside 1871

Want access to more articles like this?  Subscribe now to stay up to date on the latest from Table XI 

Table XI

328 S. Jefferson St.
Suite 670
Chicago, IL 60661


Give your team new problem-solving techniques with our innovating workshops and check out our event series.

GoodFirms Badge