asked on

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

Chris Stanyon

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

Chris Stanyon

Working Demo -> http://jsfiddle.net/ChrisStanyon/w0fhammL/

APD Toronto

ASKER

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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

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

Start Free Trial

APD Toronto

ASKER

Thank you!