Left sidebar with full height?

  • 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>
Viewing 4 replies - 1 through 4 (of 4 total)
  • DigitalSquid

    (@twelvefootsnowman)

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

    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.

    Thread Starter linn-hansson

    (@linn-hansson)

    @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.

    Thread Starter linn-hansson

    (@linn-hansson)

    @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! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Left sidebar with full height?’ is closed to new replies.