Table Cell Spacing Issues

Question

Hi Guys I am using a table: cell-spacing layout for my website and I need some help. I have a two column website, one being the sidebar and the other containing the content. However, if I add any margins within one of the table-cell divs it moves the side bar spacing with it. I need the spacing on these two cells to be different, and I am not sure how to do so. My code is as follows:

The CSS:

content {
    width : 100%;
    display : table;
    margin : 0 auto;
    height : 100%;
}

#side_bar, #main {
    display : table-cell;
}

#side_bar {
    border: 1px solid #111;
    width: 13%;
    background: linear-gradient(#444, #111);
}

#main {
    width: 65%;
}

#contact_box {
    margin-left: 30%;
    margin-top: 7%;
    background-color: #111;
    opacity: 0.3;
    width: 500px;
    height: 500px;
}

The HTML:

<div id="content">
    <div id="main">
        <div id="contact_box">
            <form method="post" id="contact_form" action="contact.php">
                <p>Full Name:</p> <input type="text" size="40" id="fullname" name="fullname"><br/>
                <p>Email Address:</p> <input type="text" size="40" id="email" name="email"><br/>
                <p>Type of Inquiry:</p> <input type="text" size="40" id="question" name="question"><br/>
                <p>Message:</p> <textarea rows="20" cols="45"></textarea><br/>
                <input type="submit" style="float:right; text-transform: uppercase;" value="Send">
            </form>
        </div>
    </div>
    <div id="side_bar">
        <div id="divider"><h1>News Blurb</h1></div>
        <div id="news"><?php //print_news(); ?></div>
        <div id="divider"><h1>Featured Games</h1></div>
        <div id="featured"><?php //echo $games ?></div>
    </div>
</div>

Thank you for any and all help.

Answer 1

Try:

#side_bar {
    vertical-align:top;
}