css position - CSS: display:inline-block and positioning:absolute -


please consider following code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>     <meta http-equiv="content-type" content="text/html;charset=utf-8">     <style type="text/css">         .section {             display: block;             width: 200px;             border: 1px dashed blue;             margin-bottom: 10px;         }         .element-left,         .element-right-a,         .element-right-b {             display: inline-block;             background-color: #ccc;             vertical-align: top;         }         .element-right-a,         .element-right-b {             max-width: 100px;         }         .element-right-b {             position: absolute;             left: 100px;         }     </style>     <title>test</title> </head> <body>     <div class="section">         <span class="element-left">some text</span>         <span class="element-right-a">some text</span>     </div>     <div class="section">         <span class="element-left">some text</span>         <span class="element-right-a">some more text force line wrapping</span>     </div>     <div class="section">         <span class="element-left">some text</span>         <span class="element-right-b">some text</span>     </div>     <div class="section">         <span class="element-left">some text</span>         <span class="element-right-b">some more text force line wrapping</span>     </div>     <div class="section">         <span class="element-left">some text</span>         <span class="element-right-b">some more text force line wrapping</span>     </div> </body> </html> 

the element absolute positioning apparantly makes containing box "forget" height needs.

i need absolute positioning inside "section" box, there solution this?

thanks in advance, geronimo

edit

using tables not option, need sort of "multi-level"/"nested" layout, second col on same position:

 | text in first column       | text in 2nd column   | indented text            | 2nd column   | indented                 | 2nd col     | more indent            | 2nd column lot of text                                   |  makes wrap   | text                          | ... | blah blah                       | ... 

(of course whithout "|"s)

when use position:absolute;, element taken out of normal page flow. therefore no longer affects layout of container element. container element not take account height, if there's nothing else set height, container 0 height.

additionally, setting display:inline-block; not make sense element position:absolute;. again, because absolute positioning takes element out of page flow. @ odds inline-block, exists affect how element fits page flow. elements position:absolute; automatically treated display:block, since that's logical display mode absolute positioning.

if need absolute positioning, solution height problem set height of container box.

however, suspect without absolute positioning.

it looks you're trying position second <span> in each block fixed position in block, line up.

this classic css problem. in "bad-old-days", web designers have done using table, fixed widths on table cells. isn't answer today's web designers, causes lot of questions.

there number of ways using css.

the easiest set both <span> elements display:inline-block;, , give them both fixed width.

eg:

<div class='section'>     <span class="element-left">some text</span>     <span class="element-right">some text</span> </div> 

with following css:

.section span  {display:inline-block;} .element-left  {width:200px;} .element-right {width:150px;} 

[edit]after question has been updated

here's how achieve you're asking now:

<div class='section'>     <span class="element-left"><span class='indent-0'>some text</span></span>     <span class="element-right">some text</span> </div> <div class='section'>     <span class="element-left"><span class='indent-1'>some text</span></span>     <span class="element-right">some text</span> </div> <div class='section'>     <span class="element-left"><span class='indent-2'>some text</span></span>     <span class="element-right">some text</span> </div> 

with following css:

.section span  {display:inline-block;} .element-left  {width:200px;} .indent-1 {padding:10px;} .indent-2 {padding:20px;} .element-right {width:150px;} 

a small amount of markup, achieve effect want.


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -