Arno
Arno

Reputation: 375

When setting padding for a div with display:table-cell, it changes padding of a neighbour div with the same display

I've created a container <div id="container"> for my content, which in return has a simple <div id="leftbar"> and <div id="content"> for the main text of the page.

I've made the <div id="container"> as a display:table in styles, and both <div id="leftbar"> and <div id="content"> as display:table-cell.

The problem I'm having now is, whenever I try to change padding on the <div id="content">, it affects padding in <div id="leftbar"> for some reason. And it applies only for the top padding. How can I resolve this, and better yet, why is this happening? Is it because of the table structure?

Providing with code, and jsfiddle. In jsfiddle change the last padding line in CSS to see how it shifts everything in the left bar.

HTML:

<body>

<div id="wrapper">
    <div id="header"><img src="http://i.imgur.com/krQBHIx.jpg" width="690" height="100"/></div>
    <div id="container">
        <div id="leftbar">
            <ul>
                <p class="heading">Navigation</p>
                <li><a href="#">Main</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Lessons</a></li>
                <li><a href="#">About</a></li>
            </ul>

            <p class="heading" style="background: #bb0;">Subscribe</p>
            <form action="subscribe.php" method="POST" name="form1">
                Subscribe to our RSS feed and get all the fresh news and articles directly in your mail box!<br /><br />
                <label><p>Enter your name:</p><input type="text"/></label>
                <label><p>Enter your e-mail:</p><input type="text"/></label>
                <input type="submit" name="submit" value="Send!"/>
            </form>                          
        </div>
        <div id="content">
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. 
        </div>
    </div> 
    <div id="footer"><img src="http://i.imgur.com/2GzQuoo.jpg" width="690" height="18"/></div>
</div>

</body>

CSS:

/* Styles */

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    font: 14px Verdana, Tahoma, sans-serif;
}

*:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

a
{
    color: #000;
    text-decoration: none;
}

body
{
    background: #606B79;
}

p
{
    font: 14px Tahoma, Verdana, sans-serif;
}

#wrapper
{
    width: 690px;
    margin: 10px auto;
}

#header img
{
    display: block;
    height: 100%;
}

#footer img
{
    border: 1px solid black;
    border-top: none;
    display: block;
}

#container
{
    display: table;
    width: 100%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background: #fff;
}

#leftbar
{
    display: table-cell;
    width: 184px;
    border-right: 2px solid black;
    height: 100px;
    padding: 5px;
}

#leftbar ul
{
    list-style: none;
    margin-bottom: 15px;    
}

.heading
{
    text-align: center;
    background-color: #a22;
    color: #fff;
    padding: 3px;
    margin-bottom: 7px;    
}

#leftbar ul li
{
    border: 1px solid gray;
    border-bottom: none;  
}

#leftbar ul li:last-child
{
    border: 1px solid gray;    
}

#leftbar a
{
    display: block;
    padding: 2px 4px;
}

#leftbar a:hover
{
    background: #ccc;
}

#leftbar form
{
    border: 1px solid gray;
    padding: 10px;
    text-align: justify;
}

#leftbar form input
{
    width: 149px;
    margin: 3px 0;
}

#leftbar form input[type="submit"]
{
    height: 25px;
    background: #ccc;
    margin-top: 20px; 
}

#content
{
    display: table-cell;
    width: 506px;
    text-align: justify;
    padding: 25px;
}

jsfiddle: http://jsfiddle.net/9Qtpj/

Help me, please?

Upvotes: 0

Views: 1156

Answers (2)

Jonny
Jonny

Reputation: 644

The content in your #leftbar div is aligned to the baseline. To fix your current html/css change the following:

#leftbar
{
    vertical-align: top;
    display: table-cell;
    width: 184px;
    border-right: 2px solid black;
    height: 100px;
    padding: 5px;
}

BUT! You really should be using another method for this. Displaying non-table elements as tables can have its issues, and isn't needed anymore.

Start learning about flexbox [the latest and greatest in web layout] - http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and use floats as a fallback [see @AlexPrinceton's answer].

Upvotes: 3

AlexPrinceton
AlexPrinceton

Reputation: 1203

Try to change your CSS styles. Don use display:table for aligning elements if you can use "float" Here is your code

CSS

#container {
    width:100%;
    overflow:hidden
}
#content {
    float:right;
    width:506px;
    padding:25px;
}
#leftbar {
    width:184px;
    float:left;
    padding:5px;
}

Upvotes: 0

Related Questions