How do I position a div to upper left of page?
I am struggling with a CSS issue. I have a simple front page that consists of 4 divs. 3 of which are visible. The other is an overlay.
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="overlay" visible="false"></div>
<div id="container">Container</div开发者_StackOverflow社区>
<div id="menu">
<input type="text" />
<input type="button" class="button" value="Go" onclick="ajax.getData()" />
</div>
</form>
I want the the "menu" to be positioned to the left of the header. I have been able to accomplish this by setting this div's position absolute:
#menu
{
position: absolute;
top: 20px;
left: 10px;
width: 150px;
height: 300px;
padding: 5px;
border: solid 1px #666;
background: #ffffff;
-moz-border-radius: 5px;
}
However, when the screen is resized (smaller) this div remains locked in position but the other divs resize (desired) but the menu div does not. Changing the positioning to be 'relative' causes the div to fall beneath the 'container' div. Can someone tell me what's wrong with my CSS?
The results are the same in IE and FF.
Thanks!
-Nick
There are at least three ways you can address this.
Method 1: - Change div order
<div id="header">
<div id="menu"> ---- Menu here
<div id="overlay">
<div id="container">
... and the float-left the header and the menu, both relative. Having non-floated block elements between these would otherwise affect the relative floating and the divs wouldn't necessarily line up.
Method 2: - float everything
<div id="header">
<div id="overlay">
<div id="container">
<div id="menu">
... where everything is float-left, position relative. You need to however ensure that the width of header + overlay + container isn't too much to push you menu to the next line.
Method 3: Absolute positioning AND resizing
Keep things as they are an add position: relative to your form CSS. This way the absolute-positioned div inside the form will interpret the form as it's parent element and re-size within it. Your menu div however cannot re-size according the form width currently because it has fixed pixel dimensions. These need to be percentages for it to re-size.
Hope that helps.
use float: left; on the menu then clear the "float" by using clear: both; right after.
<div id="menu" style="float: left;">
<input type="text" />
<input type="button" class="button" value="Go" onclick="ajax.getData()" />
</div>
<div id="header" style="float: right;">Header</div>
<div style="clear: both;" />
<div id="overlay"></div>
<div id="container">Container</div>
加载中,请稍侯......
精彩评论