SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: CSS alignment

  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS alignment

    Please take a look at the following example:

    http://www.ballot-box.net/test/appearance.html

    How can I get the red square aligned left of the input text field?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could remove display: block and instead use float: left;

    However, this would be easier, and there would be more options, if you reversed the order of the two elements.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    changing your code to :

    Code:
    <input type="text" name="bgcolor1" value="Red" size="15" maxlength="25" style="width: 115px; margin-right:-145px; margin-left:30px; vertical-align:middle;">
    <a href="" style="border: 1px solid #000000;width: 15px;height: 15px; background: red; display:inline-block;vertical-align:middle; "></a>
    OR
    Code:
     
    <a href="" style="border: 1px solid #000000;width: 15px;height: 15px; background: red; margin:.2em .5em 0 0; float:left;"></a>
    should do the trick.

    It would be easier sill to just reverse the order of the elements int he markup ( I dont see why the empty anchor MUST NECESSARILY come after the input)

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Yeppoon, QLD, Australia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternatively: Leave display:block on the link, then add float:left; margin:0 0 0 25px; to the input.

  5. #5
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shitttttt!!! I meant align right!!!
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Yeppoon, QLD, Australia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just apply float:left to both the input and the link.

  7. #7
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jylan View Post
    Just apply float:left to both the input and the link.
    Nope, doesn't seem to work. See updated link.
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    thats because it should be float: RIGHT to both elements. The first element will then be at the right most the second will appear left of it. ( same thing as floating both left, except mirrored)

  9. #9
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I should just solve this problem by using a table to put the input box and the square next to each other, don't you guys think? See the updated link. That's what I wanted, but without using a table.

    By the way, the alignment with both float to the right, of both float to the left looks different in IE than in Chrome & FF.
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DeNasio View Post
    I think I should just solve this problem by using a table ... don't you guys think? See the updated link.
    That's always the wrong option. This is not tabular data.

    If I were you, I'd reverse the original order and set them both to display: inline-block.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Adding a valid !DOCTYPE to your example page should fix most or all of the inconsistencies between browsers.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!--
        Added a valid 4.01 Transitional DOCTYPE, html, head, and body tags.  (No more quirks mode.)
        On-page css could be placed between the style tags in the head section.
        Closed the p tags.
        Your code.  Indents are for my convenience.
        My contribution to the cause is shown last.
    -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <title>untitled</title>
        <style type="text/css">
    p {margin-bottom:0}
        </style>
    </head>
    <body>
    
    <p>using table</p>
    <table cellspacing="0" cellpadding="0" bgcolor="#448ccb" border="0">
        <tr>
            <td>
                <table cellspacing="1" cellpadding="5" width="500" border="0">
                    <tr>
                        <td bgcolor="#f9f9f9" align="left" width="50%">
                            Background color of <u>title</u>&nbsp;&nbsp;
                        </td>
                        <td bgcolor="#f9f9f9" align="left" width="50%">
                            <table>
                                <tr>
                                    <td>
                                        <input type="text" name="bgcolor1" value="Red" size="15" maxlength="25" style="width: 115px">
                                    </td>
                                    <td>
                                        <a href="#" style="display: block;border: 1px solid #000000;width: 15px;height: 15px; background: red;"></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    
    <p>Try this:  changed {display:block} to {display:inline-block}; added {vertical-align:middle} to "middle" the red square.</p>
    <table cellspacing="0" cellpadding="0" bgcolor="#448ccb" border="0">
        <tr>
            <td>
                <table cellspacing="1" cellpadding="5" width="500" border="0">
                    <tr>
                        <td bgcolor="#f9f9f9" align="left" width="50%">
                            Background color of <u>title</u>&nbsp;&nbsp;
                        </td>
                        <td bgcolor="#f9f9f9" align="left" width="50%">
                            <input type="text" name="bgcolor1" value="Red" size="15" maxlength="25" style="width:115px;">
                            <a href="#" style="display:inline-block; vertical-align:middle; border:1px solid #000000; width:15px; height:15px; background:red"></a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    
    </body>
    </html>

  12. #12
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ronpat!

    I forgot all about adding a !DOCTYPE to your the example page.

    Your code with {display:inline-block} worked just fine!
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You're welcome. Thanks for the feedback. Glad to help.


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
  •