#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0

    Right Floating problem


    Hi there
    I'd be grateful if someone help me with this problem:

    I want to float two elements to the right in a wrapper in a way that they both position on each other. (then I will rise one of them about 20 px)
    I can easily do it on the left side of the wrapper by floating the first element to the left and the second object comes up and locates on the first element,
    However I can't do the same since all elements normally appear on the left side of the wrapper and by floating both elements to the right they will be next to each other.

    Thanks in advance
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Good evening,

    Definitely possible, I wouldn't float your elements though. I'd position them relatively and manipulate the top/bottom and right properties in the CSS.

    If you post what HTML and CSS you have, I'll modify it and explain what I've done.

    Kind regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0
    Thank you for your attention,
    I made a simple example, Here are the codes:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background-color: #69F;
    	height: 800px;
    	width: 800px;
    }
    #logo {
    	background-color: #FF0;
    	height: 150px;
    	width: 120px;
    	float: right;
    }
    #mainNav {
    	background-color: #3F6;
    	height: 600px;
    	width: 190px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="logo">Logo</div>
      <div id="mainNav">MainNav</div>
    </div>
    </body>
    </html>

    I'm trying to put the mainNav box under the Logo element on the right side.

    Thank you for your time and Best Regards
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0
    *** Meanwhile I found a temporary solution. I added a Left Margin to the mainNav element after floating Logo to the right and it solved the problem. However if I do that I can not add a third element next to the mainNav (a new element next to the left side of the mainNav like a banner frame) and the mainNav will push the third element down.
    there should be a more fundamental solution to this problem.

    Looking forward to hearing from you
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Good morning MMM,

    Try this code and let me know if it's what you're looking for.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background-color: #69F;
    	height: 800px;
    	width: 800px;
    }
    #logo {
    	background-color: #FF0;
    	height: 150px;
    	width: 120px;
    	float: right;
    }
    #mainNav {
    	background-color: #3F6;
    	height: 600px;
    	width: 190px;
    	clear: right;
    	float: right;
    }
    #banner{
    	background: #00ff00;
    	height: 600px;
    	width: 190px;
    	float: left;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="logo">Logo</div>
      <div id="mainNav">MainNav</div>
      <div id="banner">Banner</div>
    </div>
    </body>
    </html>
    Kind regards,

    NM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0
    Originally Posted by Nanomech
    Good morning MMM,

    Try this code and let me know if it's what you're looking for.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background-color: #69F;
    	height: 800px;
    	width: 800px;
    }
    #logo {
    	background-color: #FF0;
    	height: 150px;
    	width: 120px;
    	float: right;
    }
    #mainNav {
    	background-color: #3F6;
    	height: 600px;
    	width: 190px;
    	clear: right;
    	float: right;
    }
    #banner{
    	background: #00ff00;
    	height: 600px;
    	width: 190px;
    	float: left;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="logo">Logo</div>
      <div id="mainNav">MainNav</div>
      <div id="banner">Banner</div>
    </div>
    </body>
    </html>
    Kind regards,

    NM.
    Good day Nanomech!

    Thank you again for your reply,
    Sorry If I couldn't explain myself clear enough, my intention is to put Logo element in the mainNav (I didn't mean on top of mainNav).
    I made what I mean on the left side of the screen, please try to do the same on the right side (mirror):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background-color: #69F;
    	height: 800px;
    	width: 800px;
    }
    #logo {
    	background-color: #FF0;
    	height: 150px;
    	width: 120px;
    	float: left;
    	position: absolute;
    }
    #mainNav {
    	background-color: #3F6;
    	height: 600px;
    	width: 190px;
    	float:left;
    
    }
    #banner{
    	background: #00ff00;
    	height: 120px;
    	width: 600px;
    	float: left;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="logo">Logo</div>
      <div id="mainNav">MainNav</div>
      <div id="banner">Banner</div>
    </div>
    </body>
    </html>
    Have a nice day!
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Good afternoon MMM,

    Have a good day?!?!?!?! I'm at wrk!!

    Here you go, I added an extra 10px to the mainNav to get rid of the gap but try this for size:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background-color: #69F;
    	height: 800px;
    	width: 800px;
    }
    #logo {
    	background-color: #FF0;
    	height: 150px;
    	width: 120px;
    	float: right;
    }
    #mainNav {
    	background-color: #3F6;
    	height: 600px;
    	width: 200px;
    	float:left;
    
    }
    #banner{
    	background: #ff0000;
    	height: 120px;
    	width: 600px;
    	float: left;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="banner">Banner</div>
      
      <div id="mainNav">
          <div id="logo">Logo</div>
      </div>
      
    </div>
    </body>
    </html>
    Hope this helps you.

    Kind regards,

    NM.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0
    Originally Posted by Nanomech
    Good afternoon MMM,

    Have a good day?!?!?!?! I'm at wrk!!

    Here you go, I added an extra 10px to the mainNav to get rid of the gap but try this for size:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background-color: #69F;
    	height: 800px;
    	width: 800px;
    }
    #logo {
    	background-color: #FF0;
    	height: 150px;
    	width: 120px;
    	float: right;
    }
    #mainNav {
    	background-color: #3F6;
    	height: 600px;
    	width: 200px;
    	float:left;
    
    }
    #banner{
    	background: #ff0000;
    	height: 120px;
    	width: 600px;
    	float: left;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="banner">Banner</div>
      
      <div id="mainNav">
          <div id="logo">Logo</div>
      </div>
      
    </div>
    </body>
    </html>
    Hope this helps you.

    Kind regards,

    NM.
    Thank you!
    It works great!
    once I got near this solution but I put mainNav in the Logo div so when I gave Logo a -25px top position it took mainNav with it to the top!
    anyway thanks again friend!
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Evening MMM,

    Great news!

    No problem whatsoever.

    Good luck with the rest of the coding. If you get stuck be sure to visit us again!

    Kind regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo