CSS Layout change

Hi, I have an existing database-driven web page which works well, except for one item. That item is that the box scrolls instead of lengthens in height, because initially the box was designed using a fixed height background image. (as in current display below)

It would be easy to just change the height of the box, but the boxes are generated dynamically with text coming back from the database, and I want it to grow in height instead of scrolling the text. (as in what I am trying to do below)

I am trying to maintain the centered positioning of the gray lines which connect the pictures to the left and also to the box.

This how it currently displays:
 current display
This is what I am trying to do:
 what I am trying to achieve with the box
My current code (includes CSS)
 sixdegrees.html

And the headshot image:
 the headshot image
trmanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dejaanbuCommented:
u have given height for content area "sixdegrees_content" also u have given overflow:auto:

thats y the scrollbar comes...

whats the pbm if  "  height:auto:  overflow:visible;  "   is given for sixdegrees_content ?
0
Tom BeckCommented:
Because the images are in a separate div block from the text div block, there's no way to keep the images lined up with top bar of the text boxes while the height of the text boxes is variable. At least not with css alone. You need to get each text block and it's associated image inside the same div. Sample layout with revised css attached.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css"> 
 
*{margin:0px; padding:0px;}
#sixdegrees_container{background:#fff; width:847px; margin:auto; }
body {font-family: arial}
#sixdegrees_header{ width:827px; padding:20px 0 20px 20px}
#sixdegrees_header h1{ text-align:center; padding:0 0 10px 13px; border-bottom:1px solid #e8e8e8; color:#565656; font-weight:normal; font-size:24px}
#sixdegrees_header p{ text-align:center; padding: 10px 0 0 30px}
#sixdegrees_header p a{ text-decoration:none; color:#397ba8; font-size:15px; font-weight: bold;}
 
