?
Solved

Having Empty Space Below Picture

Posted on 2015-02-18
5
Medium Priority
?
71 Views
Last Modified: 2015-02-18
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
Comment
Question by:APD_Toronto
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40617126
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40617135
0
 

Author Comment

by:APD_Toronto
ID: 40617183
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 40617217
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
 

Author Comment

by:APD_Toronto
ID: 40617236
Thank you!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question