Scrollable List On Left of Div - html

This is in a ASP.NET web application targeting .NET 3.5 and using an AJAX asp:UpdatePanel. For my page layout, I have several divs separating the vertical space of the page into 5 sections (header, first content, second content, third content, & footer).
The first content section contains information about the overall item the page is generated for (title and some properties). The third section contains additional tables of information about the page's item. And the headers and footers are...well...headers and footers.
The second content section will have 2 sub-sections, a list of images and the currently selected image. It will work like the standard list of thumbnails in a list where you click an item and the currently selected image will be updated to the clicked thumbnail. The currently selected image sub-section is wrapped by the AJAX asp.UpdatePanel and contains a title, properties table, and an image that all get updated when the selection changes.
The list can contain a large enough number of images so that when all are displayed, there would be lots of whitespace generated by pushing the selected image section bigger.
The currently selected image section will have a defined height inside the update panel that can change based on the size of the image the user wants to view (small, medium, large).
What I want is to have the list of images be sized to the height of the selected image section with a scrollbar for the overflow.
I've created a simple HTML page (below) that defines some simple content and divs, how do I get it to look like my desired layout (above)? I've tried different things that I know of using floating and whatnot, but nothing seems to come out the way I want. I would prefer not to have to specify widths or heights (except for the explicit height of the selected image div) and let things auto adjust to their contents if possible.
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
div {
border-color: black;
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
}
div.image {
background-color: red;
color: white;
text-align: center;
}
#page-header {
padding: 10px;
height: 60px;
background-color: green;
color: white;
}
#page-footer {
padding: 10px;
height: 20px;
background-color: green;
color: white;
}
.section {
}
#first-section {
}
#second-section {
}
#second-section-scroll-list {
overflow-y: scroll;
//display: inline-table;
}
ul.scroll-list {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li.scroll-list-item {
border-color: black;
border-style: solid;
border-width: 1px;
text-align: center;
//display: table;
}
#second-section-content {
//display: inline-table;
}
#third-section {
}
</style>
</head>
<body>
<div id="page-header"><h2>My Page!<h2></div>
<div id="first-section" class="section">
<h1>The Item To Display</h1>
<table>
<tr>
<th>Property 1:</th>
<td>Value</td>
</tr>
<tr>
<th>Property 2:</th>
<td>Value</td>
</tr>
</table>
</div>
<div id="second-section" class="section">
<div id="second-section-scroll-list">
<ul class="scroll-list">
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 1</div><br/>
Image 1 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 2</div><br/>
Image 2 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 3</div><br/>
Image 3 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 4</div><br/>
Image 4 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 5</div><br/>
Image 5 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 6</div><br/>
Image 6 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 7</div><br/>
Image 7 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 8</div><br/>
Image 8 Description
</li>
<ul>
</div>
<div id="second-section-content">
<!-- This will be wrapped in an AJAX update panel -->
<div style="height: 800px; background-color: lightgray;">
<h2>Selected List Item</h2>
<table>
<tr>
<th>Property 1:</th>
<td>Value</td>
</tr>
<tr>
<th>Property 2:</th>
<td>Value</td>
</tr>
</table>
<div class="image" style="height:480;width:640;">Image of Selected Item</div>
</div>
</div>
</div>
<div id="third-section" class="section">
<table>
<tr>
<th>First</td>
<th>Second</td>
<th>Third</td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>1A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>2B</td>
</tr>
</table>
</div>
<div id="page-footer">End of My Page...</div>
</body>
</html>


