tags: position

Action executed in 0.000

Each Tag


Common tags - number of posts

layout (1), selection (1), display (1), inline-block (1), alignment (1), CSS (1), politics (1), election (1), platform (1), candidates (1),



A candidate selector based on your position on political matters

url: http://societly.com/us2016/default/en

type: project, format: page

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.