www.webdeveloper.com
Results 1 to 4 of 4

Thread: understanding css positioning

  1. #1
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32

    understanding css positioning

    Why even though there #text is 300 pixels wide, and #actions is 200 pixles wide, the #action div doesn't stay on the right top side of the header? It stays on the right, but #text doesn't let it sit on its right. Instead, it pushes #actions down.

    HTML Code:
    <!DOCTYPE HTML>
    <html lang='pt-br'>
      <head>
        <meta charset='UTF-8'>
        <title>Positioning</title>
        <style>
          * {
            /* margin: 0; */
            /* padding: 0; */
          }
          html {
            font-family: 'Verdana';
          }
          #wrapper {
            width: 960px;
            margin: 0 auto;
            background-color: #eee;
          }
          #main_header {
            background-color: #ddd;
            height: 70px;
          }
          #logo {
            width: 200px;
            float: left;
            background-color: #1a9;
          }
          #text {
            width: 300px;
            margin-left: 200px;
            /* float: left; */ /* This makes things work. */
          }
          #actions {
            width: 200px;
            background-color: #7f9f7f;
            float: right;
          }
        </style>
      </head>
    
    <body>
    
      <div id='wrapper'>
      <header id='main_header'>
    
        <div id='logo'>
          <h1>Logo</h1>
        </div>
    
        <div id='text'>
          <h2>Welcome here.</h2>
        </div>
    
        <div id='actions'>
          <div id='logout'>
            <p><a href='#logout'>Sair</a></p>
          </div>
          <div id='site'>
            <p><a href='#view_site'>Ver o site</a></p>
          </div>
        </div>
      </header>
      <div style='clear: both;'></div>
    
      <section id='main_section'>
    
        <h1>Main Section</h1>
    
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer iaculis
        tincidunt velit. Integer malesuada velit ut sapien congue mollis. In placerat
        nunc non diam. Fusce scelerisque placerat lectus. Nulla fringilla porttitor
        felis. Vivamus auctor pharetra elit. Aliquam quis diam. *** sociis natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent
        at libero. Duis scelerisque luctus nibh. Aliquam mi. Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit. Fusce magna libero, lacinia a, sollicitudin
        at, mattis ut, odio. Vivamus sapien lacus, tempus non, interdum vel, tempor
        vel, mauris. Duis consequat vehicula neque. Class aptent taciti sociosqu ad
        litora torquent per conubia nostra, per inceptos hymenaeos.</p>
    
      </section>
    
      </div><!-- Fim div id='wrapper'. -->
    
    </body>
    </html>

  2. #2
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    If #text is not floated, then the line feeds for the h2 and div reset the the starting position available to the bottom of the text line. Whe you do a layout like that all the element going across must be floated. to keep them on the same line.
    Cd&
    one of my toys And my repository and my old self ranting plus a bonus Getting the most out of Q/A sites
    Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack

  3. #3
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32
    What do you mean by "line feeds"? Do you mean the same as "new line" or "\n"?

  4. #4
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    Yes block elements include a new line.
    Cd&
    one of my toys And my repository and my old self ranting plus a bonus Getting the most out of Q/A sites
    Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles