Fluid 3-Column Layout in HTML & CSS

Question

I'm working with a basic 3-column layout, using HTML and CSS. My columns float left, so when I resize the width of the window, the columns gradually "collapse". ie First, col-3 will collapse under col-1, then col-2 will collapse under col-1.

HTML:

<div id="col2">
    <p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. <a href="">Market-facing</a> drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p>
</div>

<div id="col3">
    <p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p>
</div>

CSS:

body {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto; }

#col1, #col2, #col3 {
    float: left;
    width: 30%;
    margin: 10px;
    min-width: 200px; }

What I would like to happen is this. At a specified width, the 3 columns will collapse directly into 1 column (col1 above col2 above col3), instead of them moving one at a time.

Can this be done with HTML & CSS, or is another language required? How do I accomplish this?

Answer 1

You can use

 body { width: 90%; max-width: 1000px; margin: 0 auto; } #col1, #col2, #col3 { float: left; width: 30%; margin: 10px; min-width: 200px; } @media (max-width: 768px) { /*set here you specified width*/ #col1, #col2, #col3 { width: 100%; } } 

 <div id="col3"> <p>3333We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whle swamp.</p> </div> <div id="col2"> <p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. <a href="">Market-facing</a> drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p> </div> <div id="col3"> <p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p> </div> 

Here a jsfiddle example to play with

If the content inside your div#col is really text, not just an example I really recommend you use: CSS3 Multiple Columns