Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Box Shadows

Posted by Kent Drummond
Kent Drummond
8,309 Points

having trouble withe some css.

I have created a 3 column layout with some css. however when i expand my browser the text does not expand with the browser, remains static.

<section> <h1>What I've Done and Contiuning To Do:</h1> <div class="container">

  <div class='column-left'>
    <h4>Tech Talent South</h4>
      <p>m voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. U</p>  
    </div>

<div class='column-center'> <h4>Things I've Worked On</h4> <p>m voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </div>

<div class='column-right'> <h4>Links</h4> <p>m voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. U.</p> </div>

CSS: .column-left, .column-center, .column-right { float: left; width: 33%; text-align: center; max-width: 300px; margin: 0 0 0 5px; }

.column-center { margin: 0 10px 0 10px }

.column-right { float: auto; margin: 0 5px 0 0; }

2 Answers

christopher smith
christopher smith
5,831 Points
christopher smith
christopher smith
5,831 Points

The easiest way I've seen it done is to create a two column layout and then inside your right column do another two column layout so you end up with 3 columns. You can float left and float right to position them.

Rand Seay
Rand Seay
13,975 Points
Rand Seay
Rand Seay
13,975 Points

I'm not completely sure I understand the question, but I think this may help.

In your CSS, there is a max-width property that is set to 300px. This would restrain the size of the selected elements to be no wider than 300px, regardless of the size of your browser window.

.column-left,
.column-center,
.column-right {
    float: left;
    width: 33%;
    text-align: center;
    max-width: 300px;    // causes your columns to never exceed 300px in width
    margin: 0 0 0 5px;
}

Like I said, this may not address the question you are asking, but it might be something to think about.