Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member Siiilent's Avatar
    Join Date
    Nov 2009
    Posts
    3
    Member #
    20477
    Hi, guys.
    I'm wondering, how to make this sidebar stretch with the main content?
    I've tried many things with the code. No answer found.

    The question is: How to make the sidebar Stretch to the main content height? Things like "100%" don't work.aranoid:

    I think, the solution is very simple. But I can't find it now. I need an answer faster, because tomorrow is DAY-X.

    I've attached a screenshot and the code.
    --
    http://img171.imageshack.us/img171/8144/scrl.jpg
    --
    HTML:
    HTML Code:
    <body>
    
    <div class="wrapper">
    <div id="container">
    <div id="sidebar">
    
    <div id="injan"><a href="./"><img src="img/spacer.gif" width="101px" height="102px" /></a></div>
    
    <div id="menu10">
    		<ul>
    			<li><a href="#" title="Link 1">??????</a>
                <ul>
    			<li><a href="#" title="Link 1">???-?????</a></li>
    			<li><a href="#" title="Link 2">??????</a></li>
    			<li><a href="#" title="Link 3">???????????</a></li>
    			<li><a href="#" title="Link 4">???????</a></li>
    			</ul></li>
    			<li><a href="#" title="Link 2">???????????</a></li>
    <div id="menu12">
    		<ul>
    			<li><a href="#" title="Link 3">?????????? ??????</a></li>
    			<li><a href="#" title="Link 4">??????? ? ??????????</a></li>
    			<li><a href="5" title="Link 5">??-???<br />???-???-?????</a></li>	
    			<li><a href="#" title="Link 1">?????-??????<br />????????????</a></li>
    		</ul>
    </div>
    			<li><a href="#" title="Link 2">???</a></li>
    			<li><a href="#" title="Link 3">??????????</a></li>
    			<li><a href="#" title="Link 4">???????</a>
                <ul>
                	<li><a href="#" title="Link 1">?????</a></li>
                    <li><a>???: 987-987</a></li>
                    <li><a>???2: 987-987</a></li>
                </ul></li>
    		</ul>
    </div>
    
    </div>
    <div id="content">&nbsp;
    <div class="menu13">
    		<ul>
    			<li><a href="#" title="Link 3">????????<br />?????</a></li>
            </ul>
    
    <div class="menu14">
    		<ul>
    			<li><a href="#" title="Link 4">???????????</a></li>
    			<li><a href="5" title="Link 5">Fortuna</a></li>	
    		</ul>
    </div>
    </div>
    <div class="maincontent">
    <div id="welcome"><h2>????? ???????????????<br> ? ??????????? ????????</h2></div>
    <div id="logo"><img src="img/logo.png" /></div>
    CSS:
    Code:
    .wrapper #container {
    	width:100%;
    	min-height:100%;
    	margin: 0;
    	padding: 0;
    	border:0px solid;
    	
    }
    .wrapper #sidebar {
    
    	width:155px;
    	min-height: 100%;
    	height:auto;
    	margin:0px;
    	padding:0px;
    	background: url('img/sidebarbg.jpg') repeat-y left top;
    	float:left;
    	position:relative;
    	display:block;
    	
    }
    .wrapper #content {
    	
    	width:auto;
    	height:100%;
    	color: #82edf9;
    	background-image:url('img/contentbg.jpg');
    	background-repeat:repeat-x;
    	background-position:left top;
    	position:relative;
    	margin-left:155px;
    	margin-top:0px;
    	margin-bottom:0px;
    	margin-right:0px;
    	padding-top:37px;
    	padding-left:0px;
    }
    .wrapper .maincontent {
    	width:800px;
    	height:auto;
    	border:0px solid;
    	margin-left: auto;
      	margin-right: auto;
    	position:relative;
    	text-align:left;
    	font-size:18px;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    .postcontent {
    	width:auto;
    	height:auto;
    	background-color:#025bbe;
    	color:#ddd115;
    	padding:10px;
    	border:1px solid #006699;
    }

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    This is a problem with the current CSS ... hopefully it will be fixed with CSS2 or CSS3,
    whatever the next version is. It becomes too much of a headache to make them
    the same height unless you have a "fixed height", which you probably don't want.

    Anyhow, you can fix it by using "faux columns". This is where your background
    is a slice of the whole thing all the way across. I'm not sure if that left column
    background ever repeats, but you would only have one background for your
    page, repeated vertically. You then position your <div> sections on top of them
    with a transparent background.

    The illusion is that you have a left column and content area as separate sections,
    but the background image is the whole width of your page.

    So make one image that includes the gold part on the left and the whole blue
    part on the right. So it's 1103 pixels wide X 50 pixels tall ... it then repeats
    down the page. You'll have to make the height whatever it takes to make a
    seamless repeated pattern of the gold graphics.


  4. #3
    Junior Member Siiilent's Avatar
    Join Date
    Nov 2009
    Posts
    3
    Member #
    20477
    Faux Columns. It really helped me.
    Thank you.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    You can further enhance your design by making a separate header and footer,
    which will put a "top" and "bottom" on the illlusion.

    Like this:

    ================================
    | banner banner banner
    ================================
    | content area
    |
    | background repeated down
    |
    |
    |
    ================================
    | footer footer footer
    ================================

    You can then make the banner background on top
    and footer background on bottom, look like it matches
    exactly to the content area background.


  6. #5
    Junior Member Siiilent's Avatar
    Join Date
    Nov 2009
    Posts
    3
    Member #
    20477
    I already did so)
    But there's another question:
    If my visible content of the site in browser is like:

    ================================
    | banner banner banner
    ================================
    | content area
    |
    | background repeated down
    ================================
    | footer footer footer
    ================================
    |
    |
    |<<<

    And the end of the visible side is where the "<<<" positioned, and my content is not big\long, my height wont stick to 100% of the page.
    It's quite hard to explain this using my level of English, but, you would understand me if I'll say that I need something like "min-height". To make the Footer stick to bottom anyways.

    I'll try that tomorrow, now it's too late to start with coding. So I remember that I had some problems with min-height, and I wanted to make something like "min-height:100%;" of the visible part of the page.

    This post and question is something like "next-day" question. I don't know yet It'll work or no, but I know I'll have problems with it.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    First, show us the link to your real site ... so we can see it.

    Construct your layout as such.

    <style>
    body{
    margin:0px auto;
    width:1000px;
    text-align:center;
    }
    #wrapper{
    width:1000px;
    text-align:left;
    }
    #banner{
    background: url(banner.jpg) no-repeat;
    width:1000px;
    height:150px;
    }
    #content{
    background: url(content.jpg) repeat-x;
    width:1000px;
    }

    #footer{
    background: url(footer.jpg) no-repeat;
    width:1000px;
    height:150px;
    }
    </style>

    <div id="wrapper">

    <div id="banner">
    </div>

    <div id="content">
    </div>

    <div id="footer">
    </div>

    </div><!-- close wrapper -->

    Each of the 3 sections within wrapper have their own backgrounds.
    Only the "content" section has a repeating background (vertically).

    Wrapping them all together is the key.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:14 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com