Register or have you forgotten your password?
Get the most out of Surmunity, read our tips here! Need an interesting blog to read? You've got to read the Surpass Blog!
| Welcome! Please register to access all of our features.
February 17th, 2007, 2:41 PM
|
#1 (permalink) |
|
DemonicAngel
Super #1
Joined in Aug 2004
Lives in Wherever The World Takes Me
Hosted on Pass76
1,847 posts
Gave thanks: 28
Thanked 35 times
|
HTML Help with Floating Divs
I'm having a problem with divs floating.
Here's a screen shot:  Here's the coding Code:
<div id="container" class="c"> <div id="mods" class="c"> <div class="modC"> <div class="modTop"><a name="referrers"></a>Recent Referrers</div> <div class="modCC"> <div class="ate"><div style="float: left;">Search Strings</div><div style="float: right;">Hits</div></div> <div class="alt"><div style="float: left;"><a href="http://www.google.com/search?q=lost whisper" title="" rel="nofollow">google.com</a></div><div style="float: right;">5:20 pm</div></div> <div class="ern"><div style="float: left;"><a href="http://board.obidasin.com/index.php?showtopic=253" title="" rel="nofollow">board.obidasin.com</a></div><div style="float: right;">12:38 pm</div></div> <div class="alt"><div style="float: left;"><a href="http://whois.domaintools.com/lost-whisper.info" title="" rel="nofollow">whois.domaintools.com</a></div><div style="float: right;">Feb 17</div></div> <div class="ern"><div style="float: left;"><a href="http://twirp.net/" title="" rel="nofollow">twirp.net</a></div><div style="float: right;">Feb 16</div></div> <div class="alt"><div style="float: left;"><a href="http://twirp.net/page/layouts" title="" rel="nofollow">twirp.net</a></div><div style="float: right;">Feb 16</div></div> <div class="ern"><div style="float: left;"><a href="http://www.surmunity.com/showthread.php?t=21966" title="" rel="nofollow">surmunity.com</a></div><div style="float: right;">Feb 16</div></div> <div class="alt"><div style="float: left;"><a href="http://board.obidasin.com/index.php?showtopic=253" title="" rel="nofollow">board.obidasin.com</a></div><div style="float: right;">Feb 16</div></div> <div class="ern"><div style="float: left;"><a href="http://board.obidasin.com/index.php?showtopic=136" title="" rel="nofollow">board.obidasin.com</a></div><div style="float: right;">Feb 16</div></div> <div class="alt"><div style="float: left;"><a href="http://www.google.com/search?sourceid=navclient" title="" rel="nofollow">google.com</a></div><div style="float: right;">Feb 15</div></div> <div class="ern"><div style="float: left;"><a href="http://board.obidasin.com/index.php?showtopic=253" title="" rel="nofollow">board.obidasin.com</a></div><div style="float: right;">Feb 15</div></div> <div class="alt"><div style="float: left;"><a href="http://search.msn.com/results.aspx?q=air gear manga downloads" title="" rel="nofollow">search.msn.com</a></div><div style="float: right;">Feb 15</div></div> <div class="ern"><div style="float: left;"><a href="http://www.google.co.uk/search?hl=en" title="" rel="nofollow">google.co.uk</a></div><div style="float: right;">Feb 14</div></div> <div class="alt"><div style="float: left;"><a href="http://board.obidasin.com/index.php?showtopic=260" title="" rel="nofollow">board.obidasin.com</a></div><div style="float: right;">Feb 14</div></div> </div> </div> <div class="modC"> <div class="modTop"><a name="repeat_referrers"></a>Repeat Referrers</div> <div class="modCC"> <div class="ate"><div style="float: left;">Search Strings</div><div style="float: right;">Hits</div></div> <div class="alt"><div style="float: left;"><a href="http://lost-whisper.info/" title="/shortstat/stat.php?ref=http://lost-whisper.info/wp-admin/post-new.php&res=http://lost-whisper.info/" rel="nofollow">lost-whisper.info</a></div><div style="float: right;">69</div></div> <div class="ern"><div style="float: left;"><a href="http://board.obidasin.com/index.php?showtopic=260" title="http://lost-whisper.info/" rel="nofollow">board.obidasin.com</a></div><div style="float: right;">5</div></div> <div class="alt"><div style="float: left;"><a href="http://twirp.net/page/layouts" title="http://lost-whisper.info/" rel="nofollow">twirp.net</a></div><div style="float: right;">2</div></div> <div class="ern"><div style="float: left;"><a href="http://www.google.com/search?sourceid=navclient" title="http://lost-whisper.info/" rel="nofollow">google.com</a></div><div style="float: right;">2</div></div> <div class="alt"><div style="float: left;"><a href="http://whois.domaintools.com/lost-whisper.info" title="http://lost-whisper.info/" rel="nofollow">whois.domaintools.com</a></div><div style="float: right;">1</div></div> <div class="ern"><div style="float: left;"><a href="http://www.surmunity.com/showthread.php?t=21966" title="http://lost-whisper.info/" rel="nofollow">surmunity.com</a></div><div style="float: right;">1</div></div> <div class="alt"><div style="float: left;"><a href="http://search.msn.com/results.aspx?q=air gear manga downloads" title="http://lost-whisper.info/" rel="nofollow">search.msn.com</a></div><div style="float: right;">1</div></div> <div class="ern"><div style="float: left;"><a href="http://www.google.co.uk/search?hl=en" title="http://lost-whisper.info/" rel="nofollow">google.co.uk</a></div><div style="float: right;">1</div></div> </div> </div> <div class="modC"> <div class="modTop"><a name="countries"></a>Countries</div> <div class="modCC"> <div class="ate"><div style="float: left;">Search Strings</div><div style="float: right;">Hits</div></div> <div class="alt"><div style="float: left;">United States</div><div style="float: right">79</div></div> <div class="ern"><div style="float: left;">Canada</div><div style="float: right">14</div></div> <div class="alt"><div style="float: left;">United Kingdom</div><div style="float: right">12</div></div> <div class="ern"><div style="float: left;">Philippines</div><div style="float: right">5</div></div> </div></div> </div> </div> <div class="modC"> <div class="modTop"><a name="searches"></a>Search Strings</div> <div class="modCC"> <div class="ate"><div style="float: left;">Search Strings</div><div style="float: right;">Hits</div></div> <div class="alt"><div style="float: left;">air gear manga downloads</div><div style="float: right;">1</div></div> <div class="ern"><div style="float: left;">lost whisper</div><div style="float: right;">1</div></div> </div> </div> </div> </div> Code:
body{
text-align: center;
background-color: #FFFFFF;
}
#container{
text-align: center;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
}
.c{
margin: 0 auto 0 auto;
}
#mods{
width: 725px;
margin: 0 auto 0 auto;
text-align: center;
padding-top: 55px;
}
.modC{
width: 230px;
float: left;
border-left: 4px solid #FFFFFF;
border-right: 4px solid #FFFFFF;
border-bottom: 5px solid #FFFFFF;
text-align: left;
}
.modTop{
text-align: left;
font-size: 15px;
font-weight: bold;
padding-top: 10px;
color: #F87217;
background-image: url(images/footer_bg.png);
height: 27px;
width: 100%;
overflow: hidden;
text-align: left;
}
.modCC{
width: 100%;
max-height: 300px;
overflow: auto;
}
.alt{
background-color: #FFF8C6;
color: #000000;
width: 100%;
text-align: left;
border-bottom: 1px solid #C35617;
font-size: 12px;
max-height: 20px;
min-height: 15px;
}
.ern{
background-color: #C3FDB8;
color: #000000;
width: 100%;
text-align: left;
border-bottom: 1px solid #C35617;
font-size: 12px;
max-height: 20px;
min-height: 15px;
}
.ate{
background-color: #C9C299;
color: #000000;
width: 100%;
text-align: left;
border-bottom: 1px solid #C35617;
font-size: 12px;
max-height: 20px;
min-height: 15px;
}
.alt a, .ern a, .ate a{
text-decoration: none;
color: #000000;
}
.alt a:hover, .ern a:hover, .ate a:hover{
text-decoration: none;
color: #000000;
font-weight: bold;
}
 |
