Jump to content
JustMike

Problems with the position property in the footer area

Recommended Posts

Hi!I am working at a wordpress theme and I have a problem that I can't figure out.This is the the HTML code I have:

<!-- this is in the header.php file -->	<div class="logo">		<div class="logo-inner">			<a href="<?php echo get_option('home'); ?>"><img src="LOGO_HERE" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a>			<span><a href="AD_URL" target="_blank"><img src="AD_IMG"/></a></span>		</div>	</div><div id="page-wrap">	<div class="content"><!-- this is in index.php, single.php, page.php and so on --><div class="leftside-content"><!-- the loop here --></div><!-- and this is in the footer.php file --></div><?php get_sidebar(); ?>	<div id="footer">	<center>©<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/>			<?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center>	</div></div>

And here is my CSS code:

#page-wrap { width: 960px;margin: 20px auto;}.logo{width: 100%;position: absolute;z-index: 999;}.logo-inner{width: 1050px;margin: auto;}.logo-inner span{float: right;z-index: -999;}.content{margin-top: 90px;padding-top: 30px;margin-bottom: 10px;width: 960px;background: white;outline:rgba(0, 0, 0, 0.1) solid 6px;position: absolute;z-index: 8;}.leftside-content{width: 620px;margin-top: 10px;margin-left: 5px;float: left;z-index: -1;}#sidebar{margin-top: 110px;margin-right: -25px;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;background: url('images/scribble_light.png');outline:rgba(0, 0, 0, 0.1) solid 6px;width: 280px;float: right;position: relative;z-index: 9;}#footer{background: url('images/footer_bg.png') repeat-x;width: 900px;height: 25px;top:100%;clear: both;position: absolute;z-index: 10;}

I can't figure out how to make the footer to stay under the page-wrap div, on the bottom of the page.The clear property clear doesn't work, I also tried with overflow: auto in the page-wrap, positioning the footer, :after for the page-wrap and :before for the footer, I also put the footer div after the page-wrap div.Here is a picture of the design with the current code:

 

2aec120214.jpg

 

Thanks in advance for your help!

Edited by JustMike

Share this post


Link to post
Share on other sites

Sorry for the comments, I copied the code from the wordpress theme files (wich are php files) and paste it here.

Share this post


Link to post
Share on other sites

You have position absolute on the footer. Delete that.

 

After removing the Php (which is useless to me) I end up with the following... but I need you to add some lorem ipsum content so that it will make more sense.

<!DOCTYPE><html><meta charset="utf-8"><head><title>title</title><style>#page-wrap { width: 960px;margin: 20px auto;}.logo{width: 100%;position: absolute;z-index: 999;}.logo-inner{width: 1050px;margin: auto;}.logo-inner span{float: right;z-index: -999;}.content{margin-top: 90px;padding-top: 30px;margin-bottom: 10px;width: 960px;background: white;outline:rgba(0, 0, 0, 0.1) solid 6px;position: absolute;z-index: 8;}.leftside-content{width: 620px;margin-top: 10px;margin-left: 5px;float: left;z-index: -1;}#sidebar{margin-top: 110px;margin-right: -25px;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;background: url('images/scribble_light.png');outline:rgba(0, 0, 0, 0.1) solid 6px;width: 280px;float: right;position: relative;z-index: 9;}#footer{background: url('images/footer_bg.png') repeat-x;width: 900px;height: 25px;/*top:100%;*/clear: both;/*position: absolute;*/z-index: 10;}</style></head><body><div class="logo"><div class="logo-inner"><a href="#"><img src="LOGO_HERE" alt="LOGO_HERE" title="TITLE"/></a><span><a href="#" target="_blank"><img src="#"/></a></span></div></div><div id="page-wrap"><div class="content"><div class="leftside-content"></div></div><p>php get_sidebar</p><div id="footer"><center>©bloginfo_name year <br/>bloginfo_name* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center></div></div></body></html>

You shouldn't need to use z-index except rarely. <center> is an obsolete tag. Images don't have title attributes. Oh, also position absolute on the content div must be deleted.

Edited by davej

Share this post


Link to post
Share on other sites

It's still not working properly. I think that the position from the content div and the position from the sidebar div is messing up de clear property from the footer.

Here is a html version of this:

 

theme_work_html.zip

Share this post


Link to post
Share on other sites

OK, let me look at this zipped file.

 

Was this your starting point or is this what you wrote?

Edited by davej

Share this post


Link to post
Share on other sites

