ansaurus

Question

How do I position a div to upper left of page?

Answer 1

A:

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>

kimphamg 2010-02-20 05:20:58

Floating on the div doesn't have an effect the div is still at the bottom of the page (not the top right) when not absolutely positioned.

Nick 2010-02-20 06:45:52

Answer 2

A:

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.

Tom 2010-02-20 13:36:46

Very informative. Thanks!

Nick 2010-02-24 15:22:30

Nick, no probs. There's probably even more ways to get that done but only playing around with it can tell.

Tom 2010-02-24 15:59:53

ansaurus

tags:

views:

answers:

How do I position a div to upper left of page?

related questions