Reputation: 375
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
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
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