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
Post a Comment