This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>css rows and columns</title> | |
| <style type="text/css"> | |
| body { | |
| font-family: Verdana; | |
| } | |
| div.rows div.row { | |
| clear:both; | |
| border-bottom: 1px dashed black; | |
| width: 100%; | |
| } | |
| div.rows div.column { | |
| float: left; | |
| } | |
| div.rows div.clear-row { | |
| line-height: 0px; | |
| font-size: 0px; | |
| clear:both; | |
| } | |
| .w-70-percent { | |
| width: 70%; | |
| } | |
| .w-30-percent { | |
| width: 30%; | |
| } | |
| #container { | |
| margin: auto; | |
| width: 70%; | |
| border: 2px solid black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div class="rows"> | |
| <div class="row"> | |
| <div class="column w-70-percent"> | |
| Row 1 / Column 1 | |
| </div> | |
| <div class="column w-30-percent"> | |
| Row 1 / Column 2 | |
| </div> | |
| <div class="clear-row"> | |
| | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="column w-70-percent"> | |
| Row 2 / Column 1 | |
| </div> | |
| <div class="column w-30-percent"> | |
| Row 2 / Column 2 | |
| </div> | |
| <div class="clear-row"> | |
| | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
Resources
1 comment:
Hi, is it possible to have the left column width fixed, 300px for example and right to stretch across the page?
Post a Comment