March 9th, 2007, 08:49 AM
|
|
Contributing User
|
|
Join Date: Oct 2006
Posts: 31
Time spent in forums: 10 h 56 m 33 sec
Reputation Power: 3
|
|
|
Floating box problem
After having used absolute and relative possitioning for a while, and stumbled upon floating boxes a few times I decided to give them a try.
The boxes:
xhtml Code:
 Original
- xhtml Code |
|
|
|
<div id="wrapper">
<div id="container">
<?php include $root . '/nl/' . $dir . '/' . $var . '.php' ?>
</div>
<div class="seperator"><!-- x --></div>
<div id="example">
<div>
<ul>
<!-- list of links -->
</ul>
</div>
<div class="seperatorul"><!-- x --></div>
<div class="imagelinks">
<ul>
<!-- list of images with links under them -->
</ul>
</div>
</div>
<div class="seperatorbottom"><!-- x --></div>
<!-- Footer -->
<div id="footer">
<!-- sponsor logo's -->
</div>
</div>
the css code:
css Code:
| Original
- css Code |
|
|
|
#wrapper { margin: 7px 277px; padding: 5px; border: 1px solid black; } #container { float: left; width: 532px; padding: 15px; background-color: #bfd1eb; border: 1px solid #7792b9; } #example { float: left; width: 140px; text-align: center; margin-top: 25px; } .seperator { float: left; width: 0; height: 200px; margin: 0 30px; border: 0 solid black; } .seperatorbottom { clear: both; height: 0; width: 600px; margin: 25px 0; border: 0px solid black; } #footer { width: 500px; text-align: center; border: 0px solid red; }
so the container and examplebox are both floated left, with a seperator box between them.
by default the page is zoomed at 90%, but when I zoom to 100% the example div shifts under the container.
Is this a wrong approach? how can I make it so that the boxes will remain in place regardless of the zoom level?
|
Dev Articles Community Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
