#1

  1. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1

    Post how to float sidebar right


    PHP Code:
    @charset "utf-8";
    /* CSS Document for : SameeArticles.Blogspot.com */
    #logo
        
    {
            
    width:200px;
            
    height:200px;
            
    float:right;
            
    background-color:#F6F2B1;
        
    }

    html
        
    {
            
    height:100%;
            
    width:100%;
            
    background:url(http://www.southsoft.co.za/images/mysql.jpg) center center no-repeat;
            
    background-position:center;
            
    /* You can also give local file path */
        
    }

    h1
        
    {
            
    background:#00FF00;
            
    border-style:dotted;
            
    margin-right:200px;
            
    color:#000000;
            
    font-family:"Times New Roman"Timesserif;
            
    text-transform:uppercase;
        }

    h2h3
        
    {
            
    background:#CCCCCC;
            
    font-family:Georgia"Times New Roman"Timesserif;
            
    font-size:16px;
            
    color:#000000;
            
    font:Georgia"Times New Roman"Timesserif;
        }

    a:link 
        
    {
            
    color:#000000;
            
    text-decoration:none;
        }

    body
        
    {
        
    color:#0000FF;
        
    font-family:"Courier New"Couriermonospace;
        
    background-color:F6F2B1;
        
    /*background-image:url(http://www.getacho.com/download/phpcss/images/bg-color.png);
        background-repeat:repeat;
        background-attachment:fixed;*/
        
    }
        
    #sidebar
        
    {
        
    float:right;
        
    border:solid;
        
    border-color:#0000FF;
        
    border-width:medium;
        
    height:100%;
        
    width:200px;
        
    margin-top:200px;
        
    background-color:#00FF00;
        
    position:fixed;
        } 
    I am now getting

    here is my Tamplate,

    Don't make bad comment about my css, I am newbie in css. learning it

    http://www.getacho.com/download/
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    Code:
    #sidebar
        {
        float:right;
        border:solid;
        border-color:#0000FF;
        border-width:medium;
        height:100%;
        width:200px;
        margin-top:200px;
        background-color:#00FF00;
        position:fixed;
        }
    You have float:right AND position:fixed........if you want float to work, you have to change to position:relative; ....if you want position:fixed; to work , then, you can't use float property.

    With the link you gave, I suggest creating another DIV to wrap around everything in your body tag EXCEPT for the div#sidebar section(essentially, close that DIV just before the DIV#sidebar)..then, you will be able to manipulate the main body/content section separate from your sidebar.
  4. #3

  5. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1
    Originally Posted by DonR
    Code:
     div#sidebar
    I am using div but I dont know how does this function work?
    can you give me one example I try it.

    Now it is not at top?
    as

    Code:
    margin-top:200px;
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    div#sidebar just means DIV with the ID of sidebar..which would target <div id="sidebar"></div> in your CSS
  8. #5

  9. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1
    Originally Posted by DonR
    div#sidebar
    okay

    now my side bar is not at top. can you tell me its solution
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    I told you what to do in my post above.

    Here is code to fix things how I think you are wanting.
    HTML:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div id="main">
        	<img id="logo" src="http://icons.iconarchive.com/icons/deleket/3d-cartoon-vol3/256/Web-Coding-icon.png" alt="Coding">
            <h1 align="center">Constants In PHP : <a href="http://sameearticles.blogspot.com" target="_blank">Samee Articles</a></h1>
            <h2 align="left">Sample 1 : What is Constant in PHP?</h2>
                Constant is a indentifier for a simple value. <br> The Value can not be changed during the script. <br> Value starts with letter or underscore, never with dollar sign "$". <br> It starts with "define." <br> Contant is defauld Case Sansitive.                
            <h2 align="left">Sample 2 : Constant Example in PHP</h2>
                My Name is Samee Ullah Feroz.                
            <h2 align="left">Sample 3 : Constant Example in PHP</h2>
                My Nick Name is Sherri Bhai. 
    </div>               	
    <div id="sidebar">
            <ul>
                <li>Home Page</li>
                <li>php learning</li>
                <li>CSS Learning</li>
            </ul>
    </div>
    </body>
    </html>
    and the CSS for the extra DIV:
    Code:
    #main {
        background-color: #F6F2B1;
        color: #0000FF;
        float: left;
        overflow: auto;
        padding: 10px;
        width: 80%;
    }
    hopefully, you can learn from the markup and CSS code and see what is happening.

    Also, you will need to remove the "margin-top:200px;" from your #sidebar CSS.
  12. #7

  13. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1

    Yes I can


    what is its purpose?


    Originally Posted by DonR
    overflow: auto;
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    to my knowledge, it is sometimes needed to help a floated DIV to extend all the way around the content that it is enclosing.
  16. #9

  17. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1
    Originally Posted by DonR
    to my knowledge, it is sometimes needed to help a floated DIV to extend all the way around the content that it is enclosing.
    okay;

    now tell me;

    I am using

    2 background

    1st : Logo
    2nd : color or image

    I want like,

    color => image => content

    how to make it on css
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    Originally Posted by same2cool

    I want like,

    color => image => content

    how to make it on css
    I don't even know what that is supposed to mean .....unless it means you want to build this up in "layers"..in which case you will need to look into using position property and z-index property.
  20. #11

  21. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1
    Originally Posted by DonR
    I don't even know what that is supposed to mean .....unless it means you want to build this up in "layers"..in which case you will need to look into using position property and z-index property.
    yes im talking about position as

    1) color

    2) image

    3) text

IMN logo majestic logo threadwatch logo seochat tools logo