CODEWITHSUNDEEP
htmlcss
Zeng Cheng
Zeng Cheng

Reputation: 825

CSS - Have div's height all the way down to another div

OK, I have this these two divs and one of them is a checkbox and the other div has text. Sometimes can be little or small. Anyway, if it's big, the box on the left will go down all the way to cover the gap it leaves if I didn't set its height to 100%. However, there is a problem.

http://jsfiddle.net/4odLkzby/

See how the left div goes BEYOND that and overlaps the .reply div below it? How can I fix this?

Here is a better graphic to show:

enter image description here

Upvotes: 0

Views: 196

Answers (3)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Demo - http://jsfiddle.net/4odLkzby/2/

Add position: relative to CSS attributes of parent (.reply).

Upvotes: 1

Digital Brent
Digital Brent

Reputation: 1285

Add position: relative to reply class.

http://jsfiddle.net/4odLkzby/1/

Upvotes: 1

vas
vas

Reputation: 960

check out this css

CSS

.reply {
background: #E8E8E8;
font-family: "Helvetica Neue",Helvetica;
font-size: 15px;
color: #333;
text-shadow: 0px 0px 0px;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#hovering-icon {
background: rgb(53, 107, 138);
color: white;
}
.hovering-answer {
background: rgb(71, 135, 172);
color: white;
overflow:hidden;
}
.reply > .icon-wrap {
background: #C4C4C4;
padding: 5px;
position: absolute;
overflow: hidden;
}
.answer-wrap {
margin-bottom: 10px;
}
.text-wrap {
padding: 7px 5px 7px 40px;
font-family: 'Helvetica', serif;
}
.icon-wrap {
    width: 30px;
    text-align: center;
    height: 100%;
}

jsfiddle

Upvotes: 0

Related Questions