Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    I want a div to enclose two other divs, one to the left hand side, and one to the extreme right.

    I've tried doing it with css float, but it doesn't work.

    I've attached a file to show how it should work.

    The first example uses float, but the containing div defaults to the minimum height possible, as if it doesn't contain the divs.

    The second is basic, and just shows div's default behaviour.

    The third shows what I am trying to achieve, but done with tables.


    Note: It doesn't matter how wide the divs become, as long as their contents is to the extreme left and right of the containing div.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    I was not able to open your file but this code will produce what you want(provided I understand what you want)

    CSS
    Code:
    .container {
      position: relative;
      width: 100%; /*change to whatever value you want*/
      height: 50px; /*change to whatever value you want*/
      background: #00f; /*adding color*/
    }
    .left {
      position: absolute;
      left: 0%;
      display: inline;
      width: 50px; /*change to whatever value you want*/
      height: 50px; /*change to whatever value you want*/
      background: #f00; /*adding color*/
    }
    .right {
      position: absolute;
      right: 0%;
      display: inline;
      width: 50px; /*change to whatever value you want*/
      height: 50px; /*change to whatever value you want*/
      background: #0f0; /*adding color*/
    }
    Markup
    Code:
    <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    </div>
    What you want to notice is the use of relative and absolute. As well as the display properties.

    Hope this answers your question.


  4. #3
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    just saw what you were trying to do.. try this css instead:

    Code:
    .container {
      position: relative;
      width: 100%; /*expand to width of container*/
      height: 50px; /*change to whatever value you want*/
      background: #00f; /*adds color*/
    }
    .left {
      position: absolute;
      left: 0%; /* 'glues' the left of the div to the container*/
      width: 50%; /*keeps div half the total width of container*/
      display: inline; /*allows you to put divs side by side*/
      height: 50px; /*change to whatever value you want*/
      background: #f00; /*adds color*/
    }
    .right {
      position: absolute;
      right: 0%; /* 'glues' the right of the div to the container*/
      width: 50%; /*keeps div half the total width of container*/
      display: inline; /*allows you to put divs side by side*/
      height: 50px; /*change to whatever value you want*/
      background: #0f0; /*adds color*/
    }


  5. #4
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    OK, thanks Glyakk! The actual width of the sub-divs doesn't matter, i just coloured them white for clarity.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com