article

Action executed in 0.000

Using inline-block for page layout

Helephant.com logo Thanks to a "gotcha" spotted by Helen at Helephant, i'm now able to replace the flaot: left i mean position: absolute style on my website with display: inline-block; width: 20% for the #sidebar. The #content gets 80%.

The problem i was facing was the #content at 80% width was falling below the #sidebar at 20% width.

What Helen spotted was that that these divs are now treated as inline and laid out in the flow of the page. So whitespace between the divs appears on the page. This space is enough to overflow the 100% width of the page.

BTW, one disadvantage to using position: absolute was the #sidebar and #content were taken out of the flow. Thus the #footer was not placed correctly on the page.

Comments

none yet

Post a Comment

* indicates a required field
anonymous (If you want to identify yourself, please sign in first.)
required This field is required.

Max size is 2 MB, aspect ratio 3:4 width:height
required This field is required.
Please include a short description.
required This field is required.

480 characters remaining.
is public

(Use this field if you have to. 3000 characters remaining.)
1 quarter, 1 penny, 2 nickels + 100

Trackback URL

http://derocher.org/~brian//trackback.php?ParentId=13434

form