CODEWITHSUNDEEP
htmlcss
markzzz
markzzz

Reputation: 47945

Problem with position:absolute on input

I have this code :

<div class="areaButton">
    <input type="submit" value="Add">                 
</div>

.areaButton
{
    float:left;
    position:relative;
    width:200px;
    margin-left:18px;
    margin-right:18px;
    background-color:red;
}

.areaButton input
{
    position:absolute;
    right:0px;
    top:0px;
}

but as you can see, the Input doesnt "feel" the container (where is the background-color:red;)?

Upvotes: 1

Views: 4216

Answers (4)

Piotr Kula
Piotr Kula

Reputation: 9821

<div class="areaButton">
    <div> THis is the are around the button</div>
    <input type="submit" value="Add">                 
</div>


.areaButton
{
    float:left;
    position:relative;
    width:200px;
    margin-left:18px;
    margin-right:18px;
    background-color:red;
}

.areaButton input
{
    position:absolute;
    right:0px;
    top:0px;
background-color:red;
border:5px solid yellow;
}

Upvotes: 2

jerjer
jerjer

Reputation: 8760

put a height to the .areaButton div the same with the height of the input.

.areaButton
{
   height: <same height as the input>;
   ....
}

or put another element inside the div

<div class="areaButton">
    <input type="submit" value="Add">  
    <span>&nbsp;</span>               
</div>

Upvotes: 2

No Results Found
No Results Found

Reputation: 102745

Setting position:absolute removes the element from the document flow, meaning it basically doesn't occupy any space. Since this is the only element in the div, and there is no height width or padding on it, it doesn't take up any space either, so you cannot see the background.

Upvotes: 3

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

Browsers insert default margin and padding on some elements, that's what CSS resets are for.

As you mark your input element as position: absolute, it gets taken out of the page flow, and the container won't expand to fit the element. You have to add height to the .areaButton element to see the background.

See my update:

http://jsfiddle.net/SZYUe/1/

Upvotes: 4

Related Questions