The title attribute is used on most element except for very few, in fact it used to be the case (don't know if it still applies) that FF would not show the alt attribute text when you hover over a image, only the title text.

 

edit: it still applies.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Ok, I'm not sure what your intent is regarding left-side content. Are you also going to have a right-side content? Here is something to look at...

* {	margin: 0;	padding: 0;}html,body{	height: 100%;        min-height: 450px; /* height of page content */}body{	background: url('images/60degree_gray.png');}#mainwrapper{   min-height: 100%;   margin: 0 0 -40px 0; /* negative equal to footer height+padding */}#page-wrap { 	width: 960px;        margin: 20px auto;          height: 100%;}.tmenu{    width: 100%;      background-color: rgba(75, 73, 71, 0.7);      height: 24px;    font-size: 11pt;      font-family: 'PT Sans', Arial, sans-serif;      font-weight: bold;      /*position: relative;  */    /*border-bottom: 1px solid #4b4947; */    color: #fff;}.tmenu a{    color: #fff;      display: inline-block;      width: 100px;      text-align: center;      text-decoration: none;     /* text-shadow: 1px 1px 0px #283744;  */	font-family: Philosopher;}.tmenu ul{    padding: 0;  	margin: 0 auto;      width: 600px;      height: 60px;  	color: #fff;	}.tmenu li{    display: inline;      float: left;    color: #fff;	}.tmenu li:hover{    background-color: orange;}.logo{	width: 100%;	position: absolute;	z-index: 999;}.logo-inner{	width: 1050px;	margin: auto;}.logo-inner span{	float: right;	z-index: -999;}.content{	margin-top: 90px;	padding-top: 30px;	margin-bottom: 10px;	width: 960px;	background: white;	outline:rgba(0, 0, 0, 0.1) solid 6px;	/*position: absolute;*/	z-index: 8;        overflow:hidden;}.leftside-content{	width: 600px;	margin: 10px 10px;	float: left;	z-index: -1;/*border:1px dotted red;*/}#sidebar{	margin-top: 10px;	margin-right: 20px;	padding: 10px 10px;	background: url('images/scribble_light.png');	outline:rgba(0, 0, 0, 0.1) solid 6px;	width: 280px;	float: right;	position: absolute;        right:10px;        top: 150px;	z-index: 999;}#sidebar h2{	margin-top: 3px;	font-family: Lobster;	font-weight: 500;	/*border-bottom: 1px solid #d85c30;*/	color: #d85c30;}#sidebar ul li {	list-style: none;}#social a{	text-decoration: none;}#social a:hover {	background-color: transparent;	opacity:0.7;	text-decoration: none;} #social img {	-moz-transition: all 0.8s ease-in-out;	-webkit-transition: all 0.8s ease-in-out;	-o-transition: all 0.8s ease-in-out;	-ms-transition: all 0.8s ease-in-out;	transition: all 0.8s ease-in-out;}#social img:hover {	-moz-transform: rotate(360deg);	-webkit-transform: rotate(360deg);	-o-transform: rotate(360deg);	-ms-transform: rotate(360deg); transform: rotate(360deg);}#footer{	background: url('images/footer_bg.png') repeat-x;	/*width: 100%;*/	height: 25px;	clear: both;        text-align: center;        padding-top:15px;	}

and

<!DOCTYPE html><html><head><title>Page Title</title><link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/><link href='style.css' rel='stylesheet' type='text/css'/>		</head><body><div id="mainwrapper"><!-- Top Menu START --><div class="tmenu">  <ul>	<li><a href="">Home</a></li>	<li><a href="">Forums</a></li>	<li><a href="">Snippets</a></li>	<li><a href="">Reference</a></li>	<li><a href="">Download</a></li>  </ul></div><!-- Top Menu END -->	<!-- Logo and Ad START --><div class="logo"><div class="logo-inner">	<a href="index.html"><img src="images/logo.png" title="SITE_NAME"/></a>	<span><a href="AD_LINK" target="_blank"><img src="images/lf_ad.png" title="AD_NAME"/></a></span></div></div><!-- Logo and Ad END -->	<!-- Page content START --><div id="page-wrap"><div class="content"><div class="leftside-content">	<h2><a href="ARTICLE_PAGE">Lorem ipsum</a></h2><p><b>leftside-content</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dolor metus. Nulla tincidunt blandit nibh. Morbi consequat, risus sed tristique dignissim, velit mi pulvinar ligula, id commodo eros lorem quis nibh. Maecenas vehicula nec quam quis vehicula. Fusce ac purus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quam purus, pretium et porta id, pretium at velit. Proin in mi diam. Ut porttitor et turpis non ultricies.Fusce pellentesque, mi id mollis condimentum, augue ligula ultrices nisl, sit amet gravida metus odio nec nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ornare id felis a interdum. Nullam imperdiet blandit accumsan. Ut vulputate magna nulla, vitae placerat nulla varius ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et ipsum a neque volutpat posuere.</p></div><div id="sidebar"><div id="social">   <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank">  <img border="0" src="images/social/rss.png" style="margin-right:1px;" alt="Icon"/>  </a>   <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank">  <img border="0" src="images/social/rss-email.png" style="margin-right:1px;" alt="Icon"/>  </a>  <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank">  <img border="0" src="images/social/facebook.png" style="margin-right:1px;" alt="Icon"/>  </a>  <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank">  <img border="0" src="images/social/twitter.png" style="margin-right:1px;" alt="Icon"/>  </a>  <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank">  <img style="margin-right:1px;" src="images/social/google-plus.png"/>  </a>  <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank">  <img style="margin-right:1px;" src="images/social/pinterest.png" alt="Follow Me on Pinterest" />  </a> </div> <br/>  <h2>First Menu</h2>  <ul>  <li>First Item</li>  <li>Second Item</li>  <li>Third Item</li>  </ul></div></div></div></div></div><!-- Page Content END -->	<!-- Footer Area START --><div id="footer">  © SITE_NAME | 2013</div>		<!-- Footer Area END --></body>	</html>

--EDIT-- I have updated the code above once again.

Edited by davej

Share this post


Link to post
Share on other sites

I was thinking that I need the leftside-column div to make the content to stay in the leftsite of the content div or it will go under the sidebar div.

Yes, the problem is that I can't make the sidebar to hang over the right border and the sticky footer to stay in his place.

Share this post


Link to post
Share on other sites

Well, what I don't understand about a sticky footer is whether you can make the content height auto-adjusting. Maybe that is accomplished when you have a "push" div?

Edited by davej

Share this post


Link to post
Share on other sites

The sticky footer stay at the bottom of the page either if you have ten paragraphs either you have one paragraph.

Share this post


Link to post
Share on other sites

In my code above you have to set the height of the content to protect the content from the sticky-footer. It won't auto-adjust if you add content. To make it auto-adjust I think you have to add a "push" div at the bottom of the page.

Edited by davej

Share this post


Link to post
Share on other sites

The push div, is primarily used to prevent overlap of content by footer, the height of footer and push div are usually set together, but you have used minus bottom margin on #mainwrapper so you don't need push, BUT! you have not allowed for border-width, this allows 12px of overlap to occur, well in FF anyway.

Share this post


Link to post
Share on other sites

You have two misplaced closing div tags, using minus bottom margin does not seem to work how it should, i've never done it this way, i have used the minus top margin of height of footer to position the footer.

 

Yours seem to work correctly, if you use margin-bottom: -25px; same height as footer on mainwrapper, and remove top padding from footer, which seems to correct the overlapping problem (and removed extra closing divs), not checked in other browsers mind you.

Share this post


Link to post
Share on other sites

I changed it to what i know works, yours with #mainwrapper minus margin-bottom: looks like it should work, but you are not working with full height of browser screen, which throws up problems getting the footer to show correctly without jumping up and down, also the padding on footer, caused overlap problem as well, overflow-y is added to html to prevent page jumping right to left when scrollbar appears.

* {	margin: 0;	padding: 0;}html,body{	height: 100%;        min-height: 450px; /* height of page content */}body{	background: url('images/60degree_gray.png');        }html{overflow-y: scroll;}#mainwrapper{   min-height: 100%;   min-width:1062px;   position:relative;}#page-wrap { 	width: 960px;        margin: 14px auto;         height: 100%;}.tmenu{    width: 100%;      background-color: rgba(75, 73, 71, 0.7);      height: 24px;    font-size: 11pt;      font-family: 'PT Sans', Arial, sans-serif;      font-weight: bold;      color: #fff;}.tmenu a{    color: #fff;      display: inline-block;      width: 100px;      text-align: center;      text-decoration: none;     /* text-shadow: 1px 1px 0px #283744;  */	font-family: Philosopher;}.tmenu ul{    padding: 0;  	margin: 0 auto;      width: 600px;      height: 60px;  	color: #fff;	}.tmenu li{    display: inline;      float: left;    color: #fff;	}.tmenu li:hover{    background-color: orange;}.logo{	width: 100%;	position: absolute;	z-index: 999;}.logo-inner{	width: 1050px;	margin: auto;}.logo-inner span{	float: right;	z-index: -999;}.content{	margin-top: 90px;	padding-top: 30px;	margin-bottom: 10px;	width: 960px;	background: white;	outline:rgba(0, 0, 0, 0.1) solid 6px;	/*position: absolute;*/	z-index: 8;        overflow:hidden;}.leftside-content{	width: 600px;	margin: 10px 10px;	float: left;	z-index: -1;/*border:1px dotted red;*/}#sidebar{	margin-top: 10px;	margin-right: 20px;	padding: 10px 10px;	background: url('images/scribble_light.png');	outline:rgba(0, 0, 0, 0.1) solid 6px;	width: 280px;	float: right;	position: absolute;        right:10px;        top: 150px;	z-index: 999;}#sidebar h2{	margin-top: 3px;	font-family: Lobster;	font-weight: 500;	/*border-bottom: 1px solid #d85c30;*/	color: #d85c30;}#sidebar ul li {	list-style: none;}#social a{	text-decoration: none;}#social a:hover {	background-color: transparent;	opacity:0.7;	text-decoration: none;} #social img {	-moz-transition: all 0.8s ease-in-out;	-webkit-transition: all 0.8s ease-in-out;	-o-transition: all 0.8s ease-in-out;	-ms-transition: all 0.8s ease-in-out;	transition: all 0.8s ease-in-out;}#social img:hover {	-moz-transform: rotate(360deg);	-webkit-transform: rotate(360deg);	-o-transform: rotate(360deg);	-ms-transform: rotate(360deg); transform: rotate(360deg);}#footer{	background: url('images/footer_bg.png') repeat-x;        text-align: center;        overflow:hidden;        margin-top: -40px;	}                #footer, #push {height: 40px; clear: both;}        p, h1, h2, h3, h4, h5, h6 {margin: 0.9em 0;}
<!DOCTYPE html><html><head><title>Page Title</title><link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/><link href='styleDavej.css' rel='stylesheet' type='text/css'/>		</head><body><div id="mainwrapper"><!-- Top Menu START --><div class="tmenu">  <ul>	<li><a href="">Home</a></li>	<li><a href="">Forums</a></li>	<li><a href="">Snippets</a></li>	<li><a href="">Reference</a></li>	<li><a href="">Download</a></li>  </ul></div><!-- Top Menu END -->	<!-- Logo and Ad START --><div class="logo"><div class="logo-inner">	<a href="index.html"><img src="images/logo.png" title="SITE_NAME"/></a>	<span><a href="AD_LINK" target="_blank"><img src="images/lf_ad.png" title="AD_NAME"/></a></span></div></div><!-- Logo and Ad END -->	<!-- Page content START --><div id="page-wrap"><div class="content"><div class="leftside-content">	<h2><a href="ARTICLE_PAGE">Lorem ipsum</a></h2><p><b>leftside-content</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dolor metus. Nulla tincidunt blandit nibh. Morbi consequat, risus sed tristique dignissim, velit mi pulvinar ligula, id commodo eros lorem quis nibh. Maecenas vehicula nec quam quis vehicula. Fusce ac purus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quam purus, pretium et porta id, pretium at velit. Proin in mi diam. Ut porttitor et turpis non ultricies.Fusce pellentesque, mi id mollis condimentum, augue ligula ultrices nisl, sit amet gravida metus odio nec nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ornare id felis a interdum. Nullam imperdiet blandit accumsan. Ut vulputate magna nulla, vitae placerat nulla varius ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et ipsum a neque volutpat posuere.</p></div></div>   </div> <div id="push"> </div><div id="sidebar"><div id="social">   <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank">  <img border="0" src="images/social/rss.png" style="margin-right:1px;" alt="Icon"/>  </a>   <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank">  <img border="0" src="images/social/rss-email.png" style="margin-right:1px;" alt="Icon"/>  </a>  <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank">  <img border="0" src="images/social/facebook.png" style="margin-right:1px;" alt="Icon"/>  </a>  <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank">  <img border="0" src="images/social/twitter.png" style="margin-right:1px;" alt="Icon"/>  </a>  <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank">  <img style="margin-right:1px;" src="images/social/google-plus.png"/>  </a>  <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank">  <img style="margin-right:1px;" src="images/social/pinterest.png" alt="Follow Me on Pinterest" />  </a> </div> <br/>  <h2>First Menu</h2>  <ul>  <li>First Item</li>  <li>Second Item</li>  <li>Third Item</li>  </ul></div></div><!-- Page Content END -->	<!-- Footer Area START --><div id="footer">    <p>© SITE_NAME | 2013</p></div>		<!-- Footer Area END --></body>	</html>

Share this post


Link to post
Share on other sites

Yes, I like the automatic sticky footer better than my hack.

 

I think you still need to style your image links to avoid the blue border in IE.

Share this post


Link to post
Share on other sites

Yes, in IE the logo and the ad have a blue border and the outline doesn't show, but in Firefox, Opera and Chrome works great.

Right now I'm searching a solution for the border and for the outline.

Share this post


Link to post
Share on other sites

Heres al side panel that will merge with text content when page width reduced.

Theres a problem in opera using outline it will show through overlapping elements, so i had to use semi-transparent background instead.

* {	margin: 0;	padding: 0;}html{	height: 100%;}body{	background: url('images/60degree_gray.png');	height: 100%;}html{overflow-y: scroll;}p, h1, h2, h3, h4, h5, h6 {margin: 0.9em 0;}img {border: none;}#page-wrap {    margin: 84px auto 12px;    padding: 1px;    position: relative;    width: 90%;}.tmenu{    width: 100%;      background-color: rgba(75, 73, 71, 0.7);	height: 24px;    font-size: 11pt;      font-family: 'PT Sans', Arial, sans-serif;      font-weight: bold;      position: relative;      border-bottom: 1px solid #4b4947; 	color: #fff;}.tmenu a{    color: #fff;      display: inline-block;      width: 100px;      text-align: center;      text-decoration: none;      text-shadow: 1px 1px 0px #283744;  	font-family: Philosopher;}.tmenu ul{    padding: 0;  	margin: 0 auto;      width: 600px;      height: 60px;  	color: #fff;	}.tmenu li{	display: inline;      float: left;	color: #fff;	}.tmenu li:hover{	background-color: orange;}.logo{	width: 100%;	position: absolute;	z-index: 999;        }.logo-inner{	width: 1050px;	margin: auto;}.logo-inner span{	float: right;	z-index: -999;}.content {    background: none repeat scroll 0 0 white;    margin: 5px;}.leftside-content {    padding: 30px 8px 1px;    text-align: justify;}#sidebar{    background: url("images/scribble_light.png") repeat scroll 0 0 #ffffff;    float: right;    margin: 80px -33px 6px 14px;    outline: 6px solid rgba(0, 0, 0, 0.1);    padding: 10px;    width: 280px;    position: relative;}#sidebar h2{	margin-top: 3px;	font-family: Lobster;	font-weight: 500;	border-bottom: 1px solid #d85c30;	color: #d85c30;}#sidebar ul li {	list-style: none;}#social a{	text-decoration: none;}#social a:hover {	background-color: transparent;	opacity:0.7;	text-decoration: none;} #social img {	-moz-transition: all 0.8s ease-in-out;	-webkit-transition: all 0.8s ease-in-out;	-o-transition: all 0.8s ease-in-out;	-ms-transition: all 0.8s ease-in-out;	transition: all 0.8s ease-in-out;}#social img:hover {	-moz-transform: rotate(360deg);	-webkit-transform: rotate(360deg);	-o-transform: rotate(360deg);	-ms-transform: rotate(360deg); transform: rotate(360deg);}#footer{	background: url('images/footer_bg.png') repeat-x;        text-align: center;        overflow:hidden;        margin-top: -40px;	}                #footer, #push {height: 40px; clear: both;}        #wrapper {min-height: 100%; }      #wrapper, .logo {min-width:1095px;}#page-wrap-inner {    background-color: rgba(0, 0, 0, 0.1);    margin: 0 auto;    padding: 1px;    width: 972px;}
<!doctype html><html>	<head>            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<title>Page Title</title>		<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/>		<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>		<link rel="stylesheet" href="styleb.css" type="text/css" />	</head>	<body>            <div id="wrapper">	<!-- Top Menu START -->	<div class="tmenu">		<ul>			<li><a href="">Home</a></li>			<li><a href="">Forums</a></li>			<li><a href="">Snippets</a></li>			<li><a href="">Reference</a></li>			<li><a href="">Download</a></li>		</ul>	</div>	<!-- Top Menu END -->		<!-- Logo and Ad START -->		<div class="logo">		<div class="logo-inner">			<a href="index.html"><img src="images/logo.png" title="SITE_NAME" alt="SITE_NAME"/></a>			<span><a href="AD_LINK" target="_blank"><img src="images/lf_ad.png" title="AD_NAME" alt="AD_NAME" /></a></span>		</div>	</div>	<!-- Logo and Ad END -->		<!-- Page content START -->	<div id="page-wrap">                        <div id="sidebar"><div id="social">  <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img src="images/social/rss.png" style="margin-right:1px;" alt="Icon"/></a> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img src="images/social/rss-email.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img src="images/social/facebook.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img src="images/social/twitter.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="images/social/google-plus.png" alt="Icon"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="images/social/pinterest.png" alt="Follow Me on Pinterest" /></a> </div><br/><h2>First Menu</h2><ul><li>First Item</li><li>Second Item</li><li>Third Item</li></ul>	</div>            <div id="page-wrap-inner">		<div class="content">			<div class="leftside-content">				<h2><a href="ARTICLE_PAGE">Lorem ipsum</a></h2>				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dolor metus. Nulla tincidunt blandit nibh. Morbi consequat, risus sed tristique dignissim, velit mi pulvinar ligula, id commodo eros lorem quis nibh. Maecenas vehicula nec quam quis vehicula. Fusce ac purus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quam purus, pretium et porta id, pretium at velit. Proin in mi diam. Ut porttitor et turpis non ultricies.Fusce pellentesque, mi id mollis condimentum, augue ligula ultrices nisl, sit amet gravida metus odio nec nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ornare id felis a interdum. Nullam imperdiet blandit accumsan. Ut vulputate magna nulla, vitae placerat nulla varius ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et ipsum a neque volutpat posuere.Aliquam vestibulum tortor nec posuere tincidunt. Etiam vestibulum, nibh non adipiscing mollis, turpis dolor mollis nunc, non posuere orci risus in sapien. Vivamus eros risus, ultrices et tristique non, lacinia et ipsum. Etiam semper, ligula et tempor tincidunt, magna sapien porta quam, sed tempor diam turpis in eros. Sed sed magna nisl. Vestibulum egestas, dui nec bibendum dictum, ligula velit commodo magna, a luctus eros lacus sit amet libero. Aenean placerat sed tortor quis volutpat. Etiam id massa quis nisl eleifend pretium id sit amet leo.Phasellus pretium rutrum nibh sit amet vulputate. In diam lectus, aliquet eu ligula in, laoreet cursus mauris. Aenean a odio velit. Maecenas eu dui aliquet, convallis dui eleifend, volutpat nulla. Nunc sed est sodales, mollis mi at, pretium sapien. Etiam convallis eleifend ante sed volutpat. Aliquam erat volutpat. Etiam egestas nulla vitae arcu condimentum, vel venenatis leo egestas. Curabitur tellus neque, venenatis non iaculis quis, auctor sit amet tellus. Mauris orci odio, lacinia id neque quis, congue dignissim orci. Nullam velit turpis, interdum non facilisis pretium, suscipit quis lectus. Curabitur consequat fermentum ultrices. Praesent vitae massa sollicitudin, dapibus tortor elementum, tincidunt sem. Phasellus venenatis enim leo, at sodales felis ullamcorper ac. Nullam venenatis libero ligula, vel tincidunt sem euismod at.Suspendisse tempus odio sed nulla sodales, sit amet malesuada ligula mattis. Praesent tincidunt nunc nisl, ullamcorper laoreet turpis ultricies eu. Sed at quam rhoncus, imperdiet metus in, facilisis orci. Mauris sed justo eget sapien placerat molestie. Morbi faucibus leo quis augue suscipit laoreet. Vivamus sed elit at neque elementum ullamcorper et ut felis. Donec feugiat auctor ultrices. Praesent vulputate dui ligula, ullamcorper eleifend quam fringilla ac. Sed mollis neque non nisi sagittis elementum. Duis faucibus ut orci ac placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 				</p>			</div>            			</div>            </div>	</div><div id="push"> </div>	<!-- Page Content END -->            </div>	<!-- Footer Area START -->	<div id="footer"><p>© SITE_NAME | 2013</p></div>			<!-- Footer Area END -->	</body>	</html>
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...