...

View Full Version : CSS: Four Square Layout



sumeet
05-18-2005, 06:12 PM
Is this possible with CSS?

http://www.sumeetjain.com/help.gif


All squares must have the same width. Orange squares should stretch to make it so each has the same height as the other... Same with purple.

I've tried absolute positioning, floating, etc but haven't gotten exactly the above.

mark87
05-18-2005, 06:21 PM
EDIT - Updated it - should be more what you want!


<head>

<style type="text/css">

#wrap {
width: 300px;
height: 300px;
}

#a {
background-color: #FC6;
display: inline;
width: 50%;
height: 50%;
}

#b {
background-color: #C0C;
float: right;
display: inline;
width: 50%;
height: 50%;
}

#c {
background-color: #FC0;
clear: both;
display: inline;
width: 50%;
height: 50%;
}

#d {
background-color: #F0C;
float: right;
display: inline;
width: 50%;
height: 50%;
}

</style>

</head>

<body>

<div id="wrap">

<div id="a">
</div>
<div id="b">
</div>
<div id="c">
</div>
<div id="d">
</div>

</div>
</body>

Hopefully it helps! :) .. EDIT ... oer it doesn't work in FF :( soz !

Mr J
05-18-2005, 08:20 PM
Not sure if this is totally correct way to do it but it is something like and is the same in FF


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<style type="text/css">

#wrap {
width: 300px;
height: 300px;
}

#a {
background-color: #FC0;
width: 50%;
height: 50%;
float: left;
}

#b {
background-color: #FC6;
width: 50%;
height: 50%;
float: left;
}

#c {
clear: both;
background-color: #F0C;
width: 50%;
height: 50%;
float: left;
}

#d {
background-color: #C0C;
float:left;
width: 50%;
height: 50%;
}

</style>

</HEAD>
<BODY>

<div id="wrap">

<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>

</div>


</BODY>
</HTML>

sumeet
05-18-2005, 10:26 PM
Thanks a lot for the help. Unfortunately, not exactly correct.

With the first suggestion, A is next to C and B to D. Also, widths arent present for A and C.

With the second suggestion, the image I offered in my post is indeed replicated, but by using the 'height: 50%;' element you restrict my text. I need it so that it doesn't matter how much text I have in either box. The adjacent box should stretch to match heights.

mark87
05-18-2005, 10:31 PM
Yup sorry my attempt wasn't too good! I don't think you'll be able to get them to both stretch like that tbh, maybe easier just to make sure the percentages are the same each time...

harbingerOTV
05-18-2005, 11:58 PM
http://home.earthlink.net/~harbingerofthevoid/testing/sumeet.html

maybe something like that?

Not 100% CSS as it uses 2 images but...

Mr J
05-19-2005, 02:00 PM
I think the method harbingerOTV has used is the way to do it :thumbsup:

I was only going to post a similar code.

[Unknown]
05-19-2005, 05:15 PM
Damn, I was just about to post some code a wrote. :p

sumeet
05-19-2005, 05:28 PM
Thanks that does indeed work.

I won't be able to use it for the project I'm working on (submission to CSS Zen Garden) because the structural coding is different, but I can definitely implement that on another website.

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum