Home/ Questions/Q 8346943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T07:11:19+00:00

I have a fixed width 960px container and I am adjusting my design to

  • 0

I have a fixed width 960px container and I am adjusting my design to fit various screen resolutions. Within the container, I have a few floating DIVs using width % and min-width like:

width:80%;
min-width:200px;

The issue here is that the DIVs do not line up horizontally; they end up underneath each other. Previously, I had my DIVs on a set width (which I changed to min-width now).

An example of how I have formed DIVs currently:

Container:

width: 830px;
float: left;

1st-colum:

width:100%;
min-width: 200px;
float: left;

2nd-colum:

width:100%;
min-width: 200px;
float: left;

3rd-colum:

width:100%;
min-width: 200px;
float: left;

etc.

In this example, the 1st-colum DIV covers the entire width of the container and pushes the other DIVs down.

Example of HTML below:

<div id="container">
   <div id="1stcolum">Hello world</div>
   <div id="2ndcolum">Hello world</div>
   <div id="3rdcolum">Hello world</div>
</div>

As you can see, nothing fancy in the HTML either.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based on your posted CSS and HTML..

    You can’t have 3, left floating, divs all taking up the same 100% width unless they stack. This is why the divs stack. Column one takes up 100% of the width, there’s no room for column two to also take up 100% of the width unless column two falls below column one.

    If you want the columns to actually be columns, you need them to have a width of 33.3%. (one-third of 100%)

    And, if you want the columns to be a minimum of 200 pixels wide you don’t need a min-width for each column, you simply need a min-width of 600px for the container div.

    DEMO

    • 0