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
    Jun 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems making the content area have a dynamic height

    Hi guys,

    I'm currently trying to turn this into XHTML/CSS:



    The problem is that it needs to have a dynamic height, so I've no idea how to approach the problem.

    The first step I'd say would be to create an image along the entire top that's about 5px high for the top of the box, and then a 1px high image for a repeating background.

    The problem I've got now is with the bottom area, and how to get text over it without having to create an entirely separate div and put the content between the two (which would be pretty awful).

    Thanks in advance for any advice, I'm really stuck on this!

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Dynamic height? You mean that the height will automatically resize in order to fit the content. That's how height works, unless changed through CSS.

    I'm assuming that the left section will always be larger than the right; so the right only has to be floated (float: right and the left column will keep the dynamic height.

    I suppose when you mean "text over it", you mean:

    Jargon jargon jargon jargon contact contact
    Jargon jargon jargon jargon contact contact
    Jargon jargon jargon jargon contact contact
    Jargon jargon jargon jargon
    Jargon jargon jargon jargon jargon jargon jargon jargon
    Jargon jargon jargon jargon jargon jargon jargon jargon

    It'll do that automaticaly as well.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, pretty much yeah, but I don't think I explained myself too well originally:

    My main problem though is the difference between the content and the bottom image. I mean, the gradient in the content area means I can't put it into actual middle div, yet if it's on the bottom one there'll be a large gap.

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    I knocked this up for you, is it something like that you're looking for?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    #wrapper {
    width: 800px;
    margin: auto;
    border: 1px solid #000;
    margin-top: 20px;
    }
    #content {
    padding: 10px;
    border-right: 1px solid #000;
    margin-right: 180px;
    }
    #right-col {
    width: 150px;
    padding: 10px;
    float: right;
    }
    .clear {
    clear: both;
    }
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="right-col">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi.</p>
    </div>
    
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    
    </div>
    
    </body>
    </html>
    .
    .

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that looks great thanks, and very similar to what I have at the moment. Again through, my main problem is getting it so that the gradient in the footer doesn't conflict with the actual content area in the middle; seems impossible


  •  

    Posting Permissions

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