CODEWITHSUNDEEP
csshtmlalignment
TheBoss
TheBoss

Reputation: 2044

Aligning elements within a div - strange behaviour

I am trying to align a div and an image within a div element, such that they are centred horizontally. This seems to work correctly up until I specify the img element's src attribute - assigning it an image; at which point it appears like so:

picture of the problem

The source code is as follows (HTML):

<div id="sContainer">
    <input id="sBox" type="text" />
    <img id="sButton" alt="Search" src="images/searchglass.jpg" />
</div>

and (CSS):

#sContainer
{
background-color:yellow;
float:left;
text-align:center;
width:560px;
}

For those interested in what it looks like when the image has not got a value in the src attribute, and so displays the alt text, this is what it looks like:

picture of problem

Anyone know how to solve this irritating problem?

Edit:

More 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>

And CSS:

.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;
}

Upvotes: 0

Views: 501

Answers (3)

Charlie
Charlie

Reputation: 11777

http://jsfiddle.net/QUk5m/

My suggestions:

  1. Put the searchbar and the search button in a div, called inside-container in this example
  2. Float the searchbar to the left, and the search button to the right
  3. Give the outside container, or #sContainer, a height, since you have floated elements inside it
  4. Give each element a height and width!

Obviously, make the changes to my jsFiddle that better suit your heights/widths, and naming structure.

Upvotes: 0

zetlen
zetlen

Reputation: 3619

When the image has a valid src attribute, it gains dimensions, and therefore forces the height on its parent element. If you want to keep the text box and image as inline elements, you could adjust the line-height of the parent to the image height:

#sContainer
{
    background-color:yellow;
    float:left; // btw, does this need to be floated?
    text-align:center;
    width:560px;
    line-height: 30px;
}

However, this won't render consistently in all browsers, because by default those elements are vertically aligned to the baseline. You want to vertically align all child elements of #sContainer to the top or middle.

#sContainer > *
{
    vertical-align: middle;
}

Upvotes: 1

udidu
udidu

Reputation: 8588

Try to give your img the vertical-align css style, for example:

#sContainer img
{
    vertical-align: -4px;
}

Upvotes: 0

Related Questions