mms_master
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
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'> </div>
<div id='RightCorner'> </div>
<div id='Middle'> </div>
</div>
<div id='Clear'></div>
<div id='Left'> </div>
<div id='Right'> </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'> </div>
<div id='RightCorner'> </div>
<div id='SpeechTail'> </div>
<div id='Middle'> </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;
}
temp.JPG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, problem 1 is now fixed. The second problem isn't actually causing me any problems so I'll leave it for now.
A gif with only white and transparent in it will be a small file. So you dont need to worry about corner divs.
Open in new window