Like this: http://blueclick.ca/projects/stackoverflow/divpanels.html?
CSS:
html, body {
margin: 0px;
padding: 0px;
}
div {
border-color: black;
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
}
div.image {
background-color: red;
color: white;
text-align: center;
}
#page-header {
padding: 10px;
height: 60px;
background-color: green;
color: white;
}
#page-footer {
padding: 10px;
height: 20px;
background-color: green;
color: white;
}
.section {
}
#first-section {
}
#second-section {
margin-left:auto; margin-right:auto; display:block;
}
#second-section-scroll-list {
overflow-y: scroll;
height:750px;
float:left;
}
ul.scroll-list {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li.scroll-list-item {
border-color: black;
border-style: solid;
border-width: 1px;
text-align: center;
}
#second-section-content {
margin-left:250px;
height:750px
}
#third-section {
}
HTML:
<div id="page-header"><h2>My Page!</h2></div>
<div id="first-section" class="section">
<h1>The Item To Display</h1>
<table>
<tr>
<td>Property 1:</td>
<td>Value</td>
</tr>
<tr>
<td>Property 2:</td>
<td>Value</td>
</tr>
</table>
</div>
<div id="second-section" class="section">
<div id="second-section-scroll-list">
<ul class="scroll-list">
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 1</div><br/>
Image 1 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 2</div><br/>
Image 2 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 3</div><br/>
Image 3 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 4</div><br/>
Image 4 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 5</div><br/>
Image 5 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 6</div><br/>
Image 6 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 7</div><br/>
Image 7 Description
</li>
<li class="scroll-list-item">
<div class="image" style="height: 120px; width: 160px;">Image 8</div><br/>
Image 8 Description
</li>
</ul>
</div>
<div id="second-section-content">
<!-- This will be wrapped in an AJAX update panel -->
<div style=" height: 725px; background-color: lightgray;">
<h2>Selected List Item</h2>
<table>
<tr>
<th>Property 1:</th>
<th>Value</th>
</tr>
<tr>
<td>Property 2:</td>
<td>Value</td>
</tr>
</table>
<div class="image" style="height:480;width:640;">Image of Selected Item</div>
</div>
</div>
</div>
<br>
<div id="third-section" class="section">
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>1A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>2B</td>
</tr>
</table>
</div>
<div id="page-footer">End of My Page...</div>
Hope this helps.

Related

Stuck in css image gallery coding

I have been trying to figure out what causes this issue but couldn't. This image gallery is responsive but when I hover my mouse pointer on the thumbnails the image is shown on the left side main gallery but the thumbnail set disappears. Tried everything I know. I think my mind got fed up and gave up :-(. Any help in fixing it will be much appreciated. Thanks much in advance.
<style>
#gallery_container {
position: relative;
margin-bottom: 16px;
}
#gallery_mobile_container {
position: relative;
}
.gallery_main {
position: absolute;
visibility: hidden;
opacity: 0;
top: 0px;
left: 0px;
transition: visibility 0s, opacity 0.5s;
text-align: left; /*changing image appears on the left*/
background-color: #ffffff;
}
.gallery_large_img_table .gallery_main {
visibility: visible;
opacity: 1;
position: relative;
}
.gallery_thumbnail:hover > .gallery_main {
visibility: visible;
opacity: 1;
}
.gallery_thumbnail {
padding:2px;
cursor: pointer;
text-align: center;
}
.gallery_thumbnail_img {
transition: opacity 0.5s;
max-width: 100%;
max-height: 230px;
}
.gallery_thumbnail_img:hover {
opacity: 0.5;
}
</style>
<style>
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
</style>
<div style="display: table-cell; width: 90%; height: auto; text-align: center; vertical-align: top; padding: 7px; border: 1px solid #202020; border-radius: 12px;">
<div id="desc" name="desc">
<div id="gallery_container">
<table class="hide_product_photo">
<tbody>
<tr>
<td style="width: 80%; vertical-align: top;"> <!--width: 80% of the total Gallery is taken by main image-->
<!---css code here--->
<table class="gallery_large_img_table">
<tbody>
<tr>
<td>
<div class="gallery_main">
<img src="https://i.imgur.com/6h1GdR5.jpg"> <!--non-grid standalone image-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%; vertical-align: top;"> <!--width: 20% of the total Gallery is taken by thumbnails-->
<table>
<tbody>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ZDUmji7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ZDUmji7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ByPVSkn.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ByPVSkn.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/dXQjDR7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/dXQjDR7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/5SR520h.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/5SR520h.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/3uJiUDq.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/3uJiUDq.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/2dWjFD0.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/2dWjFD0.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/LUCcLCL.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/LUCcLCL.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/q0Y4Cdb.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/q0Y4Cdb.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

