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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts

    DIV Container that changes sizes based on content

    Hey, I need some help!

    I'm coding a website with a centered div container that needs to change sizes based on the different pages. They contain different amounts of information, and the box needs to extend down the page farther when it is more,

    Specifically while pushing the Footer (which is a menu bar) downwards.

    So I want all my web pages to share a CSS file, I just need it to be able to change sizes or be size set-able without affecting other page sizes.

    Thanks for your help in advance!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    By default, the <div> element will automatically expand by itself, based on the contents inside it. Can we have a link to your page or the complete HTML+CSS of a page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Sure! Where can I host online?

    I'm brand new to HTML design and am designing for a major company so I may have to send you it privately.

    I can't edit the current site, as it is currently up (obviously).

    Alternatively I can provide a download with my html css and image files...

    I am brand new to coding but it's very intuitive to me, so I've designed a fairly complex site. Here is atleast an image of it,

    It most likely goes without saying the pink bubbles are censors hehe,



    So the height and settings of the container box are very specific.

    Code:
    #container {
    	height: 640px;
    	width: 900px;
    	margin-left: auto;
    	margin-right: auto;
    	right: 10px;
    	left: 10px;
    	margin-top: -10px;
    	background-color:d5d5d5; 
    	border-color:4f5150;
        border-style:outset;
        border-width:3px;

    *EDIT* also I just made my footer relative. Originally it was in the DIV box with a relation to that image box extending it past the bottom of the container, but in my next portion (the one with content) the image shifts upwards, creating more space for content.


    How can I get my footer relative to my container but still that many pixels? I tried to clip it in the middle then left 430 pixels but I can't get it to work. This, however, I can most likely solve on my own.
    Last edited by Mike Walker; 07-15-2011 at 04:17 PM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    What happen when you remove height: 640px; from the above CSS?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Mike Walker (07-15-2011)

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    The box retracts to very small and behind everything, oddly enough.

    I may need to re-script a lot of things, I'm not quite sure,

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Not easy to debug it without seeing the full HTML+CSS of that page. Anyway, if you have any floated elements inside that particular <div>, you'd need to clear the floats. Have a try by setting overflow:auto; to it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Mike Walker (07-15-2011)

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thank you so far, that works successfully, however requires me to rescript some other things.

    For instance, that makes the third button (The red one bottom right) extend the box downwards.



    Which is weird, because the three boxes containing those columns (News 1, News 2, and the Red 150 Button] all float left and have the exact same class...

    And the footer didn't push down at all, hehe.

    PS, I noticed your thanks are extremely close to your posts. I'll make sure I thank you for every post you waste on me.

    PPS, apparently I'm great at creating these things originally as I have it planned out well in my head.
    I'm significantly worse at trouble shooting or editting later when I need divs and elements to interact differently X_X
    Last edited by Mike Walker; 07-15-2011 at 04:48 PM.

  • #8
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Bring Up My Post

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Could you upload this to Dropbox or a free host or anything really please? abdura is not magic, whatever he'll have you believe, and it's almost impossible to troubleshoot without access to a live page.

  • #10
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    If you want to set a minimum height of container and it should extend according to conatin.. use following code:

    Code:
    .container 
    {
    min-height:400px;
    height:400px; /*fix for IE*/
    height:auto !important; /* for non IE browsers */
    }


  • #11
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hey. Anywhere you can suggest to put up a private drop box that's password protected, allowing me to message the people helping me with the password?

    It's kind of my companies information,

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    why are you being so secretive? anyone who is "inventive" enough can figure out just from your screen shots your current site... so keeping the site hidden from public view is a no-go... and as for client side presentation- you will not be able to hide anything from anyone who knows how to view source. the probability that anyone would try to steal your code and undercut you is minimal especially since your work can/could be traced back and a theft would be met with a lawsuit... post your work, just don't post your server-side work...

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

  • #13
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Because I was unsure of if my company would be comfortable with that.

    I'm very very very new to coding, as in a week ago I began this project... I'm very good at following guides and a lot of it is intuitive to me, but I knew nothing about html a week ago...

    How do I give you my non server-side work?..

    For that matter, how do I give you guys anything??

    I am using dream weaver, I have no access to the real site...

  • #14
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    i do not know the dreamweaver IDE... i use vis studio 2010... but i have a web form, and then i have a web form.cs
    ex frm_main.aspx and frm_main.aspx.cs
    if i copy/paste all my code from just the .aspx page you won't see my code behind... i know your current site is in php, but idk if the one you are developing is in php... i also don;t know if php has a code behind file... so maybe not... but if you go through, copy/paste everything to notepad, and then go and delete all the php stuff then we won't see it... and i would ask if they care... as i said anyone inventive can figure out your current site and you are putting forth a lot of effort to "hide" it... i don't think painted circle bubbles is enough "legal" protection- IMO you might as well be posting all the stuff... now make sure you omit database connections and things like that... just post the raw html and CSS... if you like (and if you trust me- i trust me but idk you and you don't know me) you can email me and i will remove all the stuff you shouldn't post (but it'll be my opinion and ive never looked at php).... i guess in short is that it is becoming very difficult to help/guide you when there is very little info being supplied.

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

  • #15
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Mike Walker View Post
    Because I was unsure of if my company would be comfortable with that.

    I'm very very very new to coding, as in a week ago I began this project... I'm very good at following guides and a lot of it is intuitive to me, but I knew nothing about html a week ago...

    How do I give you my non server-side work?..

    For that matter, how do I give you guys anything??

    I am using dream weaver, I have no access to the real site...
    You've already shown us screenshots--how is the live site any different? Code is absolutely uncopyrightable.

    I gave you some suggestions: upload to a service like Dropbox or any hosting account that gives you space for free. Please, help us to help you.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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