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
    Sep 2011
    Posts
    61
    Thanks
    9
    Thanked 1 Time in 1 Post

    Dynamically sized div's

    Hi, I am trying to make some div's using absolute positioning, and I would like one of them to fill out the rest of the screen...
    In order to do that, I wrote the following in my CSS:
    Code:
    position:absolute;
    top: 150px;
    left: 270px;
    overflow:hidden;
    bottom:10px;
    The div still won't stretch out though.
    You can see the site here: http://www.zeroyear.net/loadpage.php
    Need help?
    I work with the following languages:
    HTML: Professional - PHP: Professional - Visual C#: Average - CSS: Average - ASP: Please don't hurt me! ;(
    Currently practicing: Visual C#

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Time Sheep,
    I think ap is not so dynamic since it is removed from the normal flow of the document.
    Along with your top:150px;left:270px add right: 0; and see if that makes it take the rest of the space available.
    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:

    Time Sheep (12-23-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    61
    Thanks
    9
    Thanked 1 Time in 1 Post
    Cool, that worked for the horizontal part, the vertical part is still wrong though :S
    EDIT: The vertical part also works, but the monitor has to be really small before it clips something off :/
    EDIT2: I know what's wrong, It should work if I fill in more content.
    Is there a way to expand them to the size I want and then leave the rest empty? padding-bottom:auto; maybe?
    Last edited by Time Sheep; 12-23-2011 at 10:37 PM.
    Need help?
    I work with the following languages:
    HTML: Professional - PHP: Professional - Visual C#: Average - CSS: Average - ASP: Please don't hurt me! ;(
    Currently practicing: Visual C#

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by Time Sheep View Post
    Cool, that worked for the horizontal part, the vertical part is still wrong though :S
    EDIT: The vertical part also works, but the monitor has to be really small before it clips something off :/
    That has been working all along. A background color shows you, add this bit highlighted in red:
    Code:
    #wrp_twitter{
    	position:absolute;
    	top: 150px;
    	left: 270px;
    	overflow:hidden;
    	bottom:10px;
    	right:10px;
    	padding: 0 0 0 0;
    	border:0px solid #0099CC;
    background: #f00;
    }
    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
    New Coder
    Join Date
    Sep 2011
    Posts
    61
    Thanks
    9
    Thanked 1 Time in 1 Post
    Oh... I just figured I made this way too messy for myself :/
    I found a solution, I just forgot that I'm using 2 divs inside eachother - which is not necessary as the header styles etc are classes and the rest are defined by ID's.
    Need help?
    I work with the following languages:
    HTML: Professional - PHP: Professional - Visual C#: Average - CSS: Average - ASP: Please don't hurt me! ;(
    Currently practicing: Visual C#


  •  

    Posting Permissions

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