CODEWITHSUNDEEP
css
Justin808
Justin808

Reputation: 21522

Trying to get the contents of a div to scale properly to it's size

I've got a AND logic gate being created with a set of divs. I would like them to scale with the size of the outer most .gate div. I would like it to be 100% the width and height of the .gate div.

I've got things almost working, the AND gate is 2 pixels taller and with width is a bit wonky. The width I think has to do with the padding on the .outer div but I'm not sure of a better way to do it.

jsfiddle

HTML

<div class="gate">
    <div class="outer">
        <div class="inner">
            <div class="andInA"></div>
            <div class="andInB"></div>
            <div class="andOutA"></div>
            <div class="andLeft"></div>
            <div class="andRight"></div>
        </div>
    </div>
</div>

CSS

.gate {
    position: relative;
    width: 150px;
    height: 100px;
    background-color: #ccc;
}
.outer {
    position: relative;
    padding: 0 30% 0 0;
    height: 100%;
}
.inner {
    position: relative;
    margin: 0 20% 0 20%;
    width: 100%;
    height: 100%;
}
.gate .andLeft {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 45%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 0px solid black;
}
.gate .andRight {
    position: absolute;
    right: 0px;
    height: 100%;
    width: 75%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 0px solid black;
    border-right: 1px solid black;
    border-radius: 0% 100% 100% 0%;
}
.andInA {
    position: absolute;
    top: 25%;
    margin-left: -20%;
    width: 20%;
    height: 1px;
    border-top: 1px solid black;
}
.andInB {
    position: absolute;
    top: 75%;
    margin-left: -20%;
    width: 20%;
    height: 1px;
    border-bottom: 1px solid black;
}
.andOutA {
    position: absolute;
    top: 50%;
    right: 0px;
    margin-right: -20%;
    width: 20%;
    height: 1px;
    border-top: 1px solid black;
}

Upvotes: 2

Views: 91

Answers (2)

Adrift
Adrift

Reputation: 59859

Use the box-sizing property:

* {
     box-sizing: border-box;
    -moz-box-sizing: border-box;
}

http://jsfiddle.net/eNT2d/3/

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

Decrease your inner height and increase your inner widh by 2%.

.inner {
    position: relative;
    margin: 0 20% 0 20%;
    width: 102%;
    height: 98%;
}

Upvotes: 0

Related Questions