WordPress.org

Ready to get started?Download WordPress

Forums

Left sidebar with full height? (5 posts)

  1. Linn Hansson
    Member
    Posted 3 years ago #

    Hello,
    I have spent the last couple of days trying to make a layout that has a sidebar to the left with a full height. I tried to code normal html just to get the basic layout sorted and then I tried to add the .php elements.

    Although I cannot get the sidebar right. At the moment it refuses to float left, it gets stuck underneath the main content.
    I'm pretty sure that the coding I made is bad for a WordPress theme but I couldn't figure it out. I've spent so many hours on this damn thing.
    Could someone please help me?!

    <div id="wrap">
    	<?php get_header(); ?>
    
    	<div id="main">
    
    		<div id="featured">
            <div id="featured_content">
            </div>
            </div>
    
    <div id="page_title">
              <h1>Latest News</h1>
          </div>
    
            <div id="post_box">
              <div id="thumbnail_frame">
                <div id="thumbnail_placer">
    
                </div>
              </div>
    
              <div id="post_title">
                <h2>Proin Adipiscing Facilisis</h2>
              </div>
              <div id="post_content">
                Proin adipiscing facilisis turpis vel suscipit. Aliquam consectetur ultricies est eget faucibus. Aliquam dolor metus, semper vitae pellentesque vel, laoreet ac diam. Mauris eu diam.
                 <div id="button"><a href="#">Read more...</a></div>
              </div>
            </div>
    
            <div id="post_box">
              <div id="thumbnail_frame">
                <div id="thumbnail_placer">
    
                </div>
              </div>
    
              <div id="post_title">
                <h2>Proin Adipiscing Facilisis</h2>
              </div>
              <div id="post_content">
                Proin adipiscing facilisis turpis vel suscipit. Aliquam consectetur ultricies est eget faucibus. Aliquam dolor metus, semper vitae pellentesque vel, laoreet ac diam. Mauris eu diam.
                 <div id="button"><a href="#">Read more...</a></div>
              </div>
            </div>
    
            <div id="post_box">
              <div id="thumbnail_frame">
                <div id="thumbnail_placer">
    
                </div>
              </div>
    
              <div id="post_title">
                <h2>Proin Adipiscing Facilisis</h2>
              </div>
              <div id="post_content">
                Proin adipiscing facilisis turpis vel suscipit. Aliquam consectetur ultricies est eget faucibus. Aliquam dolor metus, semper vitae pellentesque vel, laoreet ac diam. Mauris eu diam.
                 <div id="button"><a href="#">Read more...</a></div>
              </div>
            </div>
    
           <div id="post_box">
              <div id="thumbnail_frame">
                <div id="thumbnail_placer">
    
                </div>
              </div>
    
              <div id="post_title">
                <h2>Proin Adipiscing Facilisis</h2>
              </div>
              <div id="post_content">
                Proin adipiscing facilisis turpis vel suscipit. Aliquam consectetur ultricies est eget faucibus. Aliquam dolor metus, semper vitae pellentesque vel, laoreet ac diam. Mauris eu diam.
                 <div id="button"><a href="#">Read more...</a></div>
              </div>
            </div>
      </div>
      <div id="sidebar_box">
         <?php get_sidebar(); ?>
    </div>
    
    	</div>
    	<div id="footer">
    		<?php get_footer(); ?>
    	</div>
    
    </div>
    body,
    	html {
    	padding:0;
    	background-attachment: fixed;
    	background-image: url(images/bg-body.jpg);
    	background-repeat: repeat;
    	background-position: left top;
    	font-family: Verdana, sans-serif;
    	font-size: 12px;
    	color: #5c5c5c;
    	line-height: 20px;
    	margin: 0;
    	}
    
    	h1 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 25px;
    	color: #FFFFFF;
    	padding-top: 0px;
    	font-weight: normal;
        }
    
    	h2 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	color: #FFFFFF;
    	font-weight: normal;
        }
    
    	h3 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 15px;
    	color: #FFFFFF;
    	font-weight: normal;
    	padding-top: 20px;
        }
    
    	a:link, a:active, a:visited, a {
    	color: #FFFFFF;
    	text-decoration: none;
    	}
    
    	a:hover {
    	color: #5c5c5c;
    	text-decoration: none;
    	}
    
    	#wrap {
    	width:985px;
    	margin:0;
    	background-attachment: fixed;
    	background-image: url(images/bg-wrap.png);
    	background-repeat: repeat-y;
    	background-position: left top;
    	padding-top: 130px;
    	}
    
    	#main {
    	float:right;
    	width:620px;
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 50px;
    	clear: left;
    	}
    
    	#featured {
    	width: 620px;
    	height: 410px;
    	background-image: url(images/featured_box.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    	padding-top: 9px;
    	padding-left: 9px;
    	}
    
    	#featured_content {
    	width: 600px;
    	height: 390px;
    	background-image: url(images/featured.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    	overflow: hidden;
    	}
    
    	#page_title {
    	width: 620px;
    	height: 70px;
    	padding-top: 10px;
    	}
    
    	#post_box {
    	width: 620px;
    	height: 160px;
    	padding-bottom: 20px;
    	}
    
    	#post_title {
    	width: 415px;
    	float:right;
    	}
    
    	#post_content {
    	width: 415px;
    	overflow: hidden;
    	float:right;
    	}
    
    	#thumbnail_frame {
    	width: 190px;
    	height: 150px;
    	background-image: url(images/thumbnail_box.png);
    	padding-top: 9px;
    	padding-left: 9px;
    	background-repeat: no-repeat;
    	background-position: left top;
    	float:left;
    	}
    
    	#thumbnail_placer {
    	width: 170px;
    	height: 130px;
    	overflow: hidden;
    	background-image: url(images/thumbnail.jpg);
    	}
    
    	#button {
    	width: 200px;
    	height: 50px;
    	background-image: url(images/button.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    	padding-top: 18px;
    	padding-left: 22px;
    	font-size: 10px;
    	}
    
    	#sidebar {
    		float:left;
    		width:230px;
    		padding:10px;
    	}
    
    	#sidebar_box {
    	float:left;
    	width:230px;
    	clear: right;
    	}
    
    	#menubar {
    	width:295px;
    	height: 110px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    	}
    
    	#menu_frame {
    		width:110px;
    		height: 110px;
    		padding-top: 10px;
    		padding-left: 10px;
    		background-image: url(images/menu_frame.png);
    		background-repeat: no-repeat;
    		background-position: left top;
    		float:left;
    	}
    
    	#menu_image {
    	width:90px;
    	height: 90px;
    	background-repeat: no-repeat;
    	background-position: left top;
    	overflow: hidden;
    	background-image: url(images/thumbnail.jpg);
    	}
    
    	#menu_box {
    	width:175px;
    	height: 110px;
    	background-repeat: no-repeat;
    	background-position: left center;
    	background-image: url(images/menubar_bg.png);
    	float:left;
    	}
    
    	#menu_title {
    	width: 150px;
    	height: 35px;
    
    	}
    
    	#menu_subtitle {
    	width: 150px;
    	height: 40px;
    	font-size: 8px;
    	}
    
    	#footer {
    		clear:both;
    		height: 0px;
    	}
    	#footer p {
    		margin:0;
        }
    	* html #footer {
    		height:1px;
    	}
    <?php global $titan; ?>
    
     <div id="sidebar">
    		<div id="menubar">
    		  <div id="menu_frame">
              <div id="menu_image">
    
              </div>
    
              </div>
    
              <div id="menu_box">
                <div id="menu_title">
                  <h3>Latest News</h3>
                </div>
                <div id="menu_subtitle">Latest News & Updates</div>
              </div>
    	  </div>
    
    	</div>
    
        <div id="sidebar">
    		<div id="menubar">
    		  <div id="menu_frame">
              <div id="menu_image">
    
              </div>
    
              </div>
    
              <div id="menu_box">
                <div id="menu_title">
                  <h3>Latest News</h3>
                </div>
                <div id="menu_subtitle">Latest News & Updates</div>
              </div>
    	  </div>
    
    	</div>
    
        <div id="sidebar">
    		<div id="menubar">
    		  <div id="menu_frame">
              <div id="menu_image">
    
              </div>
    
              </div>
    
              <div id="menu_box">
                <div id="menu_title">
                  <h3>Latest News</h3>
                </div>
                <div id="menu_subtitle">Latest News & Updates</div>
              </div>
    	  </div>
    
    	</div>
    
        <div id="sidebar">
    		<div id="menubar">
    		  <div id="menu_frame">
              <div id="menu_image">
    
              </div>
    
              </div>
    
              <div id="menu_box">
                <div id="menu_title">
                  <h3>Latest News</h3>
                </div>
                <div id="menu_subtitle">Latest News & Updates</div>
              </div>
    	  </div>
    
    	</div>
    
    	<div id="sidebar">
    		<div id="menubar">
    		  <div id="menu_frame">
              <div id="menu_image">
    
              </div>
    
              </div>
    
              <div id="menu_box">
                <div id="menu_title">
                  <h3>Latest News</h3>
                </div>
                <div id="menu_subtitle">Latest News & Updates</div>
              </div>
    	  </div>
  2. DigitalSquid
    Member
    Posted 3 years ago #

    Try removing clear: right; from #sidebar_box in your CSS.

  3. Pritam
    Member
    Posted 3 years ago #

    A very simple trick for creating a sidebar that's the same height as the content portion is to fake it using background image. I have done this on SpeckyGeek, my tech blog. Wrap the content and sidebar in one div tag and use a background image for this div that creates the sense of two separate content and sidebar areas. If you are using Firefox, use Firebug to see how I have implemented it on my site. All the best.

  4. Linn Hansson
    Member
    Posted 3 years ago #

    @Twelvefootsnowman
    I've tried that but it doesn't work :(

    @
    pritamhans
    I'm not quite sure I understand what you mean.
    In this example I tried to use a div tag around both the main content and the sidebar. So far it doesn't work because the sidebar refuses to be next to the content.

  5. Linn Hansson
    Member
    Posted 3 years ago #

    @Twelvefootsnowman

    I take it all back! My browser must have been bugging because when I reloaded the page for the third time it jumped back to the place it was meant to be! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.