CSS Text area 2x2 Grid

Hi all
I am wanting to do a css layout with 4 text boxes in a 2x2 grid i have been trying and have had no luck could someone please help me out, i have put a image ehat i wiould like it to look like
stuff.png
awolarczukAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
TechHelpr08210Connect With a Mentor Commented:
a css layout with 4 text boxes in a 2x2 grid

So here is what your looking for...

-  2 x 2 grid layout
-  Automatically Adusts all boxes when modifying the outer container's height and width properties.

<style>

div.box_layout {
	width:400px;		/* only adjust the width to resize all div widths */
	height:400px;		/* only adjust the height to resize all div heights */
	border:0px solid #900;
	padding:0px;
	margin:0px;
	line-height:30px;  		/* sets the padding between the rows */
}

div.text_box {
	line-height:normal;
	display:inline-block;
	width:49%; 		/* sets the number of boxes per row */
	height:49%;		/* sets the number of boxes per col */
	padding:0;
	margin:0;
	background-color:#ffffff;
	border:1px solid #F00;
}

div.box_header {
	background-color:#F00;
	color:#FFF;
	text-align:center;
}

</style>

    <div class="box_layout" >
        <div class="text_box" ><div class="box_header" > 1 </div> </div>
        <div class="text_box" ><div class="box_header" > 2 </div> </div>
        <div class="text_box" ><div class="box_header" > 3 </div> </div>
        <div class="text_box" ><div class="box_header" > 4 </div> </div>
    </div>

Open in new window

0
 
awolarczukAuthor Commented:
thanks so much i know it is a dumb question i cant seem to see the html code ??
0
 
awolarczukAuthor Commented:
mate this is the code i have done for this page and im not seeing much just two read boxes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">

div.box_layout {
	width:400px;		/* only adjust the width to resize all div widths */
	height:400px;		/* only adjust the height to resize all div heights */
	border:0px solid #900;
	padding:0px;
	margin:0px;
	line-height:30px;  		/* sets the padding between the rows */
}

div.text_box {
	line-height:normal;
	display:inline-block;
	width:49%; 		/* sets the number of boxes per row */
	height:49%;		/* sets the number of boxes per col */
	padding:0;
	margin:0;
	background-color:#ffffff;
	border:1px solid #F00;
}

div.box_header {
	background-color:#F00;
	color:#FFF;
	text-align:center;
}

</style>

  
</head>

<body>
  <div class="box_layout" >
        <div class="text_box" ><div class="box_header" > 1 </div> </div>
        <div class="text_box" ><div class="box_header" > 2 </div> </div>
        <div class="text_box" ><div class="box_header" > 3 </div> </div>
        <div class="text_box" ><div class="box_header" > 4 </div> </div>
    </div>
</body>

</html>

Open in new window

0
 
LZ1Commented:
Did the code above not work?
0
 
David S.Commented:
The boxes seem to all be in a single column in Firefox.

These show the technique for removing the extra space between them that's causing them to not sit next to each other:
http://hanamidesign.com/blog/display-inline-block-cross-browser-solutions/
http://www.css-101.org/articles/responsive_design/content_dictates_break-points.php
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.