If I got the question right: Actually the thumbnail will not disappear, it will hide under the hovered image because you set hovered image width and height to 100% and it will cover all of the space is available to showing itself!
on this section: (inside the second <style> tag)
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
there are no rooms for other thumbnail images!
so if you change these two attribute to something fewer than 100% you can see them as well but be sure to change the main image width and height too.
you can replace the above section with these styles to solve your issue:
#gallery_container .gallery_large_img_table {
width: 80%;
}
#gallery_container .gallery_main {
width: 80%;
height: 80%;
}
#gallery_container .gallery_main img {
max-width: 80%;
max-height: 80%;
}

How to vertical align text in the middle without changing size of a div

I need to make the text "Hello world" in the left box as (vertical) middle.
If I change CSS
.red-banner .text {
background: rgb(32,56,100);
color: white;
padding-top:8px;
}
then "Hello world" will be shifted a little bit down, but the black background will be shifted also and overlap the below banner.
So how can I align the text inside the box vertical middle without changing the size of the black background? (the content of the text is maximal 2 lines).
#parent {
overflow: hidden;
margin:0px;
}
.right {
border-left: 2px solid;
border-color: rgb(215,217,216);
padding-left: 20px;
float: right;
width: 270px;
}
.left {
margin: 0px;
overflow: hidden;
height: 100%;
}
body {
margin:0px;
font-family: Calibri;
}
header20 {
font-size: 16pt;
}
#inner {
margin-left: 10px;
width:730px;
margin: 0 auto;
}
.banner {
position: relative;
}
.banner .text {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100%;
display: none;
}
.banner:hover .text {
display: block;
}
.red-banner .text {
background: rgb(32,56,100);
color: white;
}
.green-banner .text {
background: green;
}
<div id="parent" class="row">
<div class="right">
<br>
<div class="banner red-banner">
<img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
<div class="text">
Hello world.
</div>
</div>
<br>
<div class="banner green-banner">
<img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
<div class="text">
Hello world, this is a test message for the effect.
</div>
</div>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
</div>
<div class="left">
<div id="inner">
<br>
<img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'>
<p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p>
<p style='margin-left:1cm'> The first line of the content</p>
<p style='margin-left:1cm'> The second line of the content</p>
<p style='margin-left:1cm'> The third line of the content</p>
<br>
</div>
<table align='center'>
<tr>
<td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td>
</tr>
</table>
</div>
</div>

Option 1: Alignment Using Flexbox
Apply display: flex; property to .text to make it a flexbox container, and
Use justify-content to horizontally align the content.
Use align-items to vertically align the content.
Have a look at the snippet below:
#parent {
overflow: hidden;
margin:0px;
}
.right {
border-left: 2px solid;
border-color: rgb(215,217,216);
padding-left: 20px;
float: right;
width: 270px;
}
.left {
margin: 0px;
overflow: hidden;
height: 100%;
}
body {
margin:0px;
font-family: Calibri;
}
header20 {
font-size: 16pt;
}
#inner {
margin-left: 10px;
width:730px;
margin: 0 auto;
}
.row {
display: flex;
}
.banner {
position: relative;
}
.banner .text {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100%;
display: none;
}
.banner:hover .text {
display: flex;
justify-content: center;
align-items: center;
}
.red-banner .text {
background: rgb(32,56,100);
color: white;
}
.green-banner .text {
background: green;
}
<div id="parent" class="row">
<div class="right">
<br>
<div class="banner red-banner">
<img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
<div class="text">
Hello world.
</div>
</div>
<br>
<div class="banner green-banner">
<img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
<div class="text">
Hello world, this is a test message for the effect.
</div>
</div>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
</div>
<div class="left">
<div id="inner">
<br>
<img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'>
<p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p>
<p style='margin-left:1cm'> The first line of the content</p>
<p style='margin-left:1cm'> The second line of the content</p>
<p style='margin-left:1cm'> The third line of the content</p>
<br>
</div>
<table align='center'>
<tr>
<td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td>
</tr>
</table>
</div>
</div>
Option 2: Alignment Using Table & Table Cell
You can use display: table. But for this you will have to change your HTML structure a little bit, something like:
<div class="text table"> <!-- display: table -->
<div class="table-cell"> <!-- display: table-cell -->
Hello World
</div>
</div>
then use vertical-align: middle & text-align: center on .table-cell element. Have a look at the snippet below:
#parent {
overflow: hidden;
margin:0px;
}
.right {
border-left: 2px solid;
border-color: rgb(215,217,216);
padding-left: 20px;
float: right;
width: 270px;
}
.left {
margin: 0px;
overflow: hidden;
height: 100%;
}
body {
margin:0px;
font-family: Calibri;
}
header20 {
font-size: 16pt;
}
#inner {
margin-left: 10px;
width:730px;
margin: 0 auto;
}
.row {
display: flex;
}
.banner {
position: relative;
}
.banner .text {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100%;
display: none;
}
.banner:hover .text.table {
display: table;
height: 50px;
}
.banner:hover .text.table .table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.red-banner .text {
background: rgb(32,56,100);
color: white;
}
.green-banner .text {
background: green;
}
<div id="parent" class="row">
<div class="right">
<br>
<div class="banner red-banner">
<img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
<div class="text table">
<div class="table-cell">
Hello world.
</div>
</div>
</div>
<br>
<div class="banner green-banner">
<img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
<div class="text table">
<div class="table-cell">
Hello world, this is a test message for the effect.
</div>
</div>
</div>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
</div>
<div class="left">
<div id="inner">
<br>
<img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'>
<p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p>
<p style='margin-left:1cm'> The first line of the content</p>
<p style='margin-left:1cm'> The second line of the content</p>
<p style='margin-left:1cm'> The third line of the content</p>
<br>
</div>
<table align='center'>
<tr>
<td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td>
</tr>
</table>
</div>
</div>
Hope this helps!

