CODEWITHSUNDEEP
htmlcss
SaiBand
SaiBand

Reputation: 5355

How to make a child element inside a DIV take up the full size of the container

I have an input element and I want it to take up the full size of the parent DIV. How do I achieve this? I tried width 100%, yet it doesn't work. The problem I am facing is that the Parent has a blue background and the child has a yellow background. As a result, I can see some blue outline around the edges. How do I get rid of that.

I have a added a class for the child element. Something like this:

.input-editable { background-color: some-color; width: 100%; }

This element is wrapped in a div. That DIV has its background-color set that is visible on the edges. I don't want that to happen.

Thanks in advance!

Upvotes: 1

Views: 2493

Answers (3)

wavetree
wavetree

Reputation: 1557

I think what you're looking for is

display: block;
width: 100%;

That will make your input element span the whole width of the parent.

http://jsfiddle.net/pTQWM/

Note that if you have padding on your input element, you better use this as well:

box-sizing: border-box;

Upvotes: 0

Arrow
Arrow

Reputation: 2904

Try the following code: (http://jsfiddle.net/MUDey/)

<!doctype html>
<html>
<head>
    <style>
        *{padding:0;margin:0;}
        #parent { width: 75%; height: auto; background-color: Blue; }
        .input-editable {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="parent">
        <input type="text" class="input-editable" value="Show us your HTML" />

    </div>
</body>
</html>

And please, post your HTML.

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

Just make your input a block element and it will work - DEMO

.div input {
    display: block;
    width: 100%;
    border: 0;
}

Upvotes: 1

Related Questions