CSS alignment

**DeNasio** · Sep 6, 2012 13:35

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?

**ralph.m** · Sep 6, 2012 17:05

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.

**dresden_phoenix** · Sep 6, 2012 17:07

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)

**jylan** · Sep 6, 2012 17:07

Alternatively: Leave display:block on the link, then add float:left; margin:0 0 0 25px; to the input.

**DeNasio** · Sep 6, 2012 18:07

Shitttttt!!! I meant align right!!!

**jylan** · Sep 6, 2012 18:27

Just apply float:left to both the input and the link.

**DeNasio** · Sep 6, 2012 18:34

Originally Posted by jylan

Just apply float:left to both the input and the link.

Nope, doesn't seem to work. See updated link.

**dresden_phoenix** · Sep 6, 2012 20:18

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)

**DeNasio** · Sep 7, 2012 04:16

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.

**ralph.m** · Sep 7, 2012 06:27

Originally Posted by DeNasio

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.

**ronpat** · Sep 7, 2012 13:23

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>

**DeNasio** · Sep 7, 2012 17:06

Thanks ronpat!

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

Your code with {display:inline-block} worked just fine!

**ronpat** · Sep 7, 2012 17:19

You're welcome. Thanks for the feedback. Glad to help.

User Tag List

Thread: CSS alignment

Thread Tools

Display

CSS alignment

Bookmarks

Bookmarks

Posting Permissions