Menu
Why even though there #text is 300 pixels wide, and #actions is 200 pixles wide, the #action div doesn’t stay on the right [B]top
[code=html]
<!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>