MinusMyThoughts Posted January 5, 2007 Share Posted January 5, 2007 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 More sharing options...
MinusMyThoughts Posted January 5, 2007 Author Share Posted January 5, 2007 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 More sharing options...
MinusMyThoughts Posted January 5, 2007 Author Share Posted January 5, 2007 i think i sorta fixed it. the links are still valid. if you've got better methods, i'd love to hear them!love,jason Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now