Achieving the ideal 3-column design

Question

Achieving the ideal 3-column design

I'm currently struggling to achieve a proper 3 column layout with my HTML and CSS code. Here's what I have:

<div class="row">
    <div class="col">C1</div>
    <div class="col">C2</div>
    <div class="col">C3</div>
</div>

Here is the CSS:

.row {
   width: 964px;
}

.row:last-child {
   margin: 0;
}

.row .col {
  width: 33.33%
  float: left;
  margin-bottom: 20px;
  margin-right: 10px;
}

The columns are supposed to be equal in width at 33.33%, but there seems to be a gap on the right margin of the last column. Increasing the margin only pushes the column down to the next line.

Is there a way to make sure that all columns have the same width, without any margins on the first and last columns (meaning no left margin for the first column and no right margin for the third column)? Any suggestions would be appreciated!

Thanks in advance.

html css

Answer 1

Answer №1

.row .col:last-child
{
    margin-right:0;
}

This code snippet will ensure that the right margin is removed for the last child element within a row column. It is important to remember to add this styling after the '.row.col' style declaration.

Answer 2

.row .col:last-child
{
    margin-right:0;
}

This code snippet will ensure that the right margin is removed for the last child element within a row column. It is important to remember to add this styling after the '.row.col' style declaration.

Answer 3

Answer №2

Replace px with % in the following CSS code: margin-right: 10px;

.block{
    width: 48%;
    margin-right: 5%;
}

.block:last-of-type{
    margin-right: 0%;
}

Answer 4

Replace px with % in the following CSS code: margin-right: 10px;

.block{
    width: 48%;
    margin-right: 5%;
}

.block:last-of-type{
    margin-right: 0%;
}

Answer 5

Answer №3

If you want to achieve a responsive layout, consider using the following CSS:

.row{
    display: table;
}
.col{
    display: table-cell;
}

For example, you can modify it like this:

.row{
   display: table;
   width: 100%;
}
.col{
    border: 1px solid #000;
    display: table-cell;
    width: 33%;
}

Check out the FIDDLE DEMO here!

Answer 6

If you want to achieve a responsive layout, consider using the following CSS:

.row{
    display: table;
}
.col{
    display: table-cell;
}

For example, you can modify it like this:

.row{
   display: table;
   width: 100%;
}
.col{
    border: 1px solid #000;
    display: table-cell;
    width: 33%;
}

Check out the FIDDLE DEMO here!

Answer 7

Answer №4

When working with a fixed width row of 964px, you can easily calculate the column widths and add margins to achieve the desired layout.

It's worth noting that 964 doesn't evenly divide by three, so using 963px may help avoid rounding issues. Here's an example:

<div class="row">
    <div class="col">C1</div>
    <div class="col middle">C2</div>
    <div class="col">C3</div>
</div>

Style with CSS:

.row .col {
  width: 321px;
  float: left;
  margin-bottom: 20px;
}

.row .middle {
    margin-left: 10px;
    margin-right: 10px;
}

Answer 8

When working with a fixed width row of 964px, you can easily calculate the column widths and add margins to achieve the desired layout.

It's worth noting that 964 doesn't evenly divide by three, so using 963px may help avoid rounding issues. Here's an example:

<div class="row">
    <div class="col">C1</div>
    <div class="col middle">C2</div>
    <div class="col">C3</div>
</div>

Style with CSS:

.row .col {
  width: 321px;
  float: left;
  margin-bottom: 20px;
}

.row .middle {
    margin-left: 10px;
    margin-right: 10px;
}

Answer 9

Answer №5

Thank you all for your helpful responses! I had to adjust the padding in my main website container to make everything align correctly. After changing the width to 970px, I utilized some CSS from Bootstrap to achieve the desired layout.

The final outcome looks like this:

.row {
   margin-right: -15px;
   margin-left: -15px;    
}

.col {
   float: left;
   width: 33.33333333%;
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

This adjustment has resolved all alignment issues for me!

Answer 10

Thank you all for your helpful responses! I had to adjust the padding in my main website container to make everything align correctly. After changing the width to 970px, I utilized some CSS from Bootstrap to achieve the desired layout.

The final outcome looks like this:

.row {
   margin-right: -15px;
   margin-left: -15px;    
}

.col {
   float: left;
   width: 33.33333333%;
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

This adjustment has resolved all alignment issues for me!

Achieving the ideal 3-column design

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue encountered while attempting to delete dynamically added fields

Utilizing jQuery for AJAX requests triggered by mouse movement

Showing Div content from AngularJS response

How to use jQuery to extract a particular text from an anchor tag

When I click the login button, a .ttf file is being downloaded to my computer

Rowing and Columning with Bootstrap

Element is not perfectly aligned with the bottom; Slightly below the bottom edge

Unable to import global CSS in React; however, local components are working fine

The form yields no response and fails to send any data

Tips for designing rainbow-themed elements (hyperlinks) using CSS to incorporate multiple colors

I need clarification on the following: content:''

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

polygon with five or more sides

From Table to DIV: A Simple Conversion

Turn off the nicescroll scroll bar that appears as a default feature

When I view the website on a tablet in landscape mode, the navigation bar vanishes

What is the best way to center align and add an icon to the header in Ionic?

Switching the keyboard language on the client side of programming languages

Converting a JavaScript IIFE library into a React Component

Using both Bing and Google geolocation services due to compatibility with Internet Explorer