HTML/CSS Footer division into columns -
i'm designing website, , i'm trying part regarding footer. far haven't had troubles, till decided footer layout.
to precise: i want divide footer 3 separate columns shown on image below:
yet outcome this:
as can see, footer column not hold it's width , stretches content. different settings other things happened, never appeared proper me.
my current, non working approach:
html
<html> <!-- begin head --> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- start wowslider.com head section --> <link rel="stylesheet" type="text/css" href="engine0/style.css" /> <script type="text/javascript" src="engine0/jquery.js"></script> <!-- end wowslider.com head section --> </head> <!-- end head --> <!-- begin body --> <body> <!-- begin wrapper footer pushing --> <div class="wrapper"> <!-- begin .page --> <div class="page"> <!-- begin .logo --> <div class="logo"> <img class="logobb" src="images/logo.png"> <br><text class="logosub">tworzymy dla ciebie</text></br> </div> <!-- end .logo --> <!-- begin .menu --> <div class="menu"> <hr class="top_line"> <ul> <li><a href="#">o nas</a></li> <li><a href="#">galeria produktÓw</a></li> <li><a href="#">aktualnoŚci</a></li> <li><a href="#">zadaj pytanie</a></li> <li><a href="#">kontakt</a></li> </ul> <hr class="bottom_line"> </div> <!-- end .menu --> <!-- start wowslider.com body section --> <!-- add <body> of page --> <div id="wowslider-container0"> <div class="ws_images"><ul> <li><img src="data0/images/slide1.png" alt="http://wowslider.net/" title="wood" id="wows0_0"/></li> <li><img src="data0/images/3025992posterpdesignwork.jpg" alt="cubes" title="cubes" id="wows0_1"/></li> </ul></div> <div class="ws_bullets"><div> <a href="#" title="wood"><span><img src="data0/tooltips/slide1.png" alt="wood"/>1</span></a> <a href="#" title="cubes"><span><img src="data0/tooltips/3025992posterpdesignwork.jpg" alt="cubes"/>2</span></a> </div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">wowslider.com</a> wowslider.com v8.6</div> <div class="ws_shadow"></div> </div> <script type="text/javascript" src="engine0/wowslider.js"></script> <script type="text/javascript" src="engine0/script.js"></script> <!-- end wowslider.com body section --> </div> <!-- end .page --> <!-- footer pusher --> <div class="push"></div> </div> <!-- end .wrapper --> <!-- begin footer --> <div class="footer"> <!-- begin footer container --> <div class="footer_container"> <!-- begin .findus --> <div class="findus"> </div> <!-- end .findus --> <!-- begin .designers --> <div class="designers"> </div> <!-- end .designers --> <!-- begin .inspirations --> <div class="inspirations"> </div> <!-- end .inspirations --> </div> <!-- end footer container --> </div> <!-- end footer --> </body> <!-- end body --> css
/* general page settings */ * { margin: 0; padding: 0; } .page { margin: 25px auto; width: 960px; } /* wrapper & html settings */ html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -168px; } .footer, .push { height: 168px; /* .push must same height .footer */ } /* footer settings */ .footer { clear: both; width: 100%; background-color: #323232; } .footer_container { width: 960px; margin: 0 auto; background-color: red; } .footer .findus { float: left; width: 33,33333%; } .footer .designers { float: left; width: 33,33333%; background-color: red; } .footer .inspirations { float: left; width: 33,33333%; } /* logo settings */ img.logobb { margin: 0 28.95833333333333%; } .logosub { font-family: federant; font-size: 17.83px; color: #94979b; padding: 0 40.625%; } /* menu settings */ .menu { margin: 0 90px; } .menu ul { text-align: center; list-style-type: none; margin: 17px auto; } .menu li { display: inline-block; } .menu { color: black; text-decoration: none; font-family: slabo; font-size: 18px; } .menu .top_line { width: 780px; margin: 32px 0 0; height: 2px; color: black; background-color: black; } .menu .bottom_line { width: 780px; margin: 0 0 40px; height: 3px; color: black; background-color: black; } what have tried (none worked):
- applying table footer
- using left, right , center float (in order) both % values , pixel values
- tried fixed values of in footer (this worked) yet i'm aiming make website responsive not way go means.
if happen notice other mistakes have made, i'd grateful pointing them out.
your footer columns need have position: relative them become columns. also, have commas in width percentages need decimals. each footer css follows (with correct class names, of course--i grabbed 1 example):
.footer .inspirations { float: left; width: 33.33333%; position: relative; }
Comments
Post a Comment