SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: flexible space

  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    flexible space

    Code:
    test.39.html
    
    <div style='width:100&#37;;'>
    
      <div id='left area' 
           style='float:left;width:200px;
                    background-color:green;
                    color:white;text-align:center'>
        left area
      </div>
    
      <div></div>
    
      <div id=right area'>
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' 
                     style='width:90'>
            <input type='text' value='1st text' 
                     style='width:55px;height:20px;
                     border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' 
                     style='width:90'> 
          </form>
        </div>
    
        <div style='float:left'>
          <form>
            <input type=button value='2nd leftButton' 
                      style='width:90'>
            <input type='text' value='2nd text' 
                     style='width:55px;height:20px;border:0px;
                              background-color:pink'>
          </form>
        </div>
        <div>
          <form> 
            <input type=button value='2nd rightButton' 
                     style='width:90'> 
          </form>
        </div>
    
      </div>
    
    </div>
    If you click http://www.gisic.com/test/test39.html, you can see the browsing result of the code above.


    (1) I like to put the 2nd left button, the 2nd text, and the 2nd right button to the most right position of any browser.

    and

    (2) I like to make a flexible space between 1st right button and 2nd left button.


    Can I do (1) and (2) with your help?
    Last edited by dotJoon; Apr 7, 2007 at 17:27.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    (1) Float those right or use absolute positioning.
    (2) Use margins.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    (1) Float those right or use absolute positioning.
    The following is modified code. but it still has problems.
    Code:
    test.40.html
    
    <div style='width:100&#37;;'>
    
      <div id='left area' 
           style='float:left;width:200px;
                    background-color:green;
                    color:white;text-align:center'>
        left area
      </div>
    
      <div></div>
    
      <div id=right area'>
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' 
                     style='width:90'>
            <input type='text' value='1st text' 
                     style='width:55px;height:20px;
                     border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' 
                     style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' 
                      style='width:90'>
            <input type='text' value='2nd text' 
                     style='width:55px;height:20px;border:0px;
                              background-color:pink'>
          </form>
        </div>
        <div>
          <form> 
            <input type=button value='2nd rightButton' 
                     style='width:90'> 
          </form>
        </div>
    
      </div>
    
    </div>
    As you can see at http://www.gisic.com/test/test40.html,
    The position of 2nd right button is wrong.

    How can I fix it?


    Quote Originally Posted by Raffles View Post
    (2) Use margins.
    Where should I put margins?
    Last edited by dotJoon; Apr 7, 2007 at 17:27.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    (1) You should be able to see that yourself. Its containing div isn't floated
    (2) What do you mean? Use margin-left or margin-right either on the containing divs or on the inputs.

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    (1) You should be able to see that yourself.
    That's true. but I still need your help.

    <div> is very complicate to me. <table> was clear.

    Quote Originally Posted by Raffles View Post
    Its containing div isn't floated
    I don't understand the hint yet.

    Code:
    test.41.html
    
    <div style='width:100%;'>
    
      <div id='left area' 
           style='float:left;width:200px;
                    background-color:green;
                    color:white;text-align:center'>
        left area
      </div>
    
      <div></div>
    
      <div id=right area'>
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' 
                     style='width:90'>
            <input type='text' value='1st text' 
                     style='width:55px;height:20px;
                     border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' 
                     style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' 
                      style='width:90'>
            <input type='text' value='2nd text' 
                     style='width:55px;height:20px;border:0px;
                              background-color:pink'>
          </form>
        </div>
        <div style='float:right'>
          <form> 
            <input type=button value='2nd rightButton' 
                     style='width:90'> 
          </form>
        </div>
    
      </div>
    
    </div>
    http://www.gisic.com/test/test41.html shows a little better, but positioning of the 2nd right button is still worng.

    How can I change the positioning of the 2nd right button to the most right position?

    Quote Originally Posted by Raffles View Post
    (2) What do you mean? Use margin-left or margin-right either on the containing divs or on the inputs.
    I know margin-left or margin-right, but I like to know where (which div) should I put the margins.
    Last edited by dotJoon; Apr 7, 2007 at 17:27.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you want to put the 2nd right button at the "most right position", you need to put BEFORE the other div that has float:right.

    As for the margins, just try with the divs that contain the things you want to have gaps in between. This is what you need to do more of before asking for help: trial and error.

    You should stop thinking about tables. Think of the div simply as a box. That's all. A flexible box that you can also set to a specific width, and you can put things in it. You can also tell it how far away from other boxes it should be using margins.

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    If you want to put the 2nd right button at the "most right position", you need to put BEFORE the other div that has float:right.
    I put the div which has the 2nd right button before the div that has float:right in the code below.
    Code:
    test42.html
    
    <div style='width:100&#37;;'>
    
    
      <div id='left area' style='float:left;width:200px;background-color:green;color:white;text-align:center'>
        left area
      </div>
    
      <div></div>
    
      <div id=right area'>
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' style='width:90'>
            <input type='text' value='1st text' style='width:55px;height:20px;border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' style='width:90'> 
          </form>
        </div>
    
        <div>
          <form> 
            <input type=button value='2nd rightButton' style='width:90'> 
          </form>
        </div>    
    
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' style='width:90'>
            <input type='text' value='2nd text' style='width:55px;height:20px;border:0px;background-color:pink'>
          </form>
        </div>
      </div>
    </div>
    But the result of it at http://www.gisic.com/test/test42.html disappoints me.

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    But you haven't floated it right...

  9. #9
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    But you haven't floated it right...
    Thanks it works fine at http://www.gisic.com/test/test45.html.

    But I have another problem in making it two rows.

    Code:
    test42.html
    
    <div style='width:100%;'>
    
    
      <div id='left area' style='float:left;width:200px;background-color:green;color:white;text-align:center'>
        left area
      </div>
    
      <div></div>
    
      <div id=right area'>
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' style='width:90'>
            <input type='text' value='1st text' style='width:55px;height:20px;border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form> 
            <input type=button value='2nd rightButton' style='width:90'> 
          </form>
        </div> 
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' style='width:90'>
            <input type='text' value='2nd text' style='width:55px;height:20px;border:0px;background-color:pink'>
          </form>
        </div>
    
        <br> 
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' style='width:90'>
            <input type='text' value='1st text' style='width:55px;height:20px;border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form> 
            <input type=button value='2nd rightButton' style='width:90'> 
          </form>
        </div> 
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' style='width:90'>
            <input type='text' value='2nd text' style='width:55px;height:20px;border:0px;background-color:pink'>
          </form>
        </div>
    
      </div>
    </div>
    http://www.gisic.com/test/test46.html

    I don't think <br> in the above code works. but I think you will know what I want with the code above.

    I tried it wiht another div wihout float, but failed.

    How can I writ it for making it two rows?

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You should NOT be using <br> there. You need to clear the floated div, the one before the red <br> up there. And if you don't know how to clear floats, look at the CSS FAQ at the top of the CSS forum.

  11. #11
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    You should NOT be using <br> there. You need to clear the floated div, the one before the red <br> up there. And if you don't know how to clear floats, look at the CSS FAQ at the top of the CSS forum.
    I found the code below at http://www.sitepoint.com/forums/show...5&postcount=15.

    Code:
    <div style="clear:both"></div>
    So I modified the code like the following.
    Code:
    test42.html
    
    <div style='width:100%;'>
    
    
      <div id='left area' style='float:left;width:200px;background-color:green;color:white;text-align:center'>
        left area
      </div>
    
      <div></div>
    
      <div id=right area'>
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' style='width:90'>
            <input type='text' value='1st text' style='width:55px;height:20px;border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form> 
            <input type=button value='2nd rightButton' style='width:90'> 
          </form>
        </div> 
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' style='width:90'>
            <input type='text' value='2nd text' style='width:55px;height:20px;border:0px;background-color:pink'>
          </form>
        </div>
    
        <div style="clear:both"></div> 
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' style='width:90'>
            <input type='text' value='1st text' style='width:55px;height:20px;border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form> 
            <input type=button value='2nd rightButton' style='width:90'> 
          </form>
        </div> 
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' style='width:90'>
            <input type='text' value='2nd text' style='width:55px;height:20px;border:0px;background-color:pink'>
          </form>
        </div>
    
      </div>
    </div>
    The drop problem seems solved but I have another problem in left side at http://www.gisic.com/test/test47.html

    The 1st left button, the 1st text, and the 1st right button should not invade the left area.


    How can I make it?

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your server keeps timing out.

    And joon, your ids should NOT have spaces in them. Like id="right area" - that's bad. That implies you are giving it two ids - right AND area, but ids are unique, so an element can't have more than one.

  13. #13
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Your server keeps timing out.
    Ah, Yes.

    It means I am asleep.
    I turn my computer off when I go to bed.

    Now it's alive as I wake up.


    Quote Originally Posted by Raffles View Post
    And joon, your ids should NOT have spaces in them. Like id="right area" - that's bad. That implies you are giving it two ids - right AND area, but ids are unique, so an element can't have more than one.

    As I accept your advice, I modified it like the following.
    Code:
    test50.html
    
    <div style='width:100%;'>
    
    
      <div id='left-area' style='float:left;width:200px;background-color:green;color:white;text-align:center'>
        left area
      </div>
    
      <div></div>
    
      <div id='right-area'>
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' style='width:90'>
            <input type='text' value='1st text' style='width:55px;height:20px;border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form> 
            <input type=button value='2nd rightButton' style='width:90'> 
          </form>
        </div> 
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' style='width:90'>
            <input type='text' value='2nd text' style='width:55px;height:20px;border:0px;background-color:pink'>
          </form>
        </div>
    
        <div style="clear:both"></div> 
    
        <div style='float:left'>
          <form>
            <input type=button value='1st leftButton' style='width:90'>
            <input type='text' value='1st text' style='width:55px;height:20px;border:0px;background-color:yellow'>
          </form>
        </div>
        <div style='float:left'>
          <form> 
            <input type=button value='1st rightButton' style='width:90'> 
          </form>
        </div>
    
        <div style='float:right'>
          <form> 
            <input type=button value='2nd rightButton' style='width:90'> 
          </form>
        </div> 
        <div style='float:right'>
          <form>
            <input type=button value='2nd leftButton' style='width:90'>
            <input type='text' value='2nd text' style='width:55px;height:20px;border:0px;background-color:pink'>
          </form>
        </div>
    
      </div>
    </div>
    But my problem is not solved yet at http://www.gisic.com/test/test50.html.

    http://www.gisic.com/test/test49.html is the result of another trial.


    http://www.gisic.com/test/test48.html

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It seems like you need to push #right-area 200px to the right... how would you do that?

  15. #15
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    It seems like you need to push #right-area 200px to the right... how would you do that?
    I don't understand what you mean...

  16. #16
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Floats aren't greedy with the space they occupy, that's why things wrap around them.

    Think about how you would make a 200px wide space to the left of something, like your div.


Bookmarks

Posting Permissions

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