How to resize tabs to browser window size?

Question

Code: http://codepen.io/anon/pen/Dyjwi/

How can I get the tabbed area to resize when the browser window resizes? I would also like the text to resize as the tabbed area size changes. Thanks!

Answer 1

In your CSS you are specifying:

#page-wrap {
    width: 960px;
    margin: 100px auto;
}

Which, as the parent of the tabbed content, also becomes the width of the content. If you want the width of the content to resize with the window, I would change the width to some percentage of the window width:

#page-wrap {
    width: 60%;
    margin: 100px auto;
}

You'd also might use the max-width property to limit the expansion of the content.

I've made an updated version of your CodePen.