SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Simple Floating

  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Simple Floating

    I seem to have forgotten how to do this- I have two buttons [leftBtn] [rightBtn] which I have centered [leftBtn] and floated:right for [rightBtn]. Once I float:right the [leftBtn] button which is centered shifts to the left a bit and no longer is in its centered position. Is there a method to keep the the [leftBtn] button centered while floating:right [rightBtn]?
    Code:
    <div class="centeredBtn"><div>[leftBtn]</div><div class="floatedBtn">[rightBtn]</div></div>
    -=SunnaH=-

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You could try something like this, but it would be better to know the context of this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    .centeredBtn {width: 300px;}
    .leftBtn {width: 100px; margin: 0 100px;}
    .floatedBtn {width: 100px; float: right;}
    </style>
    	
    </head>
    
    <body>
    
    <div class="centeredBtn">
    	<div class="floatedBtn">[rightBtn]</div>
    	<div class="leftBtn">[leftBtn]</div>
    </div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. The context is a simple dialog box with a fixed width (500px by 400px) the two buttons are in the footer area. Your example is what I have too but it does not solve the issue of having [leftBtn] centered. And [rightBtn] absolutely positioned to the right. When you float the [rightBtn] the other button actually shifts its location thus is not in its original centered location.
    -=SunnaH=-

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Could you post an actual screen shot of what you want to make this clearer?

  5. #5
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have attached the screen shot illustrating what I am experiencing. But I think I answered my own question- I can absolutely position the [rightBtn] and that would solve it I believe. Sorry, I would be quicker but there are three computers connected for 30 developers
    Attached Images Attached Images
    -=SunnaH=-

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Yes, position: absolute for the right button is an option. Or, if the width of the container is fixed, you could perhaps wrap divs around each button, float those divs, and place the bottons to the right of each div, and give the first div a width that makes the button sit in the center. I guess that's not the most accurate method, though—especially as the button may change shape from browser to browser.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Is this what you have in mind?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	<style media="all">
    .buttonBox {
        border:2px solid #000;
        width:500px;
        padding:4px;
        margin:20px 0;
    }
    .centeredBtn {
        border:1px solid #888;
        background-color:#ccc;
        width:90px;
        text-align:center;
        margin:0px auto 0px;
    }
    .floatedBtn {
        border:1px solid #888;
        background-color:#ccc;
        width:90px;
        text-align:center;
        float:right;
    }
        </style>
    </head>
    <body>
    
    <div class="buttonBox">
    	<div class="floatedBtn">[rightBtn]</div>
    	<div class="centeredBtn">[leftBtn]</div>
    </div>
    
    </body>
    </html>
    (Ralph, please slice and dice at will.)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Nice work, ronpat.


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
  •