I've been searching for a solution to my issue, but have come up empty-handed. I apologize if this has already been discussed before.
My HTML page contains a section that appears as follows:
<div id=wrap>
<div id=lb>
Content
</div>
<div id=rb>
Content
</div>
</div>
This code divides the body into two sections - a left section (LB) and a right section (RB). Accompanied by some CSS markup:
#bwrap {
width: 100%;
height: 400px;
display:inline-table;
...
}
#lb {
width: 71.5%;
display: table-cell;
...
}
#rb {
width: 28.5%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
}
Initially, everything looked fine when I added content to #RB from right to left. However, upon inserting content into #LB, I noticed that all the content in #RB shifted downwards to align with the bottom of #LB's content. Despite there being no overlap of content or DIVs. This unexpected shift occurred specifically when I embedded a Google Calendar into #LB. Visually, everything appeared normal except for the downward shift in #RB.
Can anyone provide insight on where I may have made a mistake? I attempted adjusting floats and absolute positioning, but none of these solutions seemed to work - in fact, some worsened the situation.