Division Tag

Sometimes it helps to look at the OLD WAY of doing things to appreciate the NEW. That's what this page is.

Learn to use Flexbox and Grid and all the work involved in creating columns is done for you.

Our 500 Series templates are working examples of using Flexbox to create columns.

Manipulating Divisions

THE OLD WAY!!

Anything you add to a division in the way of margins, border or padding adds to the size of the division.

In the 4 examples shown below, let's say that the first red box is a division.

It's width is set to 33%

It has no margins, padding or borders.

In the second box we add a 4% margin to the outside of the division, original width 33%.

This increases the width of the division to 41%. (2 sides at 4% each)

In the third example we add 4% of padding to the inside of the division.

This stretches the division out to a measurement of 41%. (2 sides at 4% each)

In the last example the width is set to 34% and we add a simple 1 pixel border.

This increases the size of the division to greater than 34%.

Note: Area in blue represents spacing in percentages added by margin, padding and border.

What's the Problem

In the method we are using to align adjacent divisions, if the combined width of the nested divisions, plus margins, padding and borders, exceeds the width of their container, your page will look like this:

Say the white box is your container division. Its width is set to 100%.

With the dimensions specified in the examples shown above where we added padding, margins and border, the combined width of your nested divisions is greater than 116%.

The combined width of the first 2 divisions is 82%.

The third nested division is 34% wide plus the width of the border and does not fit inside the remaining available space of 18%.

It misaligns to a position below the first 2 divisions.

This is why you must adjust the width of your nested divisions if you add margins, padding or borders.

The Fix

To get the nested divisions to line up inside of the 100% wide container division, we show the adjusted widths in the CSS shown below:

#division-left {
float: left;
width: 29%;
margin: 0 0 0 4% }

#division-middle {
float: left;
width: 25%;
padding: 0 4% 0 4% }

#division-right {
float: left;
width: 34%;
border:none
}

.container {
display: flex;
flex-direction : row;
justify-content: center;
align-items: center;

#division-middle {
float: left;
width: 50%;
height: 200px;
padding: 0 0;
overflow : scroll
}

#division-middle {
float: left;
width: 50%;
height: 200px;
padding: 0 0;
overflow : auto
}