Question

On my personal website, I’m creating a contact form. It switches between “Buisness Inquiries” and “Questions”. I’ve set my code up so that the tabs, which have the id contact_tabs share the same div as the form space, contact_form. However, the two divs won’t fit in their container div (id being contact). contact_form is pushed down by what Chrome’s developer console identifies as extra margin, even though i’ve set margin to margin:0;.

Here are my relevant CSS Styles and HTML.

CSS:

/* Contact */
#contact {
    width:80%;
    border:3px outset #EFF;
    height:300px;
    margin:auto;
    margin-top:20px;
    margin-bottom:40px; 
}
#contact_tabs {
    width:30%;
    border-right:2px solid #FFF;
    height:100%;
    margin-right:0; 
}
#contact_tabs ul {
    margin-top:0;
    margin-bottom:0;
    padding-left:0;
    height:100%;    
}
#contact_tabs ul li {
    list-style-type:none;
    background-color:#111;
    height:50%;
}
#contact_tabs ul li a {
    font-size:20px;
    display:block;
    padding:63px 30px;
    color:inherit;
    text-decoration:none;
    transition:padding-left 0.5s;
    -webkit-transition:padding-left 0.5s;
    -moz-transition:padding-left 0.5s;
    -o-transition:padding-left 0.5s;
}
#contact_tabs ul li a:hover {
    padding-left:55px;  
}
#contact_tabs ul li.selected {
    background-color:rgba(255,255,255,0.8); 
}
#contact_tabs ul li.selected a {
    color:#111; 
}
#contact_form {
    width:70%;
    height:100%;
    float:right;
}

HTML:

<div id="contact">
    <div id="contact_tabs">
        <ul>
            <li class="selected" id="inquiry"><a href="#inquiry">Buisness inquiries</a></li>
            <li id="question"><a href="#question">Questions</a></li>
        </ul>
    </div>
    <div id="contact_form">
        <form id="inquryForm">
            <input type="text" placeholder="First Name" id="fname" />
        </form>
        <form id="questionForm">
            <input type="text" placeholder="First Name" id="fname2" />
        </form>
    </div>
</div>

Answer 1

As Interrobang mentioned already, you could add box-sizing to your code. But you will also need to set the float for #contact_tabs.

So, change your CSS code from:

#contact_tabs
{
    width:30%;
    border-right:2px solid #FFF;
    height:100%;
    margin-right:0; 
}

to:

#contact_tabs
{
    width:30%;
    float:left;
    border-right:2px solid #fff;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

DEMO