在css中定位div的最佳方法是什么？

我正在尝试放置此菜单:

  
    
  
        
 Categories 
  
        
 Weapons 
  
        
 Armor 
  
        
 Manuals 
  
        
 Sustenance 
  
        
 Test 
  
    
  

在页面的左侧.问题是如果我使用绝对值或固定值.
不同的屏幕尺寸将使导航栏的呈现方式不同.我还有一个第二个div,其中包含所有需要向右移动的主要内容,到目前为止,我使用的是相对值,无论屏幕大小如何,它都可以正常工作.

float确实是实现这一目标的合适财产.但是,bmatthews68给出的例子可以改进.浮动框最重要的是它们必须指定显式宽度.这可能相当不方便,但这是CSS的工作方式.但是,请注意,这px是一个在HTML/CSS世界中没有位置的度量单位,至少不指定宽度.

始终采取适用于不同字体大小的措施,即使用em或%.现在,如果菜单实现为浮动体,那么这意味着主要内容浮动"围绕"它.如果主要内容高于菜单,则可能不是您想要的:

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

Left
Right, spanning
 multiple lines

您可以通过为主内容提供margin-left等于菜单宽度来更正此行为:

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

Left
Right, spanning
 multiple lines

在大多数情况下,您还希望提供主要内容,padding-left以便它不会过于"贴"到菜单上.

顺便说一句,改变上面的内容使得菜单位于右侧而不是左侧是简单的:只需将"左"字的每次出现都改为"右".

啊,最后一件事.如果菜单的内容高于主要内容,它将呈现奇怪的原因,因为float有些奇怪的事情.在这种情况下,您必须清除浮动体下方的框,如bmatthews68的示例中所示.

/编辑:该死的,HTML不像预览显示的那样工作.好吧,我已经包含了图片.