Please consider the following code: <pre class="prettyprint"><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"> some text some text </div> <div class="section"> some text some more text to force line wrapping </div> <div class="section"> some text some text </div> <div class="section"> some text some more text to force line wrapping </div> <div class="section"> some text some more text to force line wrapping </div> </body> </html> </code></pre> The element with absolute positioning apparantly makes the containing box "forget" which height he needs. I need the absolute positioning inside the "section" box, is there another solution for this? thanks in advance, geronimo edit Using tables is not really an option, I need some sort of "multi-level"/"nested" layout, where the second col is always on the same position: <pre class="prettyprint"> | some text in first column | some text in 2nd column | some indented text | 2nd column | also indented | 2nd col | even more indent | 2nd column with a lot of text that | makes it wrap | text | ... | blah blah | ... </pre> (of course whithout the "|"s)

When you use <code>position:absolute;</code>, the element is taken out of the normal page flow. Therefore it no longer affects the layout of its container element. So the container element does not take into account its height, so if there's nothing else to set the height, then the container will be zero height. Additionally, setting <code>display:inline-block;</code> does not make any sense for an element that is <code>position:absolute;</code>. Again, this is because absolute positioning takes the element out of the page flow. This is at odds with <code>inline-block</code>, which only exists to affect how the element fits into the page flow. All elements that are <code>position:absolute;</code> are automatically treated as <code>display:block</code>, since that's the only logical display mode for absolute positioning. If you need absolute positioning, then the only solution to your height problem is to set the height of the container box. However, I suspect that you could do without the absolute positioning. It looks like what you're trying to do is position the second <code></code> in each block to a fixed position in the block, so that they line up. This is a classic CSS problem. In the "bad-old-days", web designers would have done it using a table, with fixed widths on the table cells. This obviously isn't the answer for today's web designers, but it is something that causes a lot of questions. There are a number of ways to do it using CSS. The easiest is to set both the <code></code> elements to <code>display:inline-block;</code>, and give them both a fixed width. eg: <pre class="prettyprint"><code><div class='section'> some text some text </div> </code></pre> with the following CSS: <pre class="prettyprint"><code>.section span {display:inline-block;} .element-left {width:200px;} .element-right {width:150px;} </code></pre> [EDIT]after question has been updated Here's how I would achieve what you're asking now: <pre class="prettyprint"><code><div class='section'> some text some text </div> <div class='section'> some text some text </div> <div class='section'> some text some text </div> </code></pre> with the following CSS: <pre class="prettyprint"><code>.section span {display:inline-block;} .element-left {width:200px;} .indent-1 {padding:10px;} .indent-2 {padding:20px;} .element-right {width:150px;} </code></pre> A small amount of extra markup, but it does achieve the effect you want.

No. You could position absolutely then have a copy of the element inside the section box with <code>visible: none</code> but absolute positioning by definition makes it a "floating" element that doesn't interact with elements above it. Assuming your page layout is fixed you could use <code>padding-left: #px;</code> to achieve your goal, as I don't think relative positioning is what you want. Alternatively, you could use <code>display: table-*</code> to force it to retain a stricter form without affecting the document structure as shown here However depending on whether you want the cells to be fluid you may need to alter the <code>.section</code> divs into <code>display: table-row</code> if you don't like a predetermined width setup and want the separate .section's to line up.

CSS: display:inline-block and positioning:absolute

Please consider the 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 to 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 to force line wrapping</span>     </div>     <div class="section">         <span class="element-left">some text</span>         <span class="element-right-b">some more text to force line wrapping</span>     </div> </body> </html>

The element with absolute positioning apparantly makes the containing box "forget" which height he needs.

I need the absolute positioning inside the "section" box, is there another solution for this?

thanks in advance, geronimo

edit

Using tables is not really an option, I need some sort of "multi-level"/"nested" layout, where the second col is always on the same position:

 | some text in first column       | some text in 2nd column   | some indented text            | 2nd column   | also indented                 | 2nd col     | even more indent            | 2nd column with a lot of text that                                   |  makes it wrap   | text                          | ... | blah blah                       | ...

(of course whithout the "|"s)

What is the difference between display and position in CSS?

An element with position:static fills the space its contents need. whether that is display:block or display:inline depends on the element's standard display (for example, a <div> has display:block , while a has display:inline ) or on what you specify in your CSS.

What is display block and display inline in CSS?

Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

What happens when position is absolute in CSS?

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

What is the opposite of display inline-block?

opposite of display block is. display : none; it used for deleting and recreating them. You can also consider inline-block : inline-block elements inline elements but they have a width and a height.

When you use position:absolute;, the element is taken out of the normal page flow. Therefore it no longer affects the layout of its container element. So the container element does not take into account its height, so if there's nothing else to set the height, then the container will be zero height.

Additionally, setting display:inline-block; does not make any sense for an element that is position:absolute;. Again, this is because absolute positioning takes the element out of the page flow. This is at odds with inline-block, which only exists to affect how the element fits into the page flow. All elements that are position:absolute; are automatically treated as display:block, since that's the only logical display mode for absolute positioning.

If you need absolute positioning, then the only solution to your height problem is to set the height of the container box.

However, I suspect that you could do without the absolute positioning.

It looks like what you're trying to do is position the second  in each block to a fixed position in the block, so that they line up.

This is a classic CSS problem. In the "bad-old-days", web designers would have done it using a table, with fixed widths on the table cells. This obviously isn't the answer for today's web designers, but it is something that causes a lot of questions.

There are a number of ways to do it using CSS.

The easiest is to set both the  elements to display:inline-block;, and give them both a fixed width.

eg:

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

with the following CSS:

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

[EDIT]after question has been updated

Here's how I would achieve what 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 the 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 extra markup, but it does achieve the effect you want.

No.

You could position absolutely then have a copy of the element inside the section box with visible: none but absolute positioning by definition makes it a "floating" element that doesn't interact with elements above it.

Assuming your page layout is fixed you could use padding-left: #px; to achieve your goal, as I don't think relative positioning is what you want.

Alternatively, you could use display: table-* to force it to retain a stricter form without affecting the document structure as shown here

However depending on whether you want the cells to be fluid you may need to alter the .section divs into display: table-row if you don't like a predetermined width setup and want the separate .section's to line up.

CSS: display:inline-block and positioning:absolute

Tags:

css

css-position

geronimo

People also ask

2 Answers

Spudley

J V

Recent Activity

Donate For Us

CSS: display:inline-block and positioning:absolute

Tags:

css

css-position

geronimo

People also ask

2 Answers

Spudley

J V

Related questions

Recent Activity

Donate For Us