asked on

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:
https://www.experts-exchange.com/questions/24439311/CSS-keep-div-at-bottom-of-page.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

ASKER CERTIFIED SOLUTION

Britt Thompson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

007399

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

mms_master

ASKER

Thanks, problem 1 is now fixed. The second problem isn't actually causing me any problems so I'll leave it for now.