Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post

    Aligning elements within a div - strange behaviour

    Hi,

    I am trying to align an input element and an image within a div element (sContainer), such that they are centred horizontally and vertically. Unfortunately it doesn't seem to work. When I use float:left; in the CSS code it causes them to not be vertically centred, using vertical-align:middle; results in the two elements not being joined. Here is the code:

    HTML:

    Code:
    <div class="center" id="header">
    
        <div id="leftContainer"></div>
    
        <div id="sContainer">
            <input id="sBox" type="text" />
            <img id="sButton" alt="Search" src="images/searchglass.jpg" />
        </div>
    
        <div id="rightContainer"></div>
    
    </div>
    CSS:

    Code:
    .center
    {
    clear:both;
    margin-left:auto;
    margin-right:auto;
    width:960px;
    }
    
    #header
    {
    background-color:gray;
    height:50px;
    }
    
    #rightContainer
    {
    background-color:red;
    float:left;
    width:200px;
    }
    
    #leftContainer
    {
    background-color:green;
    float:left;
    width:200px;
    }
    
    #sBox
    {
    border-bottom-color:black;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-left-color:black;
    border-left-style:solid;
    border-left-width:1px;
    border-top-color:black;
    border-top-style:solid;
    border-top-width:1px;
    height:18px;
    padding:5px;
    width:348px;
    }
    
    #sContainer
    {
    background-color:yellow;
    float:left;
    text-align:center;
    width:560px;
    }
    
    #searchContainer > *
    {
    vertical-align:middle;
    }
    Anyone know a solution?

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Wrap it in a div give it the desired width and use margin: 0 auto;

  • Users who have thanked sean3838 for this post:

    webguy08 (07-24-2012)

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Do you mean: create a child div of "sContainer" that within it has the input and image element?

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    408
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Input and image are very different elements and do not follow the same rules for alignment. You could try vertical-align:baseline, but in the end I expect you may have to use absolute position, and that would be just plain nasty.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #5
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sean3838 View Post
    Wrap it in a div give it the desired width and use margin: 0 auto;
    Thank you. It's annoying that this solution worked because I tried this before - I think I forgot to specify the width. Regardless, I am happy, thanks again


  •  

    Posting Permissions

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