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>
Reply With Quote
Bookmarks