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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Dynamic div height

    Hi
    I have several html pages and each of them has different content in my so called div id=wrapper.
    How do I make the height of the wrapper dynamic to the content of the divs?
    Last edited by Luigi Vercotti; 11-19-2013 at 06:16 PM.
    "I believe in peace and bashing two bricks together."
    .~*MONTY PYTHON*~.*~.

    .~*MONGOL RALLY 2009*~. PIRANHA BROTHERS RT

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Luigi Vercotti,
    The normal behavior of a div is to enclose it's content. How are you stopping your #wrapper from doing that?
    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

  • Users who have thanked Excavator for this post:

    Luigi Vercotti (11-21-2013)

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Well maybe because I've got div background.image.
    Now I have height 1200px with the background image (just some pattern), when I do not set up height the wrapper height shrinks to my height of header
    Code:
    #wrapper {
    	margin-right: auto;
    	margin-left: auto;
    	width: 1280px;
               height: 1200px;
    	position: relative;
    	background-image: url(../images/background02.png);
    }
    #headerUnder {
    	width: 1260px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 0px;
    }
    #header {
    	height: 200px;
    	padding-top: 10px;
    
    }
    #main {
    
    }
    #between {
    	height: 5px;
    	width: 1260px;
    	float: left;
    }
    
    #container {
    	background-image: url(../images/bg.jpg);
    	height: 150px;
    	width: 1035px;
    	margin-left: 10px;
    	float: left;
    	padding-left: 10px;
    }
    
    
    body {
    	margin-top: 0px;
    }
    #containerRight {
    	height: 800px;
    	width: 200px;
    	float: right;
    	background-image: url(../images/bg.jpg);
    	margin-right: 10px;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 12px;
    	font-style: normal;
    	color: #333;
    	padding-left: 10px;
    }
    
    #footer {
    	background-color: #330000;
    	color: #CCC;
    	height: 25px;
    	width: 1260px;
    	float: none;
    	position: absolute;
    	bottom: 20px;
    	margin-bottom: 0px;
    	margin-left: 10px;
    }
    }
    "I believe in peace and bashing two bricks together."
    .~*MONTY PYTHON*~.*~.

    .~*MONGOL RALLY 2009*~. PIRANHA BROTHERS RT

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    When you float #between #containerRight and #container you will need to clear them so #wrapper will enclose them.

    Look at it this way once, changes highlighted in red -
    Code:
    #wrapper {
    	margin-right: auto;
    	margin-left: auto;
    	width: 1280px;
    /*height: 1200px;*/
    overflow: auto;
    	position: relative;
    	background-image: url(../images/background02.png);
    }
    See this article on clearing 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

  • Users who have thanked Excavator for this post:

    Luigi Vercotti (11-21-2013)

  • #5
    New Coder
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you it seems to fix my "problemo"
    I'll take a look at the article.
    Thanks ;-)
    "I believe in peace and bashing two bricks together."
    .~*MONTY PYTHON*~.*~.

    .~*MONGOL RALLY 2009*~. PIRANHA BROTHERS RT

  • #6
    New Coder
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts
    If I may another one please.
    I've got css for each of the html page.
    The main css layout has the footer. When I put some content inside of the container the footer always appear somewhere else like the footer does not know that there is some content or some another css layout for the page.
    Does it make any sense?
    "I believe in peace and bashing two bricks together."
    .~*MONTY PYTHON*~.*~.

    .~*MONGOL RALLY 2009*~. PIRANHA BROTHERS RT

  • #7
    New Coder
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts
    No worry ;-)
    I found some code which might work for me
    Code:
    position: absolute;
        bottom: 0px;
        width: 960px;
        padding: 10px 0;
        background-color: #0033FF
    "I believe in peace and bashing two bricks together."
    .~*MONTY PYTHON*~.*~.

    .~*MONGOL RALLY 2009*~. PIRANHA BROTHERS RT

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Do you really need to use AP on your footer? It would probably work better if you didn't. See the pitfalls of absolute positioning here.
    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

  • Users who have thanked Excavator for this post:

    Luigi Vercotti (11-21-2013)


  •  

    Posting Permissions

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