awolarczuk
asked on
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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>
Did the code above not work?
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
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
ASKER