Home/ Questions/Q 7731691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T06:32:46+00:00

I have a 3 column layout, and am trying to make it more responsive

  • 0

I have a 3 column layout, and am trying to make it more responsive to screen size, rather than the standard set pixels for each div.

so i have a left, center and right div, in a 90% width container. The left and right floated divs are 200px a peice, but is there a way of then making the center div expand to fill the gap between the two?

If not, is there a better way of making a 3 column layout responsive to screen size?

HTML

<div id="leftCol">Content for  id "leftCol" Goes Here</div>
<div id="mainCol">Content for  id "mainCol" Goes Here</div>
<div id="rightCol">Content for  id "rightCol" Goes Here</div>

CSS

#leftCol {
 float: left;
 width: 200px;
}

#mainCol {
 margin-right: 20px;
 margin-left: 20px;
 width: /* WHAT DO I PUT HERE ??? */
 float: left;
}

#rightCol {
 float: right;
 width: 200px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s several approaches to this “problem”. You might want to have a look at existing solutions and use one of these, or adapt them and make something that works for you.

    Existing CSS frameworks that target responsive sites are:

    Dynamic Drive also has a series of layouts that offer fluid/fixed options, you might want to check these out and see if anything helps your current case: http://www.dynamicdrive.com/style/layouts/category/C10/

    • 0