Problem with CSS Div layout (Size and padding)

Hi,

I am trying to create a speech bubble using Divs with background images. I have attached a picture of the speech bubble after setting the border colour of some div's to help explain the problem. I will refer to the div's by their border colour.

Red div = <div id='Left'>
Green div = <div id='Message'>
Yellow div = <div id='Post'>

Problem 1

In the picture the red div is supposed to stretch to fill the gap and it doesn't. It can't have a fixed height because the height of the green div will change depending on it's content, which means the red div will also need to stretch to fill bigger gaps.

Problem 2

In the picture you can see that the yellow div appears to have left padding, but it doesn't... The yellow border should have a left margin of 20px, but it actualy appears to have a left padding of 0px. It should also have no padding, so the border should be touching the edge of the speech bubble (just like it is on the right).

Thanks in advance

mms_master

P.S. I also have another CSS related question open (also worth 500 points) here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24439311.html
=================================================================================
HTML
=================================================================================
	<div id='Post'>
		<div id='TopBorder'>
			<div id='LeftCorner'>&nbsp;</div>
			<div id='RightCorner'>&nbsp;</div>
			<div id='Middle'>&nbsp;</div>
		</div>
		<div id='Clear'></div>
		<div id='Left'>&nbsp;</div>
		<div id='Right'>&nbsp;</div>
		<div id='Message'>
			<div id='DateTime'><div id='PostID'>#<?php echo $Row["ID"]; ?></div>Posted by <?php echo $Row["Name"]; ?> on <?php echo date("d/m/Y", $Row["PostTime"]) . " at " . date("H:i", $Row["PostTime"]); ?></div>
			<?php echo $Row["Post"]; ?>
			<div id='Links'>Edit - Delete - Reply</div>
		</div>
		<div id='Clear'></div>
		<div id='BottomBorder'>
			<div id='LeftCorner'>&nbsp;</div>
			<div id='RightCorner'>&nbsp;</div>
			<div id='SpeechTail'>&nbsp;</div>
			<div id='Middle'>&nbsp;</div>
		</div>
		<div id='Clear'></div>
	</div>
 
=================================================================================
CSS
=================================================================================
 
#Post {
	margin: 10px 20px;
	padding: 0;
	
border: solid 1px #ffff00;
}
 
#Post #Left {
	float: left;
	width: 10px;
	margin: auto 0px;
	background: url('images/BlogLeft.gif') repeat-y;
	
border: solid 1px #ff0000;
}
 
#Post #Right {
	float: right;
	width: 10px;
	margin: auto 0;
	background: url('images/BlogRight.gif') repeat-y;
}
 
#TopBorder {
	margin: 0;
}
 
#TopBorder #LeftCorner {
	float: left;
	width: 10px;
	height: 10px;
	margin: 0;
	background: url('images/BlogTopLeft.gif') no-repeat;
}
 
#TopBorder #Middle {
	height: 10px;
	margin: 0px 10px;
	background: url('images/BlogTop.gif') repeat-x;
}
 
#TopBorder #RightCorner {
	float: right;
	width: 10px;
	height: 10px;
	margin: 0;
	background: url('images/BlogTopRight.gif') no-repeat;
}
 
#Post #DateTime {
	text-align: right;
	margin: 0 auto;
	font-style: italic;
	font-size: 0.8em;
}
 
#Post #DateTime #PostID {
	float: left;
	text-align: left;
	font-style: normal;
}
 
#Post #Message {
	margin: 0px 10px;
	background: #ffffff;
	
border: solid 1px #00ff00;
}
 
#Post #Links {
	text-align: right;
	margin: 0 auto;
}
 
#BottomBorder {
	margin: 0;
}
 
#BottomBorder #LeftCorner {
	float: left;
	width: 10px;
	height: 10px;
	margin: 0;
	background: url('images/BlogBottomLeft.gif') no-repeat;
}
 
#BottomBorder #Middle {
	height: 10px;
	margin: 0px 10px;
	background: url('images/BlogBottom.gif') repeat-x;
}
 
#BottomBorder #SpeechTail {
	float: right;
	margin: 0;
	width: 50px;
	height: 50px;
	background: url('images/SpeechTail.gif') no-repeat;
}
 
#BottomBorder #RightCorner {
	float: right;
	width: 10px;
	height: 10px;
	margin: 0;
	background: url('images/BlogBottomRight.gif') no-repeat;
}

Open in new window

temp.JPG
LVL 5
mms_masterAsked:
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.

Britt ThompsonSr. Systems EngineerCommented:
to fix the problem with #1 you need to use background positioning within the divs and arrange them like so:

<div id='Left'>
<div id='Right'>
<div id='Message'></div>
</div>
</div>

This stretches out the divs on the left and the right to match the message height. Then, once you have the CSS worked out the (removing the width) you can organize the background image like this:

background:transparent url('images/BlogLeft.gif') top left repeat-y;
background:transparent url('images/BlogRight.gif') top right repeat-y;
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
007399Commented:
You could just remove the red box and pad the green one on the left and right to fill in the extra space.

A gif with only white and transparent in it will be a small file.  So you dont need to worry about corner divs.
<div id="yellow_box">
	<div id="speech_bubble">
		<div id="header_image"></div>
		<div id="green_box">Message stuff</div>
		<div id="footer"image"></div>
	</div>
</div>
 
// CSS
 
#yellow_box
	{
	width: 1000px ;
        margin-left: 20px ;
	}
 
#speech_bubble
	{
	width: 1000px ;
	}
 
#header_image
	{
	width: 1000px ;
	height: 15px ;
	background-image: url(entire_header_image_in_1_row) ;
	}
 
#green_box
	{
	width: 960px 
	padding-left: 20px ;
	padding-right: 20px ;
	background-color: #FFF ;
	}
 
#footer_image
	{
	width: 1000px ;
	height: 50px ;
	background-image: url(entire_footer_image_in_1_row) ;
	}

Open in new window

0
mms_masterAuthor Commented:
Thanks, problem 1 is now fixed. The second problem isn't actually causing me any problems so I'll leave it for now.
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.