Tuesday 26th of September 2017 12:19:20 AM

left

#left {
position: absolute;
left: 2%;
width: 19%;
top: 106px;
background-color: #ffffff;
}

Warning

These pages use certain CSS definitions that are unsupported by older browsers.
more nice and free css templates


css


middleleft

#middleleft {
position: absolute;
left: 22%;
width: 28%;
top: 106px;
background-color: #ffffff;
}

Calculations in your head

This example requires some calculations. The sum of the widths yields 98%. The distance from the border of body to the first box plus its width plu the distance yields the left position of the next box.

If you want boxes of different width you need to adjust these values accordingly.

Use of this code is encouraged!

Try it with 2 or 3 columns



middleright

#middleright {
position: absolute;
left: 51%;
width: 28%;
top: 106px;
background-color: #ffffff;
}

box border

Borders, pading and margin are defined in

#right,#middleright,#middleleft,#left{
border: 1px solid #564b47;
padding:0px;
margin:0px;
}

Font definitions

Padding are passed to p, h1 and h3.

p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}


a color of gray, which makes all of the effectseasier to see. The look of a border style is always based in some wayon the color of the border, although the exact method may varybetween user agents. For example, Figure 7-30illustrates two different ways of rendering aninset border.

Figure 7-30

Figure 7-30. Two valid ways of rendering inset

So let's assume that you want to define a border style forimages that are inside a hyperlink. You might make them outset, so

You'll remember that I said the second-simplest rule ofhorizontal formatting was this: the total of the seven horizontalproperties always equals the width of the parentelement. At first glance, this can be interpreted to mean that anelement can never be wider than its parent's contentarea -- and as long as all properties are zero or greater,that's quite true. However, consider the following, depicted inFigure 8-19:

Before we go any further, let's see what happens when we add box properties to inline elements.

8.4.2.2. Adding box properties

As we're aware from previous discussions, padding, margins, and borders may all be applied to inline nonreplaced elements, and they don't