CSS / Layout question

RhythmAddict112 · Aug 30, 2005

Hi everyone,
Relatively simple question...I'm really more of a back-end guy than a designer/css guy....so I'm kind of clueless when it comes to the best method to lay things out for cross-browser compatibility. I need to make a site that has essentially, boxes placed in different places. They will be different heights/widths...for our purposes we can picture one large rectangle, with 3 boxes under it that are the same width....What is the best way for me to position each of these elements that will work in at least fireFox & IE? I'm assuming I need to use divs, I'm just unsure of the how to position them...Also, I would need everything left justified....Any links or code snippets to get me started would be fantastic. Thank you in advance.

All hail the INTERWEB!

oppcos · Aug 30, 2005

It is difficult to help without seeing an example of what you mean, but

for our purposes we can picture one large rectangle, with 3 boxes under it that are the same width....

Here's a framework that fits that description as far as I can tell that works across all browsers I have access to.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="oppcos" />
<meta name="keywords" content="TekTips" />
<meta name="description" content="TekTips" />
<meta name="robots" content="all" />

<title>TekTips Example</title>

<script type="text/javascript" language="javascript" src="test.js"></script>
<style type="text/css" media="all">
.samewidth {
	position: relative;
	float: left;
	width: 300px;
	clear: both;
	}
#big {
	height: 200px;
	background: #fbc;
	}
#middle {
	height: 100px;
	background: #bcf;
	}
#last {
	height: 60px;
	background: #cfb;
	}
</style>
</head>
<body>
<div id="big" class="samewidth">
So, this is the big rectangle.
Since you said they were all the same width, I assume this one is taller?
</div>
<div id="middle" class="samewidth">
This div is floating left.
</div>
<div id="last" class="samewidth">
As is this one.
</div>
</body>
</html>

I went ahead and gave you a full working page so you can see an example from start to finish of where to put your styles, meta tags, and the all important doctype. Hope that helps. If that's not what you are looking for or you have further questions, please post.

RhythmAddict112 · Aug 31, 2005

Hey Opp,
Thanks for your response. This is very close to what I need except I would need some blank space between the boxes (both vertically and horizontally) and I would need to have them spread out throughout the page. I'm assuming I can just specify pixes from the left? What's the best way for me to add blank space? Just add a div with a white bg? Thanks for all your help! (this would be a lot easier if I could send you a pic ! )

All hail the INTERWEB!

Vragabond · Aug 31, 2005

You would achieve these kind of gaps using margins with the existing divs. Margins are the space around the element and with divs they default to zero.

RhythmAddict112 · Aug 31, 2005

Ahh, that does make sense, Vragabond. I will google it up, thank you for your help!

All hail the INTERWEB!

oppcos · Aug 31, 2005

As you alluded to RhythmAddict112, with the relative positioning, you can also specify how far left you want an element, etc with the left: attribute.

http://www.w3schools.com/css/css_reference.asp#positioning

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS / Layout question

RhythmAddict112

Programmer

oppcos

Programmer

RhythmAddict112

Programmer

Vragabond

Programmer

RhythmAddict112

Programmer

oppcos

Programmer

Similar threads

Part and Inventory Search

Sponsor