Try below css
text-align: center;
in the text class to align the text

Wrap the text need to be centered inside divs like this. Hope it will help you.
<div class="text">
<div class="custom-trow">
<div class="custom-tcell">
Hello world.
</div>
</div>
</div>
and apply the following CSS rules.
.custom-trow {
display: table;
height: 100%;
width: 100%;
vertical-align: middle;
}
.custom-tcell {
display: table-cell;
vertical-align: middle;
text-align: center;
}

To align item vertically Flex box is the best idea , Old tricks and hacks can do the Job but your layout will need be solid design and flexible ,
So a use of flex box is necessary :
first of all we change the display for the parent item :
diplay:flex
then we use :
justify-content:center to center item horizontally ,
and for vertical alignment we use :
align-item :center
And since you said you cannot use Flex ;
there is another way by using line-height
.banner:hover .text
display: block;
text-align: center;
line-height: 50px;
#parent {
overflow: hidden;
margin:0px;
}
.right {
border-left: 2px solid;
border-color: rgb(215,217,216);
padding-left: 20px;
float: right;
width: 270px;
}
.left {
margin: 0px;
overflow: hidden;
height: 100%;
}
body {
margin:0px;
font-family: Calibri;
}
header20 {
font-size: 16pt;
}
#inner {
margin-left: 10px;
width:730px;
margin: 0 auto;
}
.row {
display: flex;
}
.banner {
position: relative;
}
.banner .text {
position: flex;
top: 0;
left: 0;
width: 250px;
height: 100%;
display: none;
}
.banner:hover .text {
display: flex;
}
.red-banner .text {
background: rgb(32,56,100);
color: white;
display:flex;
justify-content:center;
align-items:center;
}
.green-banner .text {
background: green;
}
<div id="parent" class="row">
<div class="right">
<br>
<div class="banner red-banner">
<img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
<div class="text">
Hello world.
</div>
</div>
<br>
<div class="banner green-banner">
<img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
<div class="text">
Hello world, this is a test message for the effect.
</div>
</div>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
<table style='width:250px;background-color:rgb(211,238,208)'>
<tr>
<td>
<header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20>
<ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</td>
</tr>
</table>
<br>
</div>
<div class="left">
<div id="inner">
<br>
<img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'>
<p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p>
<p style='margin-left:1cm'> The first line of the content</p>
<p style='margin-left:1cm'> The second line of the content</p>
<p style='margin-left:1cm'> The third line of the content</p>
<br>
</div>
<table align='center'>
<tr>
<td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td>
<td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td>
</tr>
</table>
</div>
</div>

You can try this. http://howtocenterincss.com/
Hope it will help you.

Why is there so much whitespace between the two divs?

