• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 83
  • Last Modified:

Having Empty Space Below Picture

HI Experts,

I am trying to setup my error DIV, so there is empty space below the image, such as my snapshot attached, however the text wraps around the image.

My HTML is
 <!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
        <title>$app_title</title>
	<link rel="stylesheet" href="../styles/main.css">
	
</head>

    <body>

        <h1>$app_title</h1><br>
        <h2>$page_title</h2>
        
        <!--Content Start-->
            <!--Error Start-->
            <div id="err">
                <img src="../images/error.gif">
                <p id="message"> This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.This is a veeeeeeeeeeeerrrrrrry long error.</p>
            </div>
            <!--Error Finish-->
        <!--Content Finish-->

    </body>
 
 </html>

Open in new window


My CSS is
/* So the HTML5 structural tags work in older browsers */
article, aside, figure, footer, header, nav, section {
   display: block; 
}
/* the styles for the elements */
*{
	margin: 0;
	padding: 0;
}
html{
    background-color: gray;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 1300px;
    height: 600px;
    margin: 10px auto;
    border: 2px solid black;
    background-color: white;
    padding: 20px 10px;
}

 h1{
    color: red;
    font-size: 120%;
    
    text-align: center;
    
}

h2{
    color: blue;
    font-size: 100%;
    text-align: center;
}

/*CSS for error messages start*/
#err {
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    background-color: RGBA(255,0,0,0.30);
    /*filter:alpha(opacity=60);
    opacity:.6;*/
    width: 45%;   
    margin: 20px auto;
}
img {
    float: left;
    width: 50px;
    height: 50px;
   }
   #message {
       /*clear: both;*/
   }   
/*CSS for error messages end*/

Open in new window


Thank you
snapshot.png
0
APD_Toronto
Asked:
APD_Toronto
  • 3
  • 2
1 Solution
 
Chris StanyonCommented:
Probably the easiest thing to do here is to absolutely position the image and give your P a left margin:

#err {
    border: 3px solid red;
    background-color: RGBA(255,0,0,0.30);
    width: 45%;   
    margin: 20px auto;
    position:relative;
}

#err img { position: absolute; top: 5px; left: 5px;} 

#err p { margin-left: 50px; }

Open in new window

0
 
Chris StanyonCommented:
0
 
APD_TorontoAuthor Commented:
Thanks Chris,

If you don't mind, I have the following follow up questions:

1. What is position: absolute?

2. I see you have #err, #err img, and #err p. Does this means all images and paragraphs within the err div only?

3. What if my text is 1 line, how can I make the box shorter? One way I though is making the height 60px (5 top + 50 image+ 5 bottom), but then I have the opposite  issue, if I have a long error, then it does not stretch the box.

Thank you
0
 
Chris StanyonCommented:
Normally in HTML, elements are simply positioned by the order they appear. Using the position:absolute takes an element out of the normal document flow and says "Put it where I tell you". Because we've done this, it doesn't effect the following element (the P Tag). We then just give the P tag a left margin to move it along a bit.

Yes - the #err img and #err p will only effect img and p tags inside an element with an id of err.

The way I've coded it, the box will automatically shrink and grow, according to how much text is contained. If there's too little text, then the box will shrink beyond the image. You can correct this by setting min-height of the #err div to 60px. This allows it to shrink and grow, but not get any smaller than 60px;

I've just updated the jsfiddle link to include the min-height and 1 line of text.
0
 
APD_TorontoAuthor Commented:
Thank you!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now