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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How adjust a container in CSS to automatically resize height according to content.

    Hi,

    I am developing a website in HTML, all I want to make the content of website to adjust throughout the page by resizing page height or container height automatically.
    I tried setting the height to auto but it did not worked see the code.

    I have used a container named site_content

    Code:
    <div id="site_content">
    In CSS
    Code:
    #site_content
    { width: 1100px;
      height: 600px;
      overflow: hidden;
      position:absolute;
        margin-top:-15px;
      background: #040000;
      border: 0px solid #bbb;
            background:url(../images/grade.png);
            background-size:1100px 600px;
            z-index:5000;
            }

    There are two other child id's
    Code:
    #content
    { width: 680px;
      margin: 0 0 20px 20px;
      float: left;}
    
    .content_item
    { width: 680px;
      margin-top: 20px;
      margin-bottom: 20px;}


    Regards,

    Shashikant

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello shashikant2011,
    A divs natural behavior is to expand to enclose it's content. Add these bit's highlighted in red to see how your #site_content might work -

    Code:
    #site_content
    { width: 1100px;
      /*height: 600px;
      overflow: hidden;
      position:absolute;
            z-index:5000;
      border: 0px solid #bbb;
        margin-top:-15px;*/
      background: #040000;
            background:url(../images/grade.png);
            background-size:1100px 600px;
    overflow: auto;
            }
    See here to decide if absolute positioning is really needed.
    See here to learn how overflow: auto; clears your floats.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    See here to learn how overflow: auto; clears your floats.
    I disagree with that advice. And I'm not the only one. Apart from the tricky behavior Peter-Paul Koch describes, there is more, described by Eric Meyer.

    My advice to prevent/solve float problems:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Demo</title>
        <meta charset="utf-8" />
    <style type="text/css">
    div#container {
    	border: 1px solid #000000;
    	width: 100%;
    }
    div#left {
    	width: 45%;
    	float: left;
    }
    div#right {
    	width: 45%;
    	float: right;
    }
    div#support-element {
            width: 0;
            height: 0;
            clear: both;
    }
    p {
            margin-bottom: 0;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="left">
                <p>The left column</p>
                <p>The left column</p>
                <p>The left column</p>
                <p>The left column</p>
            </div>
            <div id="right">
                <p>The right column</p>
                <p>The right column</p>
                <p>The right column</p>
            </div>
            <div id="support-element"></div>
        </div>
    </body>
    </html>
    Cross-browser, no side-effects and intuitive. What more do you want?
    Last edited by Frankie; 03-15-2013 at 11:32 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Frankie View Post
    I disagree with that advice. And I'm not the only one. Apart from the tricky behavior Peter-Paul Koch describes, there is more, described by Eric Meyer.

    My advice to prevent/solve float problems:

    ...snip/

    Cross-browser, no side-effects and intuitive. What more do you want?
    Hmm, added markup that presents no content, based on advice from a page written in 2003? Even Eric Meyer describes them as "structural hacks." Not for me I think.

    Granted there are a few places overflow: auto; may not work(very few) and, when it doesn't, there are other clearing methods including your suggestion.

    I especially like the added bonus using overflow has of showing a scrollbar when you don't follow the box model rule.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    Quote Originally Posted by Excavator View Post
    Hmm, added markup that presents no content, based on advice from a page written in 2003? Even Eric Meyer describes them as "structural hacks." Not for me I think.
    Giving something a name is easy. I could call using overflow to combat a float problem "abuse".

    Quote Originally Posted by Excavator View Post
    Granted there are a few places overflow: auto; may not work(very few) and, when it doesn't, there are other clearing methods including your suggestion.
    I think you are downplaying it. There are places were it doesn't work, it has side-effects and it is non-intuitive, most certainly for beginners such as the OP.

    Quote Originally Posted by Excavator View Post
    I especially like the added bonus using overflow has of showing a scrollbar when you don't follow the box model rule.
    That is what overflow should be used for, but as Koch's article says, three out of four values solve the float problem. Not just "auto". The others may give problems.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #6
    New Coder
    Join Date
    Mar 2013
    Posts
    63
    Thanks
    2
    Thanked 2 Times in 2 Posts
    I kinda have the same problem i think


  •  

    Tags for this Thread

    Posting Permissions

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