Monday 20th of November 2017 02:46:44 AM

MENU left

Menu with fixed width.

#left {
width:175px;
padding:0px;
float:left;
}

CONTENT

All templates are XHTML 1.0 and CSS2/ tableless.
3 columns layout grid. All colums are fixed and centered.
more nice and free css templates

html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
color:#564b47;
text-align:center;
margin:0px;
padding:0px;
}
#box {
width:750px;
margin: 0px auto;
padding:0px;
text-align:left;
}
#content {
width:400px;
padding:0px;
float:left;
background-color:#fff;
overflow: auto;
}
#head {
background-color:transparent;
}

10px for top moves the top edgeof the clipping rectangle downward 10 pixels. This will cause the top10 pixels of the image to become effectively invisible.

clip can be applied to any element. Thus, youcould display only the top left corner of a paragraph using somethinglike this:

<P STYLE="clip: rect(0, 10em, 10em, 0);">

This will display a square 10 ems wide by 10 ems high. This square is

While this is interesting enough, consider the case of elementswithout a declared width, whose overall width(including margins) is therefore dependent on thewidth of the parent element.

Figure 7-11

Figure 7-11. Percentage margins and changing environments

As you can imagine, this leads to the possibility of"fluid" pages, where the margins and padding of elementsenlarge or reduce to match the actual size of the display canvas. Intheory, as the user changes the width of a browser window, the <A HREF="http://www.udel.edu/FREC/spatlab/">
Spatial Analysis Lab</A>, is a proud sponsor of this website.  The animated GIF image is also a link.  By default, a linked image has a 2-pixel wide blue border, but I suppressed that with the BORDER=0 attribute in the IMG tag. <A HREF="http://www.udel.edu/FREC/spatlab/">
<IMG ALIGN=RIGHT HEIGHT=42 WIDTH=39 HSPACE=5 VSPACE=5 BORDER=0 SRC="tinyearth.gif"></A> The University of Delaware
Spatial Analysis Lab is a proud sponsor of this website.  The animated

The expected result occurs when we change the repeat value to be repeat-x:

BODY {background-image: url(yinyang.gif);
background-repeat: repeat-x;}

Now the image is repeated along the x-axis (in other words, horizontally), as illustrated in Figure 6-31.

Figure 6-31

Figure 6-31. Tiling along the horizontal axis

Finally, of course, we may wish not to repeat the background image at <P>This paragraph contains <SUP>superscripted</SUP> text.</P>

Figure 4-33

Figure 4-33. Superscript alignment

4.1.3.3. Bottom feeding

vertical-align: bottom soundspretty simple: it aligns the bottom of the element's inline boxwith the bottom of the line box. For example, this markup results inFigure 4-34: