HTML, CSS aligning text inside DIV with text in parallel div - html

Question

I was wondering if someone could help me with some HTML/CSS. I'm trying to line up text in a sidebar div to match the content in the content div but the only way I can see possible is adding loads of <p> </p> to html. I am wondering if there is an easier way.
Fiddle
HTML:
<div class="header">
<h3><a name="comb"></a>The combined INSPECT</h3>
</div>
<div class="left">
<p>Syntax</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>To top of page
</p>
</div>
<div class="content">
<p>
<img src="CombInspect.gif" width="649" height="338" alt="combined" />
</p>
<p>This format of the INSPECT combines the syntactic elements of the previous two formats allowing both counting and replacing to be done in one statement.</p>
</div>
CSS:
div.header {
padding: 0.5em;
color: #FFFF00;
background-color: #993300;
clear: left;
line-height: 0px;
}
div.content {
margin-left: 300px;
border-left: 1px solid gray;
padding: 1em;
background-color: #FFFFFF;
}
div.left {
float: left;
width: 270px;
padding: 1em;
background-color: #FFFFCC;
color: #5F021F;
font-size: 17px;
font-weight: bold;
}

Answer 1

Are you totally opposed to using jQuery (and I'm not trying to be rude, just asking if you prefer not to use it)? Otherwise, I'd suggest you get the height of your content div with .height() and set the length of your sidebar that way.
var adjustedHeight = $(".content").height()
$(".left").css("height", adjustedHeight)
Check out the fiddle here
Hope that helps :)
edit: fixed the fiddle link.

Answer 2

If you want To top of page to appear at the bottom, you can put your divs in a container div, with this style:
div.container {
position: relative;
}
Add a bottom class to To top of page, with these styles:
.bottom {
position: absolute;
bottom: 0px;
}
Fiddle

Answer 3

When you float an element it is taken out of the normal document flow. In order to achieve what you are after you can make the left sidebar position:absolute with height:100% as in this fiddle:
http://jsfiddle.net/Lze4pj61/3/
CSS:
div.header
{
padding: 0.5em;
color: #FFFF00;
background-color: #993300;
clear: left;
line-height: 0px;
}
div.content
{
margin-left: 300px;
border-left: 1px solid gray;
padding: 1em;
background-color: #FFFFFF;
}
div.left
{
position: absolute;
width: 270px;
padding: 1em;
background-color: #FFFFCC;
color: #5F021F;
font-size:17px;
font-weight:bold;
height:100%;
}
div.left .to_top {
position:absolute;
bottom:10px;
text-align:center;
}
HTML:
<div class="header">
<h3 ><a name="comb"></a>The combined INSPECT</h3>
</div>
<div class="left">
<p>Syntax</p>
<div class="to_top">
To top of page
</div>
</div>
<div class="content">
<p><img src="CombInspect.gif" width="300" height="150" alt="combined" /></p>
<p>This format of the INSPECT combines the syntactic elements of the previous two formats allowing both counting and replacing to be done in one statement.</p>
</div>

Answer 4

If your content div has a varying dynamic height you could use jquery in a function like this
$(document).ready(function(){
var header = $(".header");
var left = $(".left");
var content = $(".content");
if(left.height() < content.height()){
left.height(content.height())
}
$( ".thisOffSet" ).offset({ top: content.height()+header.height() });
});
You can see on this JSFIDDLE how it works by changing the window size and clicking run for it to readjust.
Hope this helps