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 to the CF scene
    Join Date
    Mar 2005
    Location
    Middlesbrough, England
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Container and DIV issues.

    I have a container (600px) which is holding two floating DIV's, which sit fine within the container, my problem is that i want them both to move down with the content.

    As it stands the DIV's move down seperatly depending on the content placed within them, i want this so the bottom border is all together and that it all moves as one.

    My website can be found Here and the problem is there to be seen, i'll post code later when i'm home from college if anyone needs it to help me sort the problem.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    how is the text generated? is it dynamic or manual?

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Middlesbrough, England
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    manual, i'm also in the process of finding a new host, which is pretty annoying!

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Middlesbrough, England
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    below is the problem as an image and the coding i have on the site from the navigation downwards.

    ---------- CSS ------------

    #container {
    margin: 0px;
    padding: 0px;
    width: 602px;
    margin-left: auto;
    margin-right: auto;
    }

    #con_left {
    margin: 0px;
    padding: 0px;
    width: 421px;
    float: left;
    background-image: url("images/newscontent.gif");
    background-repeat: no-repeat;
    background-position: top left;
    border-right: 1px dashed #D993D5;
    border-bottom: 1px solid black;
    border-left: 1px solid black;

    }

    #con_right {
    margin: 0px;
    padding: 0px;
    width: 178px;
    float: right;
    background-color: #A4A2A4;
    border-right: 1px solid black;
    border-bottom: 1px solid black;

    }

    ---------- CSS END ------------

    ---------- BODY ---------------

    <div id="logo"></div>
    <div id="nav">
    <p class="nav">Home Portfolio About CSS Links</p>
    </div>
    <div id="container">
    <div id="con_left">
    <p class="con_left">content content content content content
    content content content content content content content
    content</p>
    </div>
    <div id="con_right">
    <p class="con_right">content content content content content
    content content content content content content</p>
    </div>
    </div>
    </body>

    ---------- BODY END ------------

    Last edited by Pally; 03-08-2005 at 01:27 PM.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trickery, table

    The only pure HMTL/CSS way to achieve to elements sitting next to eachother and sharing the same height would be to use table markup.
    Any other solution would require javascript or setting the heights to a fixed width; relying on percentage heights requires the containing block to be of set height or be absolutely positioned; see Height property for further details.

    You can also fake equal hight visually using a background image treatment.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Middlesbrough, England
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so if i created a whitebackground image, and set it to repeat x & y would this allow me to get it to work or not ?

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Container

    The idea is to fit both "columns" inside a container element; the height of this container is dependent on the largest height of either column -provided that there's something in place to clear any floated stuff.

    This container can be assigned a background image to fake the two-column visual effect; I don't know if you want the dark grey to run all the way down, but the white, the gray and any kind of separator or border can be included in a single horizontal bar type image. Repeat-y would be the choice; since you use a fixed width layout, the width of the image can be chosen to fit this.

    More on this topic can be found in the ALA article Faux Columns.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #8
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Middlesbrough, England
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh yeah, i get what you mean, thanks alot i think i shall do that


  •  

    Posting Permissions

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