Picture of the white space between "header" and "content"
I just got back into web work and cannot figure this out! Theres a big gap between the header div and the content div that isn't present with the sidebar div and the code isn't too different for each one so thats why it confuses me. I don't know where the whitespace is coming from.
I took some stuff out of my code that wasn't relevant but let me know if theres something that isn't there.
<!-- Page Wrap -->
<div class="pagewrap">
<!-- Header -->
<div class="header">
<img src="images/Logo.jpg" width="530" height="180" alt=""/>
</div>
<!-- Header end -->
<!-- Sidebar -->
<div class="sidebartitle">
<center style="color: #FFFFFF">Specials</center>
</div>
<div class="sidebar">
<center>
<div class="page-popper">
</div>
<table width="187" height="196" border="0" align="center">
<tbody>
<tr>
<td><div class="buttonImageWrapper">
<img src="images/M-2.jpg" alt=""/>
</div></td>
<td>
Request an Appointment</td>
</tr>
<tr>
<td><div class="buttonImageWrapper">
<img src="images/M-2.jpg" alt=""/>
</div></td>
<td>Salon Menu</td>
</tr>
<tr>
<td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td>
<td>Spa Menu</td>
</tr>
<tr>
<td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td>
<td>Bridal Services</td>
</tr>
<tr>
<td><div class="facebookImageWrapper"><img src="images/facebook-logo.png" width="48" height="48"></div></td>
<td>Like us on Facebook</td>
</tr>
</tbody>
</table>
</center>
</div>
<!-- Sidebar end -->
<!-- Content -->
<div class="contenttitle">
<center style="color: #FFFFFF">Welcome</center>
</div>
<div class="content">
<!-- Picture Slider -->
<table width="350" border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="left" valign="top"><div id="p7IRM_1" class="p7IRM01">
<div id="p7IRMow_1" class="p7IRMowrapper">
<div id="p7IRMw_1" class="p7IRMwrapper">
<div id="p7IRMdv_1" class="p7IRMdv"><a class="p7IRMlink" id="p7IRMlk_1" title=""><img class="p7IRMimage" src="../images/new/slide-show1/000.jpg" alt="000" name="p7IRMim_1" width="350" height="233" id="p7IRMim_1" /></a></div>
<div id="p7IRMdsw_1" class="p7IRMdesc_wrapper">
<div class="p7IRMdesc_close"><a id="p7IRMdsclose_1" href="javascript:;" title="Hide Description"><em>Hide</em></a></div>
<div id="p7IRMds_1" class="p7IRMdesc"> </div>
</div>
<div id="p7IRMdsopw_1" class="p7IRMdesc_open_wrapper">
<div id="p7IRMdsop_1" class="p7IRMdesc_open"><a id="p7IRMdsopen_1" href="javascript:;" title="Show Description"><em>Show</em></a></div>
</div>
</div>
</div>
<ul id="p7IRMlist_1" class="p7IRMlist">
<li>000</li>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
</ul>
<!--[if IE 5.000]>
<style>.p7IRMdesc_wrapper {position:static !important;visibility:visible !important;}.p7IRMdesc_open_wrapper, .p7IRMdesc_close {display: none;}.p7IRMpaginator {position: static !important;height: 3em;}.p7IRMpaginator li, .p7IRMpaginator a {float: left !important;}.p7IRMpaginator a {float: left !important;overflow: visible !important;}</style>
<![endif]-->
<!--[if lte IE 6]>
<style>.p7IRMpaginator a {width: auto !important;}</style>
<![endif]-->
<!--[if lte IE 7]>
<style>.p7IRMpaginator li {display: inline !important;margin-right: 3px !important;}.p7IRMpaginator {zoom: 1;}</style>
<![endif]-->
<script type="text/javascript">P7_opIRM('p7IRM_1',1,1,1,3000,4000,1,0,1,0,1500,0,0);</script>
</div></td>
</tr>
</table>
<!-- Picture Slider end -->
<p><strong></strong><br />
<br />
<br />
</p>
<p>Salon Services | Spa Services | Spa Packages | Bridal Services | About Us | Contact Us</p>
</div>
<!-- Content end -->
and the css
.pagewrap {
width: 1000px;
margin: 0 auto;
}
.header {
background-color: black;
margin-bottom: 5px;
}
.header img {
width: 55%;
}
.sidebar {
width: 200px;
height: auto;
font-size: 16px;
float: left;
margin-bottom: 5px;
padding: 10px;
border: #000000 solid 2px;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.sidebartitle {
border: #000000 solid 2px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 10px;
height: auto;
width: 200px;
background-color: #68316B;
}
.content {
width: 600px;
height: auto;
font-size: 16px;
float: right;
margin-bottom: 5px;
padding: 10px;
border: #000000 solid 2px;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.contenttitle {
border: #000000 solid 2px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
float: right;
padding: 10px;
font-size: 16px;
width: 600px;
height: auto;
background-color: #68316B;
}

