CODEWITHSUNDEEP
htmlcss
aRyhan
aRyhan

Reputation: 355

Child divs overwrite width of parent div

I keep on digging the answer to my problem and keep trying everything but all attempts I have made so far fail. Here it goes:

My parent panel has the id as secondPanel and the width of this is fixed by a JavaScript

document.getElementById("secondPanel").style.width = (screen.width-12) + "px";

I didn't use "width:100%" because it produces a scroll bar at the bottom of my view port. and I want the position of my layout to stay the same even if the browser size changes.

#secondPanel{
    float: left;
    margin-top: 15px;
    padding:0px;
    border-style: solid;
    border-width:2px;
    border-color: black;
    background: red;
}

#tryP{
    float:left;
    width:200px;
    border-style: solid;
    border-width:2px;
    border-color: black;
    background: white;
}

#childDiv{
    float:left;
    border-style: solid;
    border-width:2px;
    border-color: black;
}

but, every time I put a child div inside the parent div and place a width for it, the scroll bar appears again even if the width of it is less than the width of the parent. But when I put a p, the scroll bar doesn't show up. What can I do about this? What is the problem with my child div?

Upvotes: 0

Views: 655

Answers (1)

amit
amit

Reputation: 874

Try this:

Set childDiv width to 100%

#childDiv{
width:100%;
float:left;
border-style: solid;
border-width:2px;
border-color: black;
}

Upvotes: 1

Related Questions