html - how can I position nested divs at the bottom and float right? -


Say that I have a basic div with three children divs. Is there no way that I can keep everything in the bottom right corner? Something like this: 

  ------------------------------------- | | | | | | | | | | | Test1 test2 test3 | | ------------------------------------ |   
 I tried this CSS:  
  #header {position: relative; } #nav_tabs {status: relative; Width: 50%; Height: 100%; float right; }. Tab {status: absolute; Bottom: 0px; float right; }   
 with this HTML:  
  & lt; Div id = "header" & gt; & Lt; Div id = "nav_tabs" & gt; & Lt; Div class = "tab" & gt; Test1 & lt; / Div & gt; & Lt; Div class = "tab" & gt; Test2 & lt; / Div & gt; & Lt; Div class = "tab" & gt; Test3 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 But it seems that it is stacking my tab at the top of another, what is the correct way to do it?   
 
 
 do this  
  #header {width: 500px; Height: 300px; Status: Relative; Border: 1px solid red; } #nav_tabs {status: absolute; Bottom: 0; Correct: 0; }. Tab {float: left; Margin-right: 5px; } Examine the working example on

Comments

Post a Comment