|
| |
|
|
seth
Posts: 312
From: canada
Status: offline
 |
4 square layout - please help - 8/23/2007 14:09:30
Hi. I'm trying to do a 4 square body layout, that expand and shrinks to the browser window size, i think that is width set to 100%. Something like this:
----------------------
| | |
| | |
| | |
|---------------------
| | |
| | |
| | |
----------------------
can it be accomplished by using an id element of the body tag?
<body id="BodyTag">
Thanks!
|
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: 4 square layout - please help - 8/23/2007 15:38:40
Not quite sure what you're asking or what it's got to do with the body tag...
If you want the layout to be split into 4 then what you need is this:
4 divs all floated, two left, two right and if you want them to fill the screen then give them a % width of 49% (not 50% as IE doesn't add up well).
Here's the simplest version: http://www.littleblueplane.com/test/boxes1.html
Code:
<style type="text/css">
<!--
#box1, #box3 {width:49%; float:left;border:1px solid;display:inline;clear:left;background-color:red;}
#box2, #box4 {width:49%; float:right;border:1px solid;display:inline;background-color:gray;}
p {margin:1em;}
-->
</style>
</head>
<body>
<div id="box1">
<p>Text goes here</p>
</div> <!-- end box1 -->
<div id="box2">
<p>Text goes here</p>
</div> <!-- end box2 -->
<div id="box3">
<p>Text goes here</p>
</div> <!-- end box3 -->
<div id="box4">
<p>Text goes here</p>
</div> <!-- end box4 -->
Now the problem with this is that as you can see with different length content the boxes are different lengths which is a bit ugly. So to give the impression of the same length what you do is put the top and bottom pair in their own div and then apply a background (either a colour or a background image) to these outer divs to give the impression that the boxes are the same height when they're not. Then they'll expand neatly with their content instead of either overflowing or looking ugly:
Test Two: http://www.littleblueplane.com/test/boxes.html
Code:
<style type="text/css">
<!--
#topbox {background-color:gray;overflow:hidden;border:1px solid;width:100%;}
#bottombox {clear:both;overflow:hidden;border:1px solid;width:100%;background: url(greystripe.gif) left top repeat;}
#box1, #box3 {width:49%; float:left;border-right:1px solid;display:inline;}
#box2, #box4 {width:49%; float:right;border-right:1px solid;display:inline;}
p {margin:1em;}
-->
</style>
</head>
<body>
<div id="topbox">
<div id="box1">
<p>Text Goes Here</p>
</div> <!-- end box1 -->
<div id="box2">
<p>Text Goes Here</p>
</div> <!-- end box2 -->
</div> <!-- end topbox -->
<div id="bottombox">
<div id="box3" style="clear:left;">
<p>Text Goes Here</p>
</div> <!-- end box3 -->
<div id="box4">
<p>Text Goes Here</p>
</div> <!-- end box4 -->
</div> <!-- end bottombox -->
The CSS is in the page heads.
Things that you might go huh? at:
1. overflow:hidden is to ensure that the floats are contained by the outer divs.
2. display:inline is in case of an IE double margin bug when margins are applied to adjacent floats.
(edited to add the code here in case I take the pages down)
< Message edited by Tailslide -- 8/25/2007 5:17:26 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
seth
Posts: 312
From: canada
Status: offline
|
RE: 4 square layout - please help - 8/24/2007 12:34:28
Awsome! Thanks..
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
