Jump to content

side by side text boxes


jegranet

Recommended Posts

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. post-34553-0-31097800-1354708509_thumb.jpg

Link to comment
Share on other sites

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;}

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...