Style with the maximum width
By changing "margin: 1em 5%" to "margin: 0", you can easily switch to the style of the maximum width.
The code is as follows: |
Copy code |
# Container { Margin: 0;/* changed from 1em 5% */ Background-color: # FFF; Background-image: url(background.jpg ); Background-repeat: repeat-y; Border: 1px solid #333; } |
Style in the navigation bar on the right
By modifying the nav to float: right and then alignment the right of the background image, we can easily switch to the style in the right navigation.
The code is as follows: |
Copy code |
# Container { Margin: 1em 5%; Background-color: # FFF; Background-image: url(background.jpg ); Background-repeat: repeat-y; Border: 1px solid #333; Background-position: right;/* add this rule */ } # Nav { Float: right;/* was float left */ Width: 160px; Margin-right: 10px;/* was margin-LEFT */ Padding-top: 1em; } # Content { Padding-top: 1em; Margin: 0 200px 0 2em;/* swap order */ } |
Instance
The code is as follows: |
Copy code |
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" Http://www.111cn.net> Lang = "en"> Http-equiv = "content-type" content = "text/html; charset = iso-8859-1"> <title> Two columns with color) & #8211; example 12 | CodeBit.cn </title> <Style type = "text/css" media = "screen"> body {margin: 0; padding: 0; font-family: georgia, times, "times new roman ", serif; color: #000; background-color: # ddd} # container {margin: 1em 5%; background-color: # FFF; background-image: url (/wp-content/uploads/examples/two-columus-with-color/images/variation1.gif ); background-repeat: repeat-y; border: 1px Solid #333} # banner {background-color: #666; border-bottom: 1px solid #333} # banner H1 {margin: 0; padding:. 5em} # nav {float: left; width: 160px; margin-left: 10px; padding-top: 1em} # nav P {margin-top: 0} # content {padding-top: 1em; margin: 0 2em 0 200px} # content H2 {margin-top: 0} # footer {clear: both; background-color: #666; padding: 1em; text-align: right; border-top: 1px solid #333} </style> </Head> <body> <div Id = "container"> <div Id = "banner"> Id = "nav"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. </p> </div> <div Id = "content"> Id = "footer"> Footer stuff here </div> </body> |