I have encountered an issue with three divs next to each other. When the first one contains content, it causes the middle and right divs to be pushed down. The inner div is smaller than its parent, so I cannot understand why it's affecting the alignment.
Below are the CSS styles for the layout:
.main-content {
width: 1100px;
min-height: 500px;
margin: auto;
margin-top: 100px;
}
.left-menu {
width: 250px;
height: 100%;
margin-left: 20px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
}
.main {
width: 500px;
min-height: 500px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
margin-left: 20px;
}
.right-pane{
width: 250px;
margin-left: 15px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.95);
display: inline-block;
}
The issue arises when a div like the following is added inside left-menu:
<div class="leftmenu-item">
<p class="redtext">This is a quite a long sentence hehehe</p>
<p class="datetext">Date: 25-07-2013</p>
<p class="timetext">Time: 13:00</p>
</div>
With the css style:
.leftmenu-item {
height: 100px;
width: 200px;
}
It seems that the structure of the divs within main-content is causing the issue as described above. Attempts using float property did not resolve the problem. Any suggestions for a solution would be greatly appreciated.