HTML Sidebar Appears at bottom instead of right side
Question
I'm attempting to implement a sidebar however it does not seem to align with the right side of the screen and I'm unsure why. I've replicated the source from an existing site however it appears I am missing something in mine.
Screenshots:
Incorrect:
Correct:
Fiddle
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Brighter World Lighting - NY</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--imports the main css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--imports prettyPhoto css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
<!--imports jquery-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!--imports twitter feed plugin-->
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<!--imports easing plugin-->
<script type="text/javascript" src="js/easing.js"></script>
<!--imports prettyPhoto plugin-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--imports jQuery Tools plugin-->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!--imports jQuery superfish plugin-->
<script type="text/javascript" src="js/superfish.js"></script>
<!--imports jQuery jflickrfeed plugin-->
<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
<!--imports jQuery AsyncSlider plugin-->
<script type="text/javascript" src="js/jquery.asyncslider.min.js"></script>
<!--imports custom javascript code-->
<script type="text/javascript" src="js/custom.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// Setup Slider
$("#async-slider").asyncSlider({
keyboardNavigate: true,
easing: 'easeInOutExpo',
minTime: 600,
maxTime: 1500,
autoswitch: 4800,
centerPrevNextNav: false,
slidesNav: false
});
});
</script>
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="header" class="pattern-1">
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="image description"/>
<div id="title">
<h1><a href="index.asp"></a></h1>
<p></p>
</div><!-- end title -->
</div><!-- end logo -->
<ul id="navigation">
<li>
<a class="active-nav" href="index.asp">Home
</a>
</li>
<li>
<a href="partnership.html">Energy Partnership Program
</a>
</li>
<li>
<a href="http://bwl.ereverseauction.com">Energy Auction
</a>
</li>
<li>
<a href="#">Affiliates
</a>
</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-23"><a href="products.html" >Products</a>
<ul class="sub-menu">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-31"><a href="indoor.html" >Indoor Lighting</a>
</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="outdoor.html" >Outdoor Lighting</a>
<ul class="sub-menu">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://brighterworldlightingllc.com/excelsior-series/" >Street Lighting</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://brighterworldlightingllc.com/outdoor-lighting/" >OEM/ODM Support</a></li>
</ul>
</li>
<li>
<a href="about.asp">About Us
</a>
</li>
<li>
<a href="contact.html">Contact Us
</a></li>
</ul><!-- end navigation -->
<div class="clear"></div><!-- end clearfix -->
</div><!-- end header-inner -->
</div><!-- end header -->
<div id="page-headline">
<div id="page-headline-inner">
<div id="page-title">
<h2>Products</h2>
<p>Indoor LED Lighting</p>
</div><!-- end page-title -->
<div class="breadcrumbs">
<span>// You Are Here:</span> <a href="index.asp">Home</a> / Products
</div><!-- end breadcrumbs -->
</div><!-- end page-headline-inner -->
<div class="separator"></div>
</div><!-- end page-headline -->
<div id="wrapper">
<div id="portfolio-content">
<ul class="gallery-thumbs"><br />
<h2>T8 Tube Lighting</h2>
<img width="236" height="187" alt="T8 Tube Lighting" class="attachment-full alignleft" style="max-width: 100%;" src="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/t8-1.jpg" />
<!-- article -->
<article id="post-111" class="post-111 page type-page status-publish hentry">
<div class="entry-content">
<br />
<br />
<p>One of the most common lighting types for commercial applications, Linear T8 tubes offer significant energy savings when replacing toxic fluorescent T8s with our environmentally friendly LED Linear T8 tubes. Every one of our LED tubes are RoHs compliant, meaning they are free of hazardous materials that are harmful to humans and the environment. Fluorescent T8s can contain as much as 5mg of mercury per tube. Our lights are also DesignLights Consortium (DLC) Certified which means our product qualifies for federal, state and utility rebates where available. <a href="http://brighterworldlightingllc.com/contact-and-support/" >Contact our Team</a> today to learn more about rebate incentives as well as tax deductions that would allow you to retrofit your existing facility at virtually no cost to you!</p>
<p><strong>For more information about our Linear T8 Tube Series, download the</strong><strong> T8 Tube Lighting Brochure.</strong></p>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-4ft.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-4ft.pdf']);" >DOWNLOAD HERE</a>
<p>LISTED AND CERTIFIED:<strong><br />
</strong></p>
<p><strong> </strong><a href="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/41.jpg" ><img class="alignleft size-medium wp-image-373" alt="4" src="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/41-320x78.jpg" width="151" height="36" /></a></p>
<hr />
<p><strong>Two Foot <strong>(2Ft)</strong></strong> – Specifications</p>
<a class="button blue " href="BWL-T8-10-IXX-3000" >Model BWL-T8-10-IXX-3000</a>
<a class="button blue " href="bwl-t8-10-ixx-3500/" >Model BWL-T8-10-IXX-3500</a>
<a class="button blue " href="bwl-t8-10-ixx-5000/" >Model BWL-T8-10-IXX-5000</a>
<p> </p>
<hr />
<p><strong>Four Foot <strong>(4Ft)</strong> Standard Output</strong>- Specifications</p>
<a class="button blue " href="bwl-t8-18-ixx-3000/" >Model BWL-T8-18-IXX-3000</a>
<a class="button blue " href="bwl-t8-18-ixx-3500/" >Model BWL-T8-18-IXX-3500</a>
<a class="button blue " href="bwl-t8-18-ixx-5000/" >Model BWL-T8-18-IXX-5000</a>
<p> </p>
<hr />
<p><strong>Four Foot <strong>(4Ft)</strong> High Output</strong> – Specifications</p>
<a class="button blue " href="bwl-t8-22-ixx-3000/" >Model BWL-T8-22-IXX-3000</a>
<a class="button blue " href="bwl-t8-22-ixx-3500/" >Model BWL-T8-22-IXX-3500</a>
<a class="button blue " href="bwl-t8-22-ixx-5000/" >Model BWL-T8-22-IXX-5000</a>
<p> </p>
</div>
<br class="clear">
</article>
<!-- /article -->
</section>
<!-- sidebar -->
<aside id="sidebar" role="complementary">
<div id="text-17" class="widget widget_text"> <div class="textwidget"><hr>
Click on the Model # below for more information.</div></div>
</div><div id="text-18" class="widget widget_text"> <div class="textwidget"><a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-10-IXX-3000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-10-IXX-3000.pdf']);" >BWL-T8-10-IXX-3000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-10-IXX-3500.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-10-IXX-3500.pdf']);" >BWL-T8-10-IXX-3500</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-10-IXX-5000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-10-IXX-5000.pdf']);" >BWL-T8-10-IXX-5000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-IXX-3000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-IXX-3000.pdf']);" >BWL-T8-18-IXX-3000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-IXX-3500.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-IXX-3500.pdf']);" >BWL-T8-18-IXX-3500</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-IXX-5000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-IXX-5000.pdf']);" >BWL-T8-18-IXX-5000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-22-IXX-3000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-22-IXX-3000.pdf']);" >BWL-T8-22-IXX-3000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-22-IXX-3500.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-22-IXX-3500.pdf']);" >BWL-T8-22-IXX-3500</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-22-IXX-5000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-22-IXX-5000.pdf']);" >BWL-T8-22-IXX-5000</a></div>
<br />
<br /></div>
</section>
</div>
<!-- /sidebar --><!-- END #content-wrapper -->
<footer id="footer">
<div id="footer-inner" class="row">
</div>
</footer><!-- END #footer -->
<div id="footer-bar">
<div class="right">
<div id="footer-nav">
</div>
</div>
<div class="left">
</div>
</div>
</div><!-- END #wrapper -->
<div style="display:none">
</div>
<script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201414'></script>
<script src="http://stats.wordpress.com/e-201414.js" type="text/javascript"></script>
<script type="text/javascript">
st_go({v:'ext',j:'1:2.5',blog:'58938147',post:'111',tz:'0'});
var load_cmc = function(){linktracker_init(58938147,111,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script> </body>
</html>
<!-- Dynamic page generated in 0.790 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2014-04-01 06:23:56 -->
<!-- Compression = gzip -->
1 answers
solution1
0 ACCPTED 2014-04-05 19:37:46
You have to specify a layout in two columns.
Now for your scope could you modify your css.
Your first column, add float and width of 80%:
#portfolio-content {
width: 960px;
overflow: hidden;
padding-bottom: 35px;
position: relative;
float: left;
width: 80%;
}
and your second column, add float right and width of 20%, the remaining space of your page:
#text-18 {
position: relative;
float: right;
width: 20%;
margin-top: 20px;
left: 20px;
}
the updated jsfiddle here.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML / CSS: Sidebar appears at bottom of page instead of on right side
Wordpress: HTML sidebar at bottom, instead of right aligned with body
Sidebar to the Right Side
Sidebar until bottom in HTML
Bootstrap 4 Carousel thumbnails move to right side instead of bottom
Bootstrap sidebar expand on the right side
HTML extra cell at bottom right side of a table for displaying a total
How to make right side sidebar hover over the context of page instead of taking separate space
Put image on the right of SVG image on my HTML page instead of on the bottom
How to show a HTML page at the bottom right corner instead of in a div?
Related Tags