CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 263

HTML element not obeying vertical align styling when float styling is used

I have the following simple HTML and styling (http://jsfiddle.net/ZLNvv/).

<DIV>
    <BUTTON class="button"></BUTTON>
    <INPUT class="textbox" type=text>
</DIV>

.textbox{vertical-align:middle}
.button{float:left;width:75px;height:75px}

The button is oversized to show clearly that the input box isn't obeying vertical-align:middle. If I remove the float:left styling on the button, the vertical aligning works. Is there any way to combine the two?

I've given the most minimal example which shows the problem, a more accurate example of what I am trying to achieve is below (http://jsfiddle.net/peerz/).

<DIV>
    <DIV>Header</DIV>
    <DIV class ="lineDiv">
          <Div class="subHeaderDiv">
                  <BUTTON class=button></BUTTON>
                  <div class="subHeaderText"> Subheader 1</div >
          </Div>
          <INPUT class="textbox" type=text>
    </DIV>    
    <DIV class ="lineDiv">    
          <Div class="subHeaderDiv">  
                  <div class="subHeaderText"> Subheader 2</div >
          </Div>
          <INPUT class="textbox" type=text>
    </DIV>
</DIV>

.lineDiv{overflow:auto}
.subHeaderDiv{float:left;width:50%}
.subHeaderText{float:right;vertical-align:middle}
.textbox{float:left;height:30px;vertical-align:middle}
.button{float:left;width:75px;height:75px}

Thank you for any help.

Upvotes: 0

Views: 1332

Answers (3)

mpm
mpm

Reputation: 20155

Try this :

<div>
    <input type='button' class="button" value='press'/>
    <input class="textbox" type='text'/>
</div>
<style type='text/css'>
.textbox{vertical-align:middle;display:inline-block;}
.button{width:75px;height:75px;display:inline-block;}
</style>

it should do what you want.

Upvotes: 0

Ege
Ege

Reputation: 1202

this is the default behavior for floats, the floated element will try to go up and left/right as much as possible, hence vertical align will not work. display:inline-block or margins is the way here like panos and bigfatpig said.

Upvotes: 0

Panos
Panos

Reputation: 7407

If you want to just put the two ones side by side, try display: inline-block instead of float.

Upvotes: 1

Related Questions