|
    
|
|
February 17th, 2007, 2:47 PM
|
#2 (permalink) |
|
muffins
Excelling Contributor
Joined in Mar 2006
Lives in Chicago, IL
Hosted on NONE
644 posts
Gave thanks: 26
Thanked 34 times
|
Twirp, what exactly are you having a problem with? I see the image and all, but you didn't really say what you're trying to do or what's not doing what you want to do.
Otherwise let me know what you're trying, and I can help with. I are teh m4st3r with floating divs. |
|
|
|
|
February 17th, 2007, 3:17 PM
|
#3 (permalink) |
|
Surpass Fan
Super #1
Joined in Mar 2006
1,024 posts
Gave thanks: 66
Thanked 55 times
|
hi i have been playing with it, i have modified some of your code and got it working how i assume you want it to look but could you please confirm how exactly you are wanting it to appear as in this case you do not really need absolute positioning, you just give the page itself 0 padding and 0 margin. drop me an email if you want and maybe i can help you on msn or something
|
|
|
|
|
February 17th, 2007, 5:39 PM
|
#4 (permalink) | |
|
DemonicAngel
Super #1
Joined in Aug 2004
Lives in Wherever The World Takes Me
Hosted on Pass76
1,847 posts
Gave thanks: 28
Thanked 35 times
|
Quote:
I was in a rush to go somewhere It should go below the table thing that says Recent Referrers. But instead of going to the line below that, it winds up sticking to the top left corner of the window.  |
|
|
|
|
|
February 17th, 2007, 6:00 PM
|
#5 (permalink) |
|
Surpass Fan
Super #1
Joined in Mar 2006
1,024 posts
Gave thanks: 66
Thanked 55 times
|
ok i haven't spent loads of time on this for you so before anyone picks my code i did this in two minutes while working on something else (and the names of the divs are not perfect i know :P),
rather than faff around with your code for hours thought it would be easier just to show you how i would do it and you can maybe see where you need to go inbetween, hope its helpful. your code seemed to use a lot floats inside the html i felt it was far quicker to take it to the css and if you notice my css use of margins is literally in one place. i couldn't really see why you needed the container either so took that out. PHP Code:
PHP Code:
|
|
|
|
|
February 17th, 2007, 6:01 PM
|
#6 (permalink) |
|
Surpass Fan
Super #1
Joined in Mar 2006
1,024 posts
Gave thanks: 66
Thanked 55 times
|
i meant to add it, with the widths at the moment it shows 2 per line but that can be tweaked easily. as i said before feel free to contact me via email and ill be happy to talk you through what i have done
|
|
|
|