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
Related
I am trying to divide a caption area into 2 div each 50%, align the text to left on the left div and align the text to right on the other one.
I cannot quite get the result I want, how can I fix this?
.tcaption {
width: 100%;
background-color: #cee7ff;
}
.tcaption-left-part {
color: blue;
width: 50%;
float: left;
text-align: left;
padding: 5px 0 5px 0;
font-weight: bold;
}
.tcaption-right-part {
color: blue;
width: 50%;
float: right;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-wrapper">
<table class="ticket-table">
<caption class="tcaption">
<div class="tcaption-left-part">
Ticket Details
</div>
<div class="tcaption-right-part">
<a class=" btn btn-default " href="{% url 'ticket_edit' ticket.pk %} "><i class="fa fa-edit fa-2x "></i></a>
</div>
</caption>
<tbody>
<tr>
<td>Ticket Number:</td>
<td>{{ticket.pk}}</td>
</tr>
</tbody>
</table>
</div>
If you display these as a table-cells (using the display:table-cell css) it'd make things easier. I didn't swap in a blue colour, but focused on your position problem.
You can probably afford to make the columns different widths if what you want is one column to be far-left aligned and the other to be aligned to the far right (or just have both close to 100% - not quite 100 cos of padding/margins). But I'll leave it for you to mess with. I put in span tags around the Ticket Details for better css control.
.ticket-table, .tcaption {
width: 100%;
background-color: var(--myBlue3);
}
.tcaption .left-part,
.tcaption .right-part {
display: table-cell;
width: 50vh;
color: var(--myBlue6);
vertical-align:top;
}
.left-part, .left-part span {
text-align: left;
padding: 5px 0 5px 0;
font-weight: bold;
float:left;
}
.right-part, .right-part a {
text-align: right;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-wrapper">
<table class="ticket-table">
<caption class="tcaption">
<div class="left-part">
<span>Ticket Details</span>
</div>
<div class="right-part">
<i class="fa fa-edit fa-2x">Ticket.pk</i>
</div>
</caption>
<tbody>
<tr>
<td>Ticket Number:</td>
<td class="right-part">{{ticket.pk}}</td>
</tr>
</tbody>
</table>
</div>
That's because the <caption> is only as big as it's parent <table>. Increase the width of the <table> and you should get what you want.
.tcaption {
width: 100%;
background-color: #cee7ff;
}
table {
width: 100%;
}
.tcaption-left-part {
color: blue;
width: 50%;
float: left;
text-align: left;
font-weight: bold;
}
.tcaption-right-part {
color: blue;
width: 50%;
float: right;
text-align: right;
}
<div class="form-wrapper">
<table class="ticket-table">
<caption class="tcaption">
<div class="tcaption-left-part">
Ticket Details
</div>
<div class="tcaption-right-part">
<a class="btn btn-default"><i class="fa fa-edit fa-2x">Right Aligned Text</i></a>
</div>
</caption>
<tbody>
<tr>
<td>Ticket Number:</td>
<td>{{ticket.pk}}</td>
</tr>
</tbody>
</table>
</div>
I coded a homepage and now I am trying to build a header, which is static like not scrolling with, when content is being scrolled. It should stay at the top while the content goes beneath/under it. I found this solution here, however, it's not working for me as I don' know where to put this code in, because everything I tried didn't work.
Click here for jsfiddle!.
My HTML is:
<!-- #PAGE -->
<div id="page1">
<!-- #HEADER -->
<div id="header1">
<div class="content-wrapper">
<div class="ft-div-left">
<center>
<img src="FW_Logo_Website.png">
</center>
</div>
<div class="ft-div-right">
<center>
</br>
<a href="logout.php" style="text-decoration:none;">
<button class="button-logout" name="Ausloggen">Logout</button>
</a>
</center>
</div>
<div class="ft-div-middle"> </div>
</div>
</div>
<!-- HEADER ENDE -->
<!-- #CONTENT -->
<div id="content">
<div class="wrapper">
<div class="left_box">
<center>
<img alt="" src="images/camera.png" width="100" height="100" />
<h1 class="headline" style="font-family:'Montserrat',sans-serif;">RAW DATA</h1>
<p class="explanation">Alle unretuschierten Fotos.</p>
<table>
<tbody>
<tr>
<td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
<td> 24.5 MB</td>
</tr>
<tr>
<td><img alt="" src="images/image.png" width="20" height="20" /></td>
<td> 758</td>
</tr>
<tr>
<td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
<td> 3459 x 3294</td>
</tr>
</tbody>
</table>
</br>
<button class="button" name="DownloadRaw" onClick="getRawData()">Download</button>
</center>
</div>
<div class="right_box">
<center>
<img alt="" src="images/brush.png" width="100" height="100" />
<h1 class="headline" style="font-family:'Montserrat',sans-serif;">RETUSCHIERT</h1>
<p class="explanation">Alle retuschierten Fotos.</p>
<table>
<tbody>
<tr>
<td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
<td> 24.5 MB</td>
</tr>
<tr>
<td><img alt="" src="images/image.png" width="20" height="20" /></td>
<td> 758</td>
</tr>
<tr>
<td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
<td> 3459 x 3294</td>
</tr>
</tbody>
</table>
</br>
<button class="button" name="DownloadRet" onClick="getRetouchedData()">Download</button>
</center>
</div>
<div class="clearer"></div>
</div>
</div>
<!-- #FOOTER -->
<div id="footer1" style="position: fixed; bottom: 0;">
<div class="content-wrapper">
<div class="ft-div-left"> </div>
<div class="ft-div-right">
<p></p>
</div>
<div class="ft-div-middle">
<center>
<p>
<center>
<span class="icon-facebook4" id="facebook" style="color: white;"></span>
<span class="icon-network" id="website" style="color: white;"></span>
<span class="icon-stumbleupon3" id="issuu" style="color: white;"></span>
<span class ="icon-twitter3"></span>
</br>
<br>
<br>
<span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">© 2014. Frederik Wilhelm. All Rights Reserved.</span>
</center>
</p>
</center>
</div>
</div>
</div>
<!-- FOOTER ENDE -->
</div>
My CSS is:
body {
font-family: 'Open Sans', sans-serif;
background-color: #FFF;
position: center;
margin: 0;
padding: 0;
/*height: 350px; */
}
#page1 {
/*font-family: 'Open Sans', sans-serif;*/
background-color: #FFF;
position: center;
}
#header1 {
padding: 5em;
height: 100px;
background-color: #FFF;
background: url(images/myLogo.png) no-repeat scroll transparent;
background-position: center;
/*border-bottom: 3px solid #000;*/
-webkit-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
-moz-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
}
#content {
padding: 10px;
padding-bottom: 7em; /* Höhe des Footers */
}
#footer1 {
position: absolute;
bottom: 0;
background: #333;
height: 7em; /* Höhe des Footers*/
width: 100%;
-webkit-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
-moz-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
}
/***** 2 INHALTSBOXEN *****/
.wrapper {
width: 630px;
margin: 0 auto;
}
.left_box {
float: left;
padding: 10px;
width: 290px;
height: 350px;
text-align: center;
border: 2px solid white;
margin-top: 10px;
}
.right_box {
float: right;
padding: 10px;
width: 290px;
height: 100%;
text-align: center;
border: 2px solid white;
margin-top: 10px;
}
.clearer {
clear: both;
padding: 1px;
width: 100%;
height: 0.5px;
}
.content-wrapper {
margin: 0 auto;
max-width: 1216px;/*padding: 10px;*/
}
.ft-div-left {
float: left;
}
.ft-div-right {
float: right;
}
.ft-div-middle {
text-align: center;
}
li {
display: block;
float: left;
}
table {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
font-size: 13px;
}
Just set it to a fix positioned element.
#header1{
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
Add
position:fixed;
into the header1 part of your css.
you could also do it in the call as
<div id="header1" style="position:fixed">
So I just want to say sorry for messy code, I have tried vigorously with this. Basically I want there to be 3 images side by side which I will later make clickable, and a gray background behind them. Then I want to be able to include text below the images. Any help?
HTML
Premium Store
<table id="table1" >
<tr id="imgs">
<div id="tablet">
<table border="0";>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/></td>
</div>
</tr>
<td>
Contact a representative!
</td>
<td>
Deliver to your house!
</td>
<td>
Locate a store!
</td>
</table>
CSS
#backgroundH
{
width: 100%;
height: 50px;
background-color: #dddddd;
position: absolute;
}
#header
{
top: -50px;
color: black;
font-family: "Courier New";
text-align: center;
}
body
{
background-color: #cccccc;
}
#table1
{
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top:50%;
left:50%;
}
td
{
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
Also please include what I did wrong! I am having a hard time understanding positioning, in-specific how to add a neat setup. (If somebody could skype with me I have some questions.. :P skype-ikorey1)
Thank you all for the help and reading. I really do appreciate all the feedback.
<html lang="en">
<head>
<style type="text/css">
.img-with-text { float: left; text-align: center}
</style>
</head>
<body>
<div class="container">
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Carl Call </p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Sjon Gentry</p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email John Mabery </p>
</div>
</div>
<!-- End of your code -->
<p style="clear: both">Something more here </p>
There is a special way of making that type of arrangement (image with caption).
And this would be my way of doing what you need:
HTML
<div id="container">
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</div>
CSS
#container{
background:#ccc;
}
#container figure{
float:left
}
How about this..
<table id="table1">
<tr id="imgs">
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" />
<p class="content">
Contact a representative!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" />
<p class="content">
Deliver to your house!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Shop-icon.png" />
<p class="content">
Locate a store!
</p>
</td>
</tr>
</table>
and css
body {
background-color: #cccccc;
}
#table1 {
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top: 50%;
left: 50%;
}
tr {
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
td.content {
position: absolute;
}
and for position details are explained clearly in w3schools
which will helps us alot.
so I'm making a basic webpage to learn HTML & CSS and is part of an assingment I'm doing for school.
Basically my problem is this:
I have a footer div that is appering above another div in my page AND is displaying at the same width as that div. Here is my Code:
<div id="header">
<img src="img/manchester-united-logo.png">
<h1>Manchester United </h1>
</div>
<div id="slider">
<ul class="bxslider">
<li><img src="img/striker.jpg" title="Forwards" /></li>
<li><img src="img/mids.jpg" title="Midfielders" /></li>
<li><img src="img/defenders.jpg" title="Defenders" /></li>
</ul>
</div>
<div id="windows">
<table id="boxTable">
<tr>
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td>
<td class="spacer"></td>
<td class="box"><img src="img/history.jpg" title="History"></td>
<td class="spacer"></td>
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td>
<td class="spacer"></td>
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td>
</tr>
<tr>
<td class="box"><div class="button"><p><p><a href="URL.htm">The Manager</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>History</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Fixtures & Results</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Old Trafford</p></div></td>
</tr>
</div>
<div id="footer">
THE FOOTER WHICH IS ANNOYING!!
</div>
</body>
& CSS
* {
margin: 0;
padding: 0;
}
body{
background-color: #F4F4F4;
width: 100%;
height: 100%;
min-width: 1280px;
}
#header{
height: 12%;
width: 1000px;
margin: 0 auto;
}
.button {
clear:both;
width: 140px;
height: 18px;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #fff;
border-radius: 3px;
border: 1px solid #999;
padding: 5px;
text-align:center;
margin: 0 auto;
font-family: 'Roboto Slab', serif;
}
.button a {
color: #222222;
text-decoration: none;
}
.button:hover {
opacity: 0.6;
}
#header img {
height: 110px;
float: left;
}
#header h1{
padding: 25px 0 0 150px;
font-family: 'Roboto Slab', serif;
font-size: 2.5em;
font-weight: 300;
}
#slider{
height: 45%;
clear:both;
background-image:url('img/pattern.png');
padding-top: 30px;
}
#windows{
width: 1000px;
margin: 0 auto;
padding-top: 20px;
overflow:hidden;
}
.box img{
width:220px;
height:130px;
cursor: pointer;
}
.spacer{
width:50px;
}
#footer{
background-image:url('img/pattern.png');
}
I Figure my problem has something to do with my floating another div..
You haven't closed your table with </table> ;-)
You are also missing a </a> in your links
<div id="header">
<img src="img/manchester-united-logo.png">
<h1>Manchester United </h1>
</div>
<div id="slider">
<ul class="bxslider">
<li><img src="img/striker.jpg" title="Forwards" /></li>
<li><img src="img/mids.jpg" title="Midfielders" /></li>
<li><img src="img/defenders.jpg" title="Defenders" /></li>
</ul>
</div>
<div id="windows">
<table id="boxTable">
<tr>
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td>
<td class="spacer"></td>
<td class="box"><img src="img/history.jpg" title="History"></td>
<td class="spacer"></td>
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td>
<td class="spacer"></td>
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td>
</tr>
<tr>
<td class="box"><div class="button"><p><p>The Manager<!-- missing /a here --></p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>History</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Fixtures & Results</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Old Trafford</p></div></td>
</tr>
</table> <!-- <----------You need to close the table here -->
</div>
<div id="footer">
THE FOOTER WHICH IS ANNOYING!!
</div>
</body>
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.