.sixdegrees_pic{margin:0 0 56px 0; width:160px; float:left;}
.sixdegrees_pic img{ border:1px solid #d8d8d8; display:block; margin-left: auto; margin-right: auto}
.sixdegrees_pic h1{ font-size:16px; color:#565656; display:block; text-align:center; padding:10px 0 0 0; font-weight: bold}
.sixdegrees_box{background: url(sixdegrees_textbox.png) no-repeat; width:502px; margin:0 0 20px 0; float:left;}
.head{ color:#565656; font-size:14px; font-weight:bold; padding:17px 0 0 83px; }
.sixdegrees_content{ margin:20px 0 0 83px;width:417px;}
.sixdegrees_content h1{ font-weight:bold; font-size:14px; color:#565656; text-transform:uppercase}
.sixdegrees_content p{font-weight: normal; font-size:14px; color:#565656; padding:0 0 10px 0}
.singleEntry{width:827px;float:left;}
 
</style>
</head>
<body> 
 
<div id="sixdegrees_container">
	<div id="sixdegrees_header">
    	<h1>6 Degrees of Separation</h1> 
    </div><!-- End of sixdegrees_header-->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
        	<img src="images/pic.jpg" alt="" />
            <h1>FIRST PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
            	<h1>ACADEMIC AFFILIATION</h1>
                <p>American Society of Cataract & Refractive Surgery</p>
       	<h1>PROGRAMS ATTENDED</h1>
                <p>Bromday Speaker Training Web Teleconference</p>
            	<h1>ACADEMIC AFFILIATION</h1>
                <p>American Society of Cataract & Refractive Surgery</p>
       	<h1>PROGRAMS ATTENDED</h1>
                <p>Bromday Speaker Training Web Teleconference</p>
                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
        	<img src="images/pic.jpg" alt="" />
            <h1>SECOND PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
                 	<h1>CLINICAL AFFILIATION</h1>
                <p>Columbia Hospital</p>
                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
            <img src="images/pic.jpg" alt="" />
            <h1>THIRD PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
            	<h1>CLINICAL AFFILIATION</h1>
                <p>Good Samaritan Medical Center</p>
                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
            <img src="images/pic.jpg" alt="" />
            <h1>FOURTH PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">
            	<h1>ACADEMIC AFFILIATION</h1>
                <p>American Academy of Opthalmology (AAO)</p>
            	<h1>CLINICAL AFFILIATION</h1>
		        <p>Good Samaritan Hospital</p>                
            </div><!-- End of content-->
        </div><!-- End of box-->
    </div><!-- End of singleEntry -->
    <div class="singleEntry">
        <div class="sixdegrees_pic">
            <img src="images/pic.jpg" alt="" />
            <h1>FIFTH PERSON</h1>
        </div>
        <div class="sixdegrees_box">
        	<p class="head">Commonality</p>
            <div class="sixdegrees_content">          	
		        <h1>CLINICAL AFFILIATION</h1>
		        <p>Good Samaritan Hospital</p>
            	<h1>DEGREES</h1>
		        <p>M.D.</p>                
            </div><!-- End of content-->
        </div><!-- End of box-->
</div><!-- End of singleEntry --> 
<br clear="all" />  
</div><!-- End of sixdegrees_container-->
 
</body>
</html>

Open in new window

0
trmanAuthor Commented:
dejaanbu: the only pbm is that the gray connecting lines which are in the image sixdegrees_textbox.png do not line up then. I use this image to set the gray lines connecting the images on the left. any ideas?  thanks!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

trmanAuthor Commented:
tommyBoy, your comment makes sense.  Do you see what I am trying to achieve by the two different screenshot images?  Basically, the records will be coming back from a database, some of them will have minimum content, others will have more. That is why the height of the box must stretch. however, I am tasked with keeping the gray lines connecting the two images and the box as in the screenshots.
0
Tom BeckCommented:
I see exactly what you're trying to do and no amount of tweaking the css will get you there. The image and it's associated text will have to be together in the same container so they can move together as the container's height varies.

You say the records come back from a database. Are the containing divs for the records also dynamically created? If so, do you have access to change the layout of the tags that are produced dynamically?
0
trmanAuthor Commented:
yes i have full control of the html display. only the image (pic) and associated lines of text are returned by the recordset.  my task is to create the layout where the gray lines will connect the images and the box (as in the scrolling-box.png images)
0
Tom BeckCommented:
Great. The layout in my sample will get you close to what you need, at least close enough that css can be used to make minor adjustments. Note that my path to the the pics is different from yours so that will have to be changed back. If you need help with the new layout, just post the relevant code or markup and I would be happy to help.

It's getting late so if you need help tonight, get back to me soon.
0
trmanAuthor Commented:
thanks tommyBoy, I will get on it tomorrow, as I am on PST time. cheers.
0
trmanAuthor Commented:
tommyBoy can you elaborate on your previous code please. obviously I will not be able to use the bg image i had been using, but to achieve the rounded corners, I am thinking of using this one:
 top bar of the box
0
Tom BeckCommented:
I made changes to the css for these three items in order to get my markup to look more like your sample image.

.sixdegrees_box{background: url(top-bar.png) no-repeat; background-color:#eee; min-height:180px; width:440px; margin:0 0 20px 63px; float:left;}
.head{ color:#565656; font-size:14px; font-weight:bold; padding:7px 0 0 22px; }
.sixdegrees_content{ margin:20px 0 0 22px;width:417px;}

Maybe the background image you were using can still be used. Can you post it? For the image attached, I just used a background color which you can remove from the css.
6-Degrees.jpg
0
trmanAuthor Commented:
ok, here is the image

  the bg image
your code looks good. is there any way to replicate the left, right and bottom dark gray border lines as in this image, without extending up to the top of the top-bar.png?

border-left: 1px solid #e6e6e6e; border-right: 1px solid #e6e6e6e; border-bottom: 1px solid #e6e6e6e;
0
trmanAuthor Commented:
oops I meant '#d8d8d8'
0
Tom BeckCommented:
Try replacing these three again to add the border.

.sixdegrees_box{background: url(images/top-bar.png) no-repeat; width:440px; min-height:200px; margin:30px 0 0 63px; float:left;}
.head{ color:#565656; font-size:14px; font-weight:bold; padding:7px 0 0 22px; }
.sixdegrees_content{padding:20px 0px 20px 63px; margin:7px 0 0 1px; width:374px; min-height:100px; border-left:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color:#f8f8f8; }
0
Tom BeckCommented:
Forgot to change the image path on that one.
0
Tom BeckCommented:
The background you originally had can be re-created if you are willing to take these steps.

Because the item heights now vary, a single background image will not work. Attached are three background images, one for the top item, one for the bottom item and one for all the middle items. In your code that produces the html markup, you will have to add some additional logic to print out different class attributes for the first and last items and another for any in the middle.

Screenshot attached of how the table will look with the backgrounds.

The attached css includes the three different classes for the background images. I also had to make additional adjustments.

A problem still exists. The layout does not display the same in IE as it does in other browsers. This may require a new question.
*{margin:0px; padding:0px;}
body { font-family:arial;text-align:center;}
#sixdegrees_container{ background:#fff; width:847px; margin:auto; }
#sixdegrees_header{ width:827px; padding:20px 0 20px 20px}
#sixdegrees_header h1{ text-align:center; padding:0 0 10px 13px; border-bottom:1px solid #e8e8e8; color:#565656; font-weight:normal; font-size:24px}
#sixdegrees_header p{ text-align:center; padding: 10px 0 0 30px}
#sixdegrees_header p a{ text-decoration:none; color:#397ba8; font-size:15px; font-weight: bold;} 
.sixdegrees_pic{ margin:0 0 56px 0; width:160px; float:left;}
.sixdegrees_pic img{ border:1px solid #d8d8d8; display:block; margin-left: auto; margin-right: auto}
.sixdegrees_pic h1{ font-size:16px; color:#565656; display:block; text-align:center; padding:10px 0 0 0; font-weight: bold}
.sixdegrees_box{ background: url(top-bar.png) no-repeat; width:440px; min-height:200px; height:auto !important; margin:30px 0 0 63px; float:left;}
.head{ color:#565656;font-size:14px;font-weight:bold; padding:7px 0 0 22px;text-align:left; }
.sixdegrees_content{ padding:20px 0px 20px 22px; margin:7px 0 0 1px; width:415px; min-height:100px; height:auto !important; border-left:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color:#f8f8f8;text-align:left; }
.sixdegrees_content h1{ font-weight:bold; font-size:14px; color:#565656; text-transform:uppercase}
.sixdegrees_content p{ font-weight: normal; font-size:14px; color:#565656; padding:0 0 10px 0}
.singleEntry_top{ width:827px;float:left; background:url(6_degrees_bg_top.png) no-repeat;}
.singleEntry_mid{ width:827px;float:left; background:url(6_degrees_bg_mid.png) no-repeat;}
.singleEntry_bot{ width:827px;float:left; background:url(6_degrees_bg_bot.png) no-repeat;}

Open in new window

6-degrees-bg-bot.png
6-degrees-bg-mid.png
6-degrees-bg-top.png
6-Degrees.jpg
0
Tom BeckCommented:
Replace these 3 again to correct most of the problems with IE8.

.sixdegrees_box{ background: url(images/top-bar.png) no-repeat; width:440px; min-height:200px; height:auto !important; height:200px; margin:30px 0 0 63px; float:left;}
.head{ color:#565656;font-size:14px;font-weight:bold; padding:7px 0 0 22px;text-align:left; }
.sixdegrees_content{ padding:20px 0px 20px 22px; margin:7px 0 0 1px; min-height:100px; height:auto !important; height:100px; border-left:solid 1px #ddd; border-right:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color:#f8f8f8;text-align:left;display:block; }
0
Tom BeckCommented:
Change the image path.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
trmanAuthor Commented:
hi tommyBoy, that is genius level design work!
the only correction I needed to make to get it to work was inside the CSS to replace the image pathways from underscores to dashes.  Other than that, it looks great. I think it definitely is possible to integrate that with the returned dataset rows.  

Thanks again!  Have a great day.
0
Tom BeckCommented:
Glad it worked out, thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.