It's caused by the fact that .sidebartitle isn't floating, so .contenttitle won't float right of it, but stays below it. If you float .sidebartitle, however, .sidebar will be right of .sidebartitle, so just put a wrapper DIV around sidebartitle AND sidebar and make that float:left;.
See the result here: http://codepen.io/anon/pen/jqdNzy

Make column height same

I need your help on this. I would like to make the filter section the same as the result section. However, I am having a hard time on how to make it the same as in the results. I've also been reading the article on Equal Height Columns with Cross-Browser CSS
Below are the codes which I've done. Note that the height is dependent on the results pane or on the filters pane.
#SearchAll tr td {
vertical-align: top;
}
#SearchAllPane {
background: grey;
}
#container1 {
float: left;
border: 1px solid;
}
#container2 {
float: left;
}
#col1 {
float: left;
width: 160px;
background: white;
padding-left: 10px;
height: calc(100% - 54px);
}
#col2 {
float: left;
width: 20px;
/*background: grey;*/
}
#col2 img {
width: 18px;
height: 18px;
}
.FilterItem {
height: 30px;
line-height: 30px;
}
#ResultTable {
width: 300px;
border: 1px solid;
}
.ResultRow {
height: 30px;
line-height: 30px;
background-color: green;
font-size: 15px;
}
<table id="SearchAll">
<tr>
<td id="SearchAllPane">
<div id="container2">
<div id="container1">
<div id="col1">
<div class="FilterItem">
Filter 1
</div>
<div class="FilterItem">
Filter 1
</div>
<div class="FilterItem">
Filter 1
</div>
</div>
<div id="col2">
<img src="http://uxrepo.com/static/icon-sets/font-awesome/svg/angle-left.svg" />
</div>
</div>
</div>
</td>
<td>
<table id="ResultTable">
<tr>
<td class="ResultRow">Results</td>
</tr>
<tr>
<td class="ResultRow">Results</td>
</tr>
<tr>
<td class="ResultRow">Results</td>
</tr>
<tr>
<td class="ResultRow">Results</td>
</tr>
<tr>
<td class="ResultRow">Results</td>
</tr>
<tr>
<td class="ResultRow">Results</td>
</tr>
</table>
</td>
</tr>
</table>
Here's the link of what I've done: http://jsfiddle.net/arw5n4qb/

Your markup is pretty complicated, which is going to make styling it harder; here's a simple version. (Run the snippet below, or see this jsfiddle.) The important part is: one div contains the left side content, one contains the right side, and both of those are set to display: table-cell. Their parent container is set to display: table;. Sibling elements set to display: table-cell will automatically sit next to each other without wrapping. They'll also match their heights, so both will be as tall as the tallest content.
If you want the filters and rows to be vertically centered with each other, you can add vertical-align: middle to those sibling divs or to their parent. Otherwise, as you can see, they default to aligning their content along the top.
.container {
display: table; /* important */
border: 1px solid gray;
}
.filters,
.results {
display: table-cell; /* also important */
width: 200px;
}
.filters {
background: white;
}
/* the rest is cosmetic -
* change these styles if needed */
.filter, .result {
line-height: 2;
padding: 0 10px;
}
.result {
background: green;
color: white;
border: 1px solid white;
}
<div class="container">
<div class="filters">
<div class="filter">Filter 1</div>
<div class="filter">Filter 2</div>
<div class="filter">Filter 3</div>
</div>
<div class="results">
<div class="result">Result row</div>
<div class="result">Result row</div>
<div class="result">Result row</div>
<div class="result">Result row</div>
<div class="result">Result row</div>
<div class="result">Result row</div>
<div class="result">Result row</div>
</div>
</div>

