html - How to get rid of tiny gap between floated elements? -
i float 2 divs on html page that: http://5toneface.eu/temp/
(ignore php-warnings). between ruutleft , ruutright div there small gap or white border-like stripe. how rid of it? ruutleft , ruutright divs sides side-to-side exactly?
html is:
<!doctype html> <html lang="et"> <head> <title>dynamint</title> <link rel="stylesheet" href="style.css" type="text/css" > <link rel="stylesheet" href="navistyle.css" type="text/css" > <script src="script.js" type="text/javascript"></script> </head> <body> <div id="wrp"> <div id="header"><?php include("includes/header.php"); ?></div> <div id="container"> <div class="ruutleft">ruutleft</div> <div class="ruutright">ruutright</div> <div class="contentleft"><?php include("includes/contentleft.php"); ?></div> </div> <!-- end container --> <footer id="footertop"><?php include("includes/footer.php"); ?></footer> <!-- siia tuleb veel footerbottom --> <footer id="footerbottom"> <p id="bottomp">© 2015 waht? mööbel. rights reserved</p> </div> </div> <!--end wrp --> </body> </html>
and css pretty simple:
* { margin: 0; padding: 0; } body { font-family: calibri light, georgia, verdana, arial; background-color: #edeff0; font-size: 105%; color: #303030; line-height: 1.4; margin: 0; } #wrp { width: 100%; margin-left: auto; margin-right: auto; } #header { width: 100%; height: 96px; position: fixed; top: 0px; background-color: #fff; } #logo { float: left; margin: 2% 0 0 5%; } #container{ width: 100%; height: auto; margin-top: 0; background-color: #edeff0; } .ruutleft { width: 40%; height: 320px; margin-left: 10%; margin-top: 145px; background-color: #8ac0ca; float: left; } .ruutright { width: 40%; height: 320px; margin-right: 10%; margin-top: 145px; background-color: #cccbc9; float: right; } .contentleft { width: 80%; margin-left: auto; margin-right: auto; min-height: 400px; padding: 1% 1% 4% 1%; font-size: 95%; height: auto; }
float both elements left
.
change .ruutright
float:left
- fix issue.
Comments
Post a Comment