temi84 Posted January 1, 2014 Share Posted January 1, 2014 hey everyone, i have been sitting and trying to figure out my "footer" but without succes, what i want is my class "bund" to stay at bottom of the class "siden" i use siden to have all the other article in it, i dont want it to stay at bottom if theres no text on site, i just want it to float to bottom of the content. right now its like 10 px above the bottom, and i cant get it down so its margin 0. so thats why i asking in here. hope some can help fast. how its look with the code http://www.miltons.dk/nya/ Temi this my "php" <!DOCTYPE html><html lang="da"> <head> <meta charset="ISO-8859-1" /> <title>Miltons Trimning</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body class="siden"> <article class="alt"> <article class="hoved"> <?php include("hoved.php"); ?> </article> <article class="link"> <?php include("link.php"); ?> </article> <article class="indhold"> <p>bare en tdfest se selv æøå jhsfdjkfhsdjkhfjks dhjkfhsdkjfh jksdhf jkhsdjkfh jksnjkhfdsjhf jsdhf jshdjk fhjksh fjksdhjkfh jhewbjks dbfjsdkhfj sdhjfkhsdjkfh sjdkhfjkshdjkfh jskdhfjshf jkhebjkdsbjkfhsdjk hfjkshfjk sdhjkfhjk weubfjk fjhdsjfhsdkhfjks dhfjksdh jkfhsdjkfh kjsdhfjks dhj</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> </article> <article class="bund"> <?php include("bund.php"); ?> </article> </article> </body></html> this my css: .siden{margin-top: 5px;margin-left: auto;margin-right: auto;margin-bottom: 5px;width: 1200px;border: 1px solid green;}p{ margin-left: 5px; margin-right: 5px; margin-top: 0px;}.alt{ background-color: gray; height: 100%;}.hoved{ height: 240px;}.link{ margin-top: 20px;height: 40px;text-align: center;margin-bottom: 10px;}.indhold{ background-color: gray;}.bund{ background-color: gray; margin-bottom: 0px;}.menulinksvenstre { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; -moz-border-radius-bottomleft:20px; border-bottom-left-radius:20px; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinksmidt { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinkshjre { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -webkit-border-top-right-radius:20px; -moz-border-radius-topright:20px; border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomright:20px; border-bottom-right-radius:20px; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinksvenstre:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinksvenstre:active { position:relative; top:1px;}.menulinkshjre:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinkshjre:active { position:relative; top:1px;}.menulinksmidt:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinksmidt:active { position:relative; top:1px;} Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2014 Share Posted January 1, 2014 The issue is known as collapsing margins (google) Fix: add 1px padding top and bottom or use overflow: hidden; on article container; Link to comment Share on other sites More sharing options...
temi84 Posted January 1, 2014 Author Share Posted January 1, 2014 first thanks for fast reply, secound, i tryid both in alt container and in bund (footer) without luck, could you please be more specifik where ? all containers are articles Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2014 Share Posted January 1, 2014 Google collapsing margins, understand what the problem is, and where to apply fix. 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