Three columns of equal width, with the center column aligned in the middle

Question

Three columns of equal width, with the center column aligned in the middle

My layout consists of 3 columns, each with a width set to 225px. Here's how it's structured:

<div id="main">
     <div id="col1">
         <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
</div>

When resizing the browser window, I want col1 to float left, col3 to float right, and col2 to be centered with the margins between col1/2 adjusting accordingly.

However, my CSS isn't working as expected. Here's what I have:

#main {
    width:100%;
}

.col1, .col2, .col3 {
    width:225px;
}

.col1, .col2 {
    float:left;
}

.col3 {
    float:right;
}

.col2 {
    margin-left:auto;
    margin-right:auto;
}

html css

Answer 1

Answer №1

Take a look at the functioning example: http://jsfiddle.net/NXRzP/

To begin, I inserted a div within another div.

<div class="primary">
    <div class="column">
        <div class="column1">...</div>
    </div>
...

In the CSS code, there are several key points to observe:

Your original CSS contained errors such as spaces in class names and incorrect selector usage (use "#" for id and "." for class).
The outer Div has a width of 33%, distributing it across the entire page.
The inner Divs are floated left/right with center alignment using margin auto.
A minimum width was added to the "primary" div to prevent column overlap when too narrow.

Below is the complete CSS code:

.primary {
  width:100%;
  min-width: 700px;
}

.column {
  width:33%;
  float:left; 
}

.column1, .column2, .column3 { 
  width:225px; 
  background-color: #999 
}

.column1  { float:left; }
.column2  { margin: 0 auto; }
.column3  { float: right }

Answer 2

Take a look at the functioning example: http://jsfiddle.net/NXRzP/

To begin, I inserted a div within another div.

<div class="primary">
    <div class="column">
        <div class="column1">...</div>
    </div>
...

In the CSS code, there are several key points to observe:

Your original CSS contained errors such as spaces in class names and incorrect selector usage (use "#" for id and "." for class).
The outer Div has a width of 33%, distributing it across the entire page.
The inner Divs are floated left/right with center alignment using margin auto.
A minimum width was added to the "primary" div to prevent column overlap when too narrow.

Below is the complete CSS code:

.primary {
  width:100%;
  min-width: 700px;
}

.column {
  width:33%;
  float:left; 
}

.column1, .column2, .column3 { 
  width:225px; 
  background-color: #999 
}

.column1  { float:left; }
.column2  { margin: 0 auto; }
.column3  { float: right }

Answer 3

Answer №2

Update all div IDs to classes. You mistakenly used IDs instead of classes for the col divs. Here is the link

 <div id="main">
<div class="col1">
<p>...</p>
</div>
<div class="col2">
<p>...</p>
</div>
<div class="col3">
<p>...</p>
</div>
</div>

Answer 4

Update all div IDs to classes. You mistakenly used IDs instead of classes for the col divs. Here is the link

 <div id="main">
<div class="col1">
<p>...</p>
</div>
<div class="col2">
<p>...</p>
</div>
<div class="col3">
<p>...</p>
</div>
</div>

Answer 5

Answer №3

Your code contains numerous errors. You have mistakenly used class instead of id in your CSS.

Check out this revised version: jsFiddle example

HTML

<div id="main">
    <div id="col1">
        <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
</div>

CSS (color codes are for illustration purposes only)

#main {
    width:100%;
    background : red;
}

#col1, #col2, #col3 {
    width:33%; // or 225px
    float:left;
}

#col1{
    background:green;
}

#col2{
    background:blue;
}

#col3{
    background:purple;
}

Answer 6

Your code contains numerous errors. You have mistakenly used class instead of id in your CSS.

Check out this revised version: jsFiddle example

HTML

<div id="main">
    <div id="col1">
        <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
</div>

CSS (color codes are for illustration purposes only)

#main {
    width:100%;
    background : red;
}

#col1, #col2, #col3 {
    width:33%; // or 225px
    float:left;
}

#col1{
    background:green;
}

#col2{
    background:blue;
}

#col3{
    background:purple;
}

Answer 7

Answer №4

Make sure to use a class selector instead of an id selector like #. I have provided an example where you don't need to specify the width for #col2, but you must update the HTML structure:

<div id="main">
     <div id="col1">
         <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
</div>

CSS code:

#col1, #col3 {
    width:225px;
}

#col1  {
    float:left;
}

#col3{
    float:right;
}

#col2 {
    overflow: hidden;
}

Answer 8

Make sure to use a class selector instead of an id selector like #. I have provided an example where you don't need to specify the width for #col2, but you must update the HTML structure:

<div id="main">
     <div id="col1">
         <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
</div>

CSS code:

#col1, #col3 {
    width:225px;
}

#col1  {
    float:left;
}

#col3{
    float:right;
}

#col2 {
    overflow: hidden;
}

Answer 9

Answer №5

Eliminate any spaces in your CSS class names such as .col 1:

.col1, .col2 {
float:left;
}

.col3{
float:right;
}

Also, ensure that your HTML uses IDs instead of classes.

Answer 10

Eliminate any spaces in your CSS class names such as .col 1:

.col1, .col2 {
float:left;
}

.col3{
float:right;
}

Also, ensure that your HTML uses IDs instead of classes.

Three columns of equal width, with the center column aligned in the middle

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for adding and executing animations in JavaScript/jQuery on your webpage

What is the most effective method for populating an array with all images from a particular directory?

Creating a personalized .hasError condition in Angular 4

The function Rotate() does not exist

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

Achieving (keyup.enter) event on an option within a datalist in Angular 6

Ways to center-align this menu (Spanish language)

Deactivating The Canvas Element

What is the best way to maintain the value of variables across different HTML files?

Executing a specific block of Python code is contingent on selecting a row from a MySQL database

Transforming the hue of a radio-button

Debugging ImageMapster: troubleshooting jQuery/HTML problems

Is there a way to populate rows in a data table on subsequent pages using JavaScript?

Tips for managing a series of images in a line within a bootstrap form

JavaScript function to add or remove a class upon clicking

When the URL is modified, triggering an event to load

Issue with Bootstrap: unable to align columns vertically

Conceal the footer when the website is scrolling, reveal it when the website is not scrolling

The drop-down menu appears to be falling behind the 'content' div element

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console