Full page with header and menu

I am trying to do a css for this particular layout (with Twitter Bootstrap), I was to able to generate a header but not the full page version. What I want to achieve is like this
http://jsfiddle.net/9gwZf/ where after few top pixels of content will menu and header (in full width) will lie. How will I be able to achieve this kind of layout? Please help me out.
HTML
<div class="container">
<div class="main-header-wrapper">
<ul class="menu-list">
<li>HOME </li>
<li>ABOUT US</li>
<li>Help</li>
<li>Menu 4</li>
<li>Juf</li>
<li>Kish</li>
</ul>
<div class="header-center-wrap">
<img src="img/contact.PNG" />
</div>
</div>
<div class="row-fluid">
<!-- Bigger content -->
<div class="span8">
<!--Body content-->
</div>
<!-- Sidebar (Right) -->
<div class="span4">
<!--Sidebar content-->
<h5>For inquiries contact us, contact us at</h5>
<table style="width: 300px;">
<tr>
<td>OFFICE ADDRESS</td>
<td>100F Building Name</td>
</tr>
<tr>
<td>INFORMATION</td>
<td>+63 2 999 99999</td>
</tr>
<tr>
<td>FAX</td>
<td>+63 2 999999</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>WEBSITE</td>
<td>www.website.com</td>
</tr>
</table>
</div>
</div>
</div>
CSS
#font-face{
font-family:PT Sans Narrow;
src:url('PT Sans Narrow.ttf');
}
body {
background: url('../img/bg.png');
font-size: 11px;
font-family:'PT Sans Narrow';
}
.container {
width: 1024px;
}
.main-header-wrapper {
position: relative;
width: 100%;
display: block;
margin-left: 0;
margin-right: 0;
margin-top: 40px;
overflow: hidden;
padding: 0;
float: left;
}
.header-center-wrap {
width: 1284px;
height: 223px;
margin: 0;
background: #fff;
color: #fff;
font-weight: bold;
}
.row-fluid {
margin-top: 20px;
-moz-border-radius: 8px;
border-radius: 8px;
border:1px solid #eee;
background: #fff;
box-shadow: 3px 3px 1px #888888;
}
ul.menu-list {
position:relative;
height:30px;
background:#000;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
background: url('../img/menu_strip.jpg') repeat-x;
}
ul.menu-list li {
margin:0;
height:30px;
font-size:10px;
text-align:center;
color:#fff;
width:auto;
float:left;
cursor:pointer;
font-weight:700;
}
ul.menu-list li a,ul.menu-list li a:link,ul.menu-list li a:visited,ul.menu-list li.active {
text-align:center;
color:#fff;
font-weight:700;
font-size:10px;
text-decoration:none;
padding: 7px 4px 10px;
display:block;
height:29px;
text-transform: uppercase;
}
ul.menu-list li:hover {
background:#151515;
}
h5 {
color: navy;
}

Pull the nav bar out of the container, which has a set width and position it separately.

You just need to re-arrange your HTML a little
<div class="container">
<div class="main-header-wrapper">
<ul class="menu-list">
<li>HOME </li>
<li>ABOUT US</li>
<li>Help</li>
<li>Menu 4</li>
<li>Juf</li>
<li>Kish</li>
</ul>
</div> <!-- ends container width -->
<div class="header-center-wrap"> <! -- auto 100% wide -->
<img src="img/contact.PNG" />
</div>
<div class="container"> <!-re-establish container width -->
<div class="row-fluid">
<!-- Bigger content -->
<div class="span8">
<!--Body content-->
</div>
<!-- Sidebar (Right) -->
<div class="span4">
<!--Sidebar content-->
<h5>For inquiries contact us, contact us at</h5>
<table style="width: 300px;">
<tr>
<td>OFFICE ADDRESS</td>
<td>100F Building Name</td>
</tr>
<tr>
<td>INFORMATION</td>
<td>+63 2 999 99999</td>
</tr>
<tr>
<td>FAX</td>
<td>+63 2 999999</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>WEBSITE</td>
<td>www.website.com</td>
</tr>
</table>
</div>
</div>
</div>