Jump to content

<div> postioning...


MinusMyThoughts

Recommended Posts

hopefully a simple question......how would i go about making three columns out of relatively positioned divs?...this is the problem i'm dealing with: LINK...any suggestions? each set of two should be in a column next to the two above it...love,jason

Link to comment
Share on other sites

i found a way to get three columns across, but now i need one column that spans the three......i thought i had it, but i can't get it to work in FF......you can click THIS LINK to see what i'm dealing with, and here's the code i'm using...CSS

body	{	background-color: #404040;	}div.header	{	width: 800px;	height: 275px;	background-image:url(images/FITannica_02.gif);	padding:0;	border:0;	margin-top:0px;	margin-bottom:0px;	position:relative;	top: 0;	}div.body	{	width: 800px;	height: auto;	padding:0px;	padding-bottom:1px;	border:0;	top:0px;	margin-top:0px;	margin-bottom:0px;	position:relative;	background-color: #E6E6E6;	}div.footer	{	width: 800px;	height: 115px;	background-image:url(images/FITannica_05.gif);	padding:0px;	border:0;	margin-top:0px;	margin-bottom:0px;	position:relative;	}#container	{	position:absolute;	top:0px;	left:0px;	width:100%;	display:block;	background:#404040;	border:0;	}div.colOne	{	float:left;	height: auto;	padding:0px;	margin-left:5px;	margin-right:0px;	position: relative;	}div.modC1	{	width: 210px;	height: auto;	border: 2px dotted #404040;	background-color: #FFFFFF;	padding:0px;	margin-left:0px;	margin-right:0px;	margin-bottom:10px;	position: relative;	}div.colTwo	{	height: auto;	padding:0px;	position: relative;	top:0px;	margin-left: 230px;	display:block;	}div.modC2	{	width: 335px;	height: auto;	border: 2px dotted #404040;	background-color: #FFFFFF;	padding:0px;	margin-left:0px;	margin-right:0px;	margin-bottom:10px;	position: relative;	}div.colThree	{	float:right;	height: auto;	padding:0px;	margin-right:5px;	position: relative;	}div.modC3	{	width: 210px;	height: auto;	border: 2px dotted #404040;	background-color: #FFFFFF;	padding:0px;	margin-left:0px;	margin-right:0px;	margin-bottom:10px;	position: relative;	}div.modSpan	{	height: auto;	border: 2px dotted #404040;	background-color: #FFFFFF;	padding:0px;	margin:10px;	position: relative;	}p.content	{	font: 11px arial;	text-align: justify;	padding: 2px;	}

HTML

<html><head><title>Dummy Site</title><link rel="stylesheet" href="css_sheet.css" type="text/css" media="screen,projection" /></head><body><div id="container" align="center"><div class="header"></div><div class="body" align="left"><div id="containter"><div class="colOne"><div class="modC1"><p class="content">Left Module One</p></div><div class="modC1"><p class="content">Left Module Two</p></div></div><div class="colThree"><div class="modC3"><p class="content">Right Module One</p></div><div class="modC3"><p class="content">Right Module Two</p></div></div><div class="colTwo"><div class="modC2"><p class="content">Center Module</p></div></div></div><div class="modSpan"><p class="content">This is the div that spans all three columns.</p></div></div><div class="footer"></div></div></body></html>

...any suggestions on how to make that uniform cross-browser? i'm getting lost...love,jason

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...