Solved

Having Empty Space Below Picture

Posted on 2015-02-18
5
56 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
  • 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

863 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now