html - How can I put a div tag to automatically go UNDERNEATH a position:relative div -
i've been getting web development , i've begun test abilities creating own websites. i've run problem though. website structured position:fixed header stay is. because of this, had include in text container underneath position:relative.
the problem having footer literally inside text container. want footer @ bottom of content* (hence, footer) unable so.
this code far:
(html)
<html> <head> <title>bigbeno37's test page</title> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div class="header"> <h1 class="headertext"> bigbeno37's site </h1> <ul class="menu"> <li><a href="#">contact me</a></li> <li><a href="#">projects</a></li> <li><a href="#">about me</a></li> <li class="currentitem"><a href="#">home</a></li> </ul> </div> <div class="container"> <div class="bodytext"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nam aliquet tincidunt libero vitae pellentesque. pellentesque auctor eros sed nibh hendrerit vulputate. aliquam vitae tellus purus. suspendisse eleifend tellus eu tincidunt imperdiet. duis ut eros nec justo ultricies sollicitudin. proin gravida lacinia nisi, nec porta neque tincidunt in. nullam feugiat ultricies eros ac viverra. aenean in congue magna. cras fermentum adipiscing congue. ut laoreet eros non dolor iaculis vestibulum. cras ultrices, ante non consequat blandit, turpis sapien lacinia dui, eu posuere diam dolor quis velit. vivamus leo erat, adipiscing @ lectus id, gravida feugiat elit. morbi sit amet rhoncus nisi, vehicula varius ipsum. pellentesque eget tincidunt orci.<br /><br /> donec viverra tincidunt sodales. cras pulvinar bibendum malesuada. fusce erat tortor, hendrerit et eros non, faucibus mollis magna. phasellus ultrices elit non libero congue, tincidunt ultrices tellus elementum. suspendisse vel augue eu risus auctor volutpat. vivamus congue, lacus in iaculis sagittis, lectus turpis dictum ipsum, varius aliquet lectus massa eget tortor. aenean @ tellus non tellus placerat porttitor sit amet vel purus.<br /><br /> pellentesque venenatis molestie ultrices. aliquam vitae purus justo. lorem ipsum dolor sit amet, consectetur adipiscing elit. vestibulum vel leo nulla. etiam dignissim nisl enim, vulputate pretium felis placerat et. curabitur eleifend porttitor aliquam. pellentesque in volutpat quam. integer sed mauris eu purus tincidunt pharetra vel ac metus. fusce eget ante nec tortor scelerisque pretium vitae ac enim. in quis ultrices sapien, @ imperdiet orci. ut neque nunc, lacinia non nisi eget, facilisis accumsan ante. nullam vel ligula leo.<br /><br /> phasellus dictum dolor in interdum aliquet. nulla posuere quam ac molestie mattis. pellentesque laoreet magna @ porta. in laoreet tellus, ac porttitor lectus. suspendisse nec diam in quam volutpat fermentum. maecenas semper tincidunt quam eu dictum. maecenas tincidunt convallis vehicula. mauris @ nibh id neque lacinia porta et dignissim urna. nulla pharetra eu lorem vel molestie. nunc pretium quam ac egestas commodo. nulla tempor sapien eu est rhoncus sagittis. phasellus non luctus nisl. morbi elementum dui tincidunt metus aliquet, eu tincidunt felis sagittis. nullam fringilla congue tortor, imperdiet rhoncus quam hendrerit at. curabitur mattis tortor eget commodo scelerisque.<br /><br /> suspendisse quis arcu vulputate, aliquam enim quis, fermentum massa. sed libero nulla, cursus vel odio non, congue gravida purus. aenean posuere dapibus augue, @ posuere dui posuere sed. morbi sed risus erat. sed pulvinar, lacus id pellentesque pretium, orci felis elementum justo, @ malesuada leo nulla ac quam. praesent vitae risus eros. duis ac dapibus dui. sed viverra porttitor dui, in iaculis lectus posuere eu. pellentesque sed dignissim arcu. aenean lacus erat, euismod eu elementum a, vehicula interdum mi. nam blandit hendrerit dolor ut pharetra. pellentesque orci turpis, convallis et placerat ut, tincidunt eu urna. morbi aliquet, eros vel commodo ultrices, odio est vehicula risus, id elementum tellus erat nec diam. nulla aliquet consectetur porttitor. etiam blandit accumsan sapien @ molestie.<br /><br /> maecenas bibendum auctor leo eget cursus. aliquam consectetur est bibendum imperdiet euismod. duis bibendum vestibulum turpis. vivamus rutrum mi vel interdum interdum. vestibulum mollis lectus tortor. curabitur lorem sapien, sollicitudin orci sed, vulputate cursus dolor. etiam lacinia tristique enim, viverra lacus aliquet eu. vivamus et ullamcorper massa. phasellus molestie orci augue, vitae suscipit tellus ornare quis. sed diam mauris, feugiat ac magna id, feugiat consequat orci. nullam et dapibus risus. in luctus libero sit amet fermentum elementum. proin lectus justo, eleifend et varius ac, volutpat consequat nunc.<br /><br /> vivamus faucibus pretium felis, scelerisque nisi aliquam quis. nulla facilisis, diam quis tempus blandit, mauris nulla luctus neque, bibendum convallis lorem elit et tellus. vestibulum sollicitudin ligula, nec ultricies odio. vivamus quis lobortis massa, scelerisque vestibulum velit. nunc vitae bibendum risus, eu dignissim ipsum. nunc non lorem ut dolor fermentum vulputate. in egestas mi @ justo sodales bibendum. cras pellentesque, metus vitae posuere feugiat, dui tortor molestie sem, in fringilla magna est vitae felis. sed dapibus ut massa et rhoncus. integer mattis venenatis aliquam. in hac habitasse platea dictumst.<br /><br /> donec ut purus posuere, volutpat ipsum et, cursus tortor. proin sed suscipit arcu, @ dapibus sapien. duis scelerisque metus non orci feugiat, ac auctor velit laoreet. etiam id metus bibendum, mollis eros sed, facilisis dui. duis @ lectus ultrices, scelerisque nunc sed, dictum enim. etiam malesuada justo @ orci tincidunt, in varius augue tempor. nulla fringilla aliquam ipsum, in venenatis turpis fringilla ut. in facilisis ac metus eu condimentum. proin ac sapien ac orci placerat sollicitudin. donec tristique lobortis interdum. curabitur vel tellus ac lacus dictum scelerisque sit amet @ mauris.<br /><br /> maecenas rhoncus suscipit ante sit amet dapibus. vivamus eu enim in ante scelerisque ultricies id ac magna. nam in mattis ante. in scelerisque tincidunt nisl et feugiat. duis interdum metus pharetra metus fringilla, sit amet ultrices urna malesuada. mauris sollicitudin massa. pellentesque sed tristique orci. cras massa mauris, ornare @ elit at, porta elementum elit. proin mollis diam sed mattis iaculis. fusce fringilla dolor vel facilisis iaculis. nam cursus metus vitae mi auctor, ac viverra lectus lobortis. maecenas @ enim gravida, rutrum justo non, blandit ligula.<br /><br /> ut sollicitudin velit non dictum faucibus. in hac habitasse platea dictumst. vestibulum arcu metus, posuere @ eros ut, ultricies faucibus risus. vestibulum lacus augue, vulputate gravida quis, tincidunt quis nunc. maecenas egestas orci elit, vel molestie erat semper ut. integer pharetra orci vitae nisi volutpat porta. sed ac pulvinar turpis, id ullamcorper enim. curabitur tempus, ante eget cursus hendrerit, est urna hendrerit dui, @ gravida dui justo commodo quam. proin ac est nec odio rhoncus dignissim. morbi placerat, nibh sed cursus pretium, nibh ipsum cursus leo, eget rutrum ante nisi nec orci. vestibulum semper malesuada felis, vel scelerisque mi malesuada eu. maecenas suscipit, ante @ ultricies cursus, felis sem dictum erat, @ facilisis lectus orci vel neque. sed vel risus malesuada sem rutrum sodales tincidunt quis purus.<br /><br /> sed mi ligula, luctus et urna et, commodo scelerisque est. sed ante erat, commodo ac varius ac, pharetra est. donec cursus purus quis placerat vulputate. phasellus mi urna, auctor facilisis ac, vulputate nec purus. nunc scelerisque massa diam, non convallis orci tincidunt vitae. aliquam quis mauris eu elit bibendum vehicula sit amet et felis. vivamus lacinia purus eu ligula condimentum, vitae fermentum purus bibendum. aenean scelerisque nulla vel diam cursus scelerisque.<br /><br /> etiam vestibulum tempor nibh, id vehicula lorem fermentum in. etiam nulla ipsum, ullamcorper ullamcorper aliquet vel, aliquet quis justo. in vehicula ipsum vehicula magna volutpat, nec sagittis lorem placerat. duis posuere volutpat arcu sit amet auctor. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. duis ac mauris diam. fusce venenatis leo facilisis adipiscing rhoncus. aliquam erat volutpat. duis molestie id massa sit amet auctor. aenean semper eleifend facilisis.<br /><br /> vestibulum neque nulla, tempus rhoncus turpis sed, iaculis varius orci. curabitur dolor tellus, bibendum ut orci at, luctus lobortis sem. phasellus @ arcu quis turpis aliquet interdum eget vel erat. aliquam erat tellus, vestibulum et neque sit amet, gravida vehicula sapien. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. vestibulum nunc mauris, bibendum et egestas in, accumsan nunc. nunc velit commodo, molestie libero eget, eleifend enim. proin ut mi ac libero euismod viverra. <br /><br /> </p> </div> </div> <div class="footer"> <h1>bigbeno37 2014</h1> <h2>created, maintained , tested on bigbeno37</h2> </div> </body> </html> (css)
html, body{ height: 100%; } li{ float: right; } .container{ margin: auto; position: relative; top: 105px; border-style: solid solid solid solid; border-width: 1px; border-color: #52c7c5; width: 636px; } .header{ width: 100%; background-color: #52c7c5; height: 100px; position: fixed; margin: auto; border-style: none solid; border-width: 1px; border-color: #52c7c5; z-index: 1; } .headertext{ font-size: 24px; color: white; font-family: verdana; top: 70px; left: 5px; position: relative; } .menu{ list-style-type: none; margin: 0 5px; padding: 0; overflow: hidden; position: relative; top: 50px; } .menu a{ display: block; margin: 0 8px; text-decoration: none; color: white; font-family: verdana; font-size: 16px; padding: 3px; } .menu li:hover{ background-color: green; } .currentitem{ font-weight: bold; } .bodytext{ padding: 15px; font-family: verdana; font-size: 12px; } .footer{ background-color: #52c7c5; height: 30px; width: 636px; margin: auto; border-style: none solid none solid; border-width: 1px; border-color: #52c7c5; position: relative; } .footer h1, h2{ color: white; position: relative; margin: 10px; font-family: verdana; font-size: 12px; } .footer h1{ float: left; } .footer h2{ float: right; } so, should fix problem?
edit i've updated code, , want centered:
(html same)
(css)
html, body{ height: 100%; } .header{ width: 636px; background-color: #52c7c5; height: 100px; position: fixed; top: 0; left: 0; z-index: 1; } .headertext{ font-size: 24px; color: white; font-family: verdana; top: 30px; left: 15px; position: relative; } .menu{ list-style-type: none; margin: 0 5px; padding: 0; overflow: hidden; position: relative; top: 50px; } .menu li{float:left} .menu a{ display: block; margin: 0 8px; text-decoration: none; color: white; font-family: verdana; font-size: 16px; padding: 3px; } .menu li:hover{ background-color: green; } .currentitem{ font-weight: bold; } .container{ clear: both; position: relative; top: 100px; min-height: 100%; width: 636px; } .bodytext{ padding: 15px; font-family: verdana; font-size: 12px; } .footer{ background-color: #52c7c5; height: 30px; width: 636px; position: absolute; bottom: 2px; } .footer h1, h2{ color: white; position: relative; margin: 10px; font-family: verdana; font-size: 12px; } .footer h1{ float: left; } .footer h2{ float: right; }
explanation
i've corrected of
.menufloating elements.menu li{float:left}.as header has height of 100px , positioned fixed, should position
.containerrelative, settop100px(the height of.header), below.header, not underi had clear containter's float
.container{ clear:both; position:relative; top:100px;}won't float header, in case header's position changed.finally, have position footer
100pxdown (the height of header).
edit
if want content centered, use margin:0 auto; in styles , give fixed width element(s), margin:0 auto won't work if element has no width defined.
note
for elements fixed positioning have use left , right properties.
you have define them -> left:0; right:0; margin:0 auto; , giving no fixed direction element(s), automatically align center.
.header{ width: 636px; /*this sets fixed on element*/ background-color: #52c7c5; height: 100px; position: fixed; top:0; left:0; /*aligning our element center setting left , right 0*/ right:0; margin:0 auto; /*centers our element (for fixed positioning use our left , right properties)*/ border-style: none solid; border-width: 1px; border-color: #52c7c5; z-index: 1; } .headertext{ font-size: 24px; color: white; font-family: verdana; top: 15px; left: 15px; position: relative; width:600px; /*fixed width aligning center*/ margin:0 auto; /*aligns center*/ } .menu{ width:600px; /*fixed width aligning center*/ list-style-type: none; margin: 0 5px; padding: 0; overflow: hidden; position: relative; top: 15px; left:5px; margin:0 auto; /*aligns center*/ } .menu li{float:left} .menu a{ display: block; margin: 0 8px; text-decoration: none; color: white; font-family: verdana; font-size: 16px; padding: 3px; } .menu li:hover{ background-color: green; } .currentitem{ font-weight: bold; } .container{ clear:both; position:relative; top:100px; width:600px; /*fixed width aligning center*/ margin:0 auto; /*aligns center*/ } .bodytext{ padding: 15px; font-family: verdana; font-size: 12px; } .footer{ background-color: #52c7c5; height: 30px; width: 636px; margin: auto; border-style: none solid none solid; border-width: 1px; border-color: #52c7c5; position: relative; top:100px; } .footer h1, h2{ color: white; position: relative; margin: 10px; font-family: verdana; font-size: 12px; } .footer h1{ float: left; } .footer h2{ float: right; } 
Comments
Post a Comment