jegranet Posted December 5, 2012 Share Posted December 5, 2012 I want to create a grid of six text boxes 200px x 200px, with different coloured backgrounds and text with three on top row and three on bottom row without using a table. Is this possible. I have created other floated boxes, but usually a single with text wrapped around them. Link to comment Share on other sites More sharing options...
ShadowMage Posted December 5, 2012 Share Posted December 5, 2012 Of course it is, just use float. If you want to maintain the grid layout (3 on top, 3 on bottom) you'll have to put them in a container. <div id='container'> <div class='gridBox1'>Stuff...</div> <div class='gridBox2'>Stuff...</div> <div class='gridBox1'>Stuff...</div> <div class='gridBox2'>Stuff...</div> <div class='gridBox1'>Stuff...</div> <div class='gridBox2'>Stuff...</div></div> #container { width: 600px; /*If you add borders/padding/margin to your grid boxes you'll need to adjust this*/}.gridBox1, .gridBox2 { height: 200px; width: 200px; background-color: #555; float: left;}.gridBox2 { background-color: #999;} 1 Link to comment Share on other sites More sharing options...
jegranet Posted December 5, 2012 Author Share Posted December 5, 2012 Thank you very much. I had competely forgotten to put it in a container. It is working perfectly. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now