How to position image with css

If you want your image permanently positioned on your page, you can use css property called "position" with its value as fixed

//HTML
<img alt="Displaying image at corner using css property 
position" class="topLeft" src="http://imagizer.imageshack.us/v2/100x75q90/844/ybfp.jpg" />


<img alt="Displaying image at corner using css property 
position" class="topRight" src="http://imagizer.imageshack.us/v2/100x75q90/844/ybfp.jpg" />

<img alt="Displaying image at corner using css property 
position" class="bottomLeft" src="http://imagizer.imageshack.us/v2/100x75q90/844/ybfp.jpg" />

<img alt="Displaying image at corner using css property 
position" class="bottomRight" src="http://imagizer.imageshack.us/v2/100x75q90/844/ybfp.jpg" />

//CSS 

img {
position:fixed;
}

.topLeft {
top:0;
left:0;

}

.topRight {
top:0;
right:0;

}

.bottomLeft {
bottom:0;
left:0;

}

.bottomRight {
bottom:0;
right:0;

}

Here is the fiddle for positioning images with css http://jsfiddle.net/hSq3b/1/

How to avoid wrapping in html or css.

Wondering how to avoid wrapping in html or css. 

You can use css property "white-space"  to prevent wrapping in html or css


Below is the example 

Say your content is like this 

<p>
My Content My Content My Content My Content My Content My Content My Content My Content My Content 
</p>

// CSS
p{
white-space : nowrap;
}

Here is the fiddle for the same :  http://jsfiddle.net/4Fty3/

How to increase or decrease height of an element by clicking another element

1. Create a div which holds the main container

<div id= "main">
//This is your main container
</div>

2. Create a div which holds the content and place it in the main div like below

<div id = "main ">
    <div id = "content">
        <p> My content line 1</p>
        <p> My content line 2</p>
        <p> My Content line 3</p>
    </div>
</div>

3. Now, create another div which will have a button to control the div with content. In my case I am calling it as "footer" and place it in the main div

after placing the footer div the whole  html code should look like this

<div id= "main">
  
    <div id = "content">
        <p> My content line 1</p>
        <p> My content line 2</p>
        <p> My Content line 3</p>
    </div>
    <div id = "footer">
        Footer
        <button id = "btn">Button</button>
    </div>
  
</div>

And the css for these elements is 

html,body {
   height:100%
}
 
# main{
    min-height:100px;
    border:1px solid grey;
    height:100%;
}
#content {
    border:1px solid black;
    display:block;
    overflow:hidden;
    overflow-y: scroll;
}
#footer {
    border: 1px solid blue;
    display:block;
    //If you want to place your footer at the bottom and not to move it
    bottom:-10px;
    position:absolute;
}

NOTE : If you do not wish to move your bottom 

 
 I have used jquery, so I am going to use click function from jquery to handle click events on the footer button that we have created in step 3.

 And also change the height of the content element with jquery css function

 
$(function () {

    $('#btn').click(function(){
   
        $('#content').css("height", "100px");
    });
   
})
In this example I created only one button with handles reduces the height of the "content" div.
You can add another button to increase the height of the content div/element.






If you want some smoother action, you can use jquery animate https://api.jquery.com/animate/   like this



 
 
$(function () {

    $('#btn').click(function(){
    
        $('#content').animate({
            height:"20px"
        }, 2000);
    });
    
})






 



Here is the fiddle http://jsfiddle.net/mannemvamsi/DYZr5/4/