CODEWITHSUNDEEP
htmlcss
Andy J Partridge
Andy J Partridge

Reputation: 1

HTML/CSS - 100% DIV not lining up a 30% and 70% Child

I'm trying to understand why this doesn't line up the two INPUT elements side by side.

Thanks for any help you can provide.

<STYLE>

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
</STYLE>


    <DIV STYLE='width:100%;'>
        <INPUT  TYPE=text  size=10 maxlength=10 
                STYLE='width:70%;'>
        <BUTTON STYLE='width:30%; float:right;'
        >Button</BUTTON>
    </DIV>

Upvotes: 0

Views: 2183

Answers (3)

AlexC
AlexC

Reputation: 9661

input{
    display:block;
    float:left;
    margin:0px;
    padding:0px;
    border:none;
}

Click Here

Need to remove extra space, padding, border, margin

Upvotes: 2

Samir Adel
Samir Adel

Reputation: 2499

<DIV STYLE='width:100%;'>
        <INPUT  TYPE=text  size=10 maxlength=10 
                STYLE='width:70%;float:left;'>
        <BUTTON STYLE='width:30%; float:left;'
        >Button</BUTTON>
    </DIV>

Upvotes: 1

John Humphreys
John Humphreys

Reputation: 39294

You did float right. Float both left and it should work out for you. Also note that if they have padding/margin around them 70% + 30% + padding/margin may not fit on one line :)

Upvotes: 1

Related Questions