I simply want 3 equal width columns with equal height that grows to contain the longest column, all wrapped in a 1000px width container.
HTML:
Expand|Select|Wrap|Line Numbers
- <div id="wrap">
- <div id="col1">
- </div>
- <div id="col2">
- </div>
- <div id="col3">
- </div>
- <div id="clear"></div>
- </div>
See how the first two column heights match the 3rd (longest) column?
Why do I want this? These columns will have a border and it looks tacky if one's short, etc.
CSS:
Expand|Select|Wrap|Line Numbers
- #wrap {
- width: 1000px;
- background-color: #333;
- }
- #col1 {
- float: left;
- width: 300px;
- border: 1px solid white;
- background-color: red;
- }
- #col2 {
- width: 300px;
- padding-left: 310px;
- padding-right: 310px;
- border: 1px solid white;
- background-color: blue;
- }
- #col3 {
- float: right;
- width: 300px;
- border: 1px solid white;
- background-color: green;
- }
- .clear {
- clear: both;
- }
Any examples? where am I going wrong? Firefox render's this all over the place but don't know what's wrong.
Thanks for any help,
Dan