Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Help with automatic/100% height

    I'm having some trouble with specifying an element height.

    I have an article element inside a section element like below.

    Code:
    <section id="content">
         <article id="content_left">
              ......................
              ......................
         </article>
         <nav id="sidebar">
              .................
              .................
         </nav>
    </section>
    
    <footer>
         .............
         .............
    </footer>
    This is part of the layout for several pages of my website. The problem is that the amount of information inside the article element varies from page to page, so i can't set a fixed height. The result is the footer element encroaching on both the article and nav elements of the page.

    Is there any way to specify an automatic or 100% height for the section element so that it stretches to accommodate whatever information is contained within it?

    Would appreciate some help with this. Thanks

    CSS

    Code:
    section#content {
    	width: 950px;
    	display: block;
    	margin: 0 auto;
    	padding: 0;
    }
    
    article#content_left {
    	display: block;
    	float: left;
    	width: 600px;
    	height: 600px;
    }
    
    nav#sidebar {
    	float: right;
    	text-align: right;
    	width: 300px;
    	margin: -13px 0px 0px 0px;
    }
    Last edited by gnolan; 09-14-2011 at 02:00 PM.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,806
    Thanks
    41
    Thanked 199 Times in 198 Posts
    if you do not set a height it will automatically shrink/stretch to the size of the content. Can we see the footer CSS and the HTML for an entire page? Now if you wish you can make it min-height:600px (for content_left) this will ensure it is at least 600px high and then if the content gets larger it will expand. Also if you would keep it static at 600px if you add overflow:scroll "extra" content that would exceed 600px will now be scroll-able and contained within the 600px field.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    if you do not set a height it will automatically shrink/stretch to the size of the content. Can we see the footer CSS and the HTML for an entire page? Now if you wish you can make it min-height:600px (for content_left) this will ensure it is at least 600px high and then if the content gets larger it will expand. Also if you would keep it static at 600px if you add overflow:scroll "extra" content that would exceed 600px will now be scroll-able and contained within the 600px field.
    Thanks for the reply. Here is the content for the entire page. The way my page is set up at the moment, the footer is encroaching entirely on the contents of "<section id="content">.

    Code:
    <section id="content">
    			<h2>What I do</h2>
    			<article id="content_left">
    				<p>
    				At xxxxxxxxxxxxxxxxxx, I design websites with impact; websites
    				that are striking in appearance and usability. After all, your website will 
    				most often be your first point of contact with potential customers - and 
    				with this in mind your website should make a point of getting your 
    				message across clearly and simply while, at the same time, standing out 
    				from your fellow competitors.
    				</p>
    				<p>
    				With the help of Engine Room Web Design you can do this. I will provide 
    				a website for you that will not only look the part and cast your company 
    				in a professional light, but it will be based on a solid foundation of 
    				standards-compliant code.
    				</p>
    				<p>
    				Wherever possible, HTML5 and CSS3 will be implemented in your website. 
    				These two platforms are very much the future of web design and are 
    				quickly taking over much of the work done by JavaScript and Flash. I 
    				say "wherever possible" because some of the elements associated with 
    				these standards are not yet compatible with some older browser versions. In these cases 
    				I will use the idea of "progressive enhancement", with the onus on content and then style.
    				</p>
    			</article>	<!--end of content_left article--> 
    			<nav id="sidebar">
    				<ul>
    					<li><a href="about.html">  about me.  <<</a></li>
    					<li><a href="what_i_do.html">  what i do.  <<</a></li>
    					<li><a href="portfolio.html">  what I've done.  <<</a></li>
    				</ul>
    			</nav>
    			<aside id="bottom">
    				<h3><a href="html5.html">>> HTML5</a></h3>
    				<h3><a href="css3.html">>> CSS3</a></h3>
    				<h3><a href="flash.html">>> The problem with Flash</a></h3>
    				<h3><a href="progressive_enhancement.html">>> Progressive Enhancement</a></h3>
    			</aside> <!--end of bottom aside-->
    		</section> <!--end of content section-->
    	
    	<footer id="main_footer">
    		<nav id="main_bottom">
    			<ul>
    				<li><a href="home.html">home <<</a></li>
    				<li><a href="about.html">about me <<</a></li>
    				<li><a href="contact.php">contact <<</a></li>
    			</ul>
    		</nav>
    		<address>&copy; 2011 All rights reserved.</address>
    		<div id="social">
    			<a href="http://www.facebook.com"><img src="images\facebook.png" height="32" width="32" alt="Facebook"/></a>
    			<a href="http://www.linkedin.com"><img src="images\linkedin.png" height="32" width="32" alt="Linkedin"/></a>
    			<a href="http://www.twitter.com"><img src="images\twitter.png" height="32" width="32" alt="Twitter"/></a>
    			<a href="http://www.whatisrss.com"><img src="images\rss.png" height="32" width="32" alt="RSS"/></a>
    		</div> 		<!--end of social div-->
    	</footer>
    </body>
    </html>
    Some of the css:

    Code:
    section#content {
    	width: 950px;
    	display: block;
    	margin: 0 auto;
    	padding: 0;
    	border: 2px solid blue;
    }
    
    article#content_left {
    	display: block;
    	float: left;
    	width: 600px;
    	height: 600px;
    }
    
    nav#sidebar {
    	float: right;
    	text-align: right;
    	width: 300px;
    	margin: -13px 0px 0px 0px;
    }
    
    aside#bottom {
    	display: block;
    	background-image: url(images/post_it.png);
    	float: right;
    	width: 300px;
    	height: 300px;
    	margin-top: 50px;
    	transform: rotate(-8deg);
    	-ms-transform: rotate(-8deg); /* IE 9 */
    	-webkit-transform: rotate(-8deg); /* Safari and Chrome */
    	-o-transform: rotate(-8deg); /* Opera */
    	-moz-transform: rotate(-8deg); /* Firefox */
    }
    
    footer#main_footer {
    	display: block;
    	height: 140px;
    	margin: 0 auto;
    	width: 950px;
    	position: relative;
    }
    
    footer#main_footer nav#main_bottom {
    	font-family: PironStencil;
    	display: block;
    	width: 300px;
    	margin: 0 auto;	
    	padding-top: 20px;
    	float: right;
    	text-align: right;
    }
    
    footer#main_footer address{
    	font-family: PironStencil;
    	color: #D65B5B;
    	width: 400px;
    	position: absolute;
    	top: 80px;
    	left: 550px;
    	padding-top: 20px;
    	font-size: 0.9em;
    	font-style: normal;
    	float: right;
    	text-align: right;
    }
    
    div#social {
    	width: 400px;
    	margin: -33px auto 0px auto;
    	float: left;
    	position: absolute;
    	top: 110px;
    	left:0px;
    }
    
    div#social img{
    	opacity: 0.4;
    	border: none;
    	margin: 0px 10px 20px 0px;
    	-moz-box-shadow: 5px 5px 5px #000;
      -webkit-box-shadow: 5px 5px 5px #000;
      box-shadow: 5px 5px 5px #000;
    }
    I haven't included all the code here, i'm not sure if that's what you're looking for or not, but i've included everything that i think is relevant without posting up pages upon pages of code.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,806
    Thanks
    41
    Thanked 199 Times in 198 Posts
    mainly wanted to see the footer CSS. I am betting that all your "encroachment" problems are due to
    Code:
    position:relative;
    positioning should never be used for page layout and should only be used in special circumstances when you need it. What effect were/are you trying to do with the positioning? If it was simply for layout, try removing it and seeing what you get, we can then work from there to remedy the issue. Also try what I posted in first post about min-height:600px; or height:600px plus overflow:scroll; (I would add one of those regardless of the footer issue- I think after we remedy the footer there will be a problem still with your content; planning ahead )

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    mainly wanted to see the footer CSS. I am betting that all your "encroachment" problems are due to
    Code:
    position:relative;
    positioning should never be used for page layout and should only be used in special circumstances when you need it. What effect were/are you trying to do with the positioning? If it was simply for layout, try removing it and seeing what you get, we can then work from there to remedy the issue. Also try what I posted in first post about min-height:600px; or height:600px plus overflow:scroll; (I would add one of those regardless of the footer issue- I think after we remedy the footer there will be a problem still with your content; planning ahead )
    Hi. I've just got the problem worked out, thanks. I've cleared both floats following the aside and everything is lining up nicely now.

    I understand what you mean about positioning for layout and that's definitely something i'll have to look at soon.

    Thanks again for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •