Solved

Having Empty Space Below Picture

Posted on 2015-02-18
5
52 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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
0
 

Author Comment

by:APD_Toronto
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
Thank you!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 46
Adding Bootstrap 3 to Angular 2 application 4 33
Menu Inconsistent 3 18
jQuery Canlendar click function 5 18
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

762 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

13 Experts available now in Live!

Get 1:1 Help Now