Div with width 100% and margins or padding gets wider than 100% [solved]

If a div is set to width (or height) 100% and margins or padding are added, it will be wider than 100% causing the scrollbars to appear in the browser. 

For example like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: 100%;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
      <h1>Div taking more than 100% space</h1>
      <p>It demonstrates a div that is taking up more than 100%. Notice the horizontal scroll bar below.</p>
    </div>
  </div>
</body>
</html>

The solution is to set the inner container width to auto instead of 100%, like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: auto;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
       <h1>Div NOT taking more than 100% space</h1>
       <p>It demonstrates a div that is NOT taking up more than 100%. Notice the absence of the horizontal scroll bar below.</p>
       <p>The difference/solution is to set the inner div with width: auto.</p>
    </div>
  </div>
</body>
</html>

Share

Posted by on May 3rd, 2013 No Comments

PrestaShop subcategories not visible in blockcategories

PrestaShop subcategoriesAfter upgrading to PrestaShop 1.5.3 (and 1.5.4) the subcategories where not showing up anymore in the categories block. The solution was quite simple: 

Just deinstall the categories block in the modules section and then install it again. After reinstalling, it will probably be necessary to adjust the block position. 

Share

Posted by on April 15th, 2013 No Comments

Timelapse from space

Share

Posted by on April 8th, 2013 No Comments

Lego engineering at it’s finest

Share

Posted by on April 1st, 2013 No Comments

How to display list items inline and remove the bullet

When using list items in HTML to create a horizontal list (for example in a horizontal menu) you need to display the list items not vertically which is standard, but horizontally. You will probably also want to remove the bullet. This is how you do it.

To display the list horizontally, use CSS display: inline

To remove the list item bullet, use CSS list-style: none

Example:

<ul>
  <li style="display: inline; list-style: none;">Menu item 1</li>
  <li style="display: inline; list-style: none;">Menu item 2</li>
  <li style="display: inline; list-style: none;">Menu item 3</li>
</ul>

Of course, the above is just to illustrate the technique. In a real world scenario this would be applied through a CSS class or id.

 

Share

Posted by on March 25th, 2013 No Comments

Make a weblink (a href) not clickable

Sometimes you have a need to prohibit a visitor from clicking on a link on your site. For example if you are including content from another soruce via Atom or RSS and they contain links.

The best way is of course to remove the link tag (<a href="" >) from the content. But if this is not possible an alternate solution can be to cover it with a transparent div placed on top of the content using the z-index.

Share

Posted by on March 18th, 2013 No Comments

Joomla 2.5 – suddenly internal links contain Smart%20Search [solution]

In a Joomla 2.5 installation, SEF URLs enabled and URL rewrite using .htaccess enabled I suddenly got internal menu links with URL:s containing Smart%20Search, like:

http://www.example.com/some-menu-item/Smart%20Search/some-article

The link itself does not work, ending up on an error page. I have no explanation why this occurs.

The solution is to go to Menu -> Menus, then select all menus and then click the Rebuild button

 

Share

Posted by on November 14th, 2012 No Comments

Demolition of gas tower in Valby, Copenhagen

The other day I went to watch the demolition of the gas tower in Valby, Copenhagen. The demolition was done by detonating a series of explosive charges in the bottom of the tower. By placing and sequencing the explosions the tower was tipped over to the side with high precision, just like taking down  a tree. I had never seen a demolition using explosives in reality before (only on video) so I was quite excited. Everything went exactly as planned. This is my video.

Slide the bar to 1:04 where the explosion begins. The event was rather big in Denmark. It was broadcasted live in television. See the news clip from TV2 News here.

Share

Posted by on November 6th, 2012 No Comments

Unable to login as admin into Joomla administrator after site move

After moving a Joomla 2.5 site to a new URL (i.e. new domain name) the backend (administrator) did no longer let me login as admin (or any other account for that matter). I tried to recover the admin account by setting the password field to a known value directly into the MySQL database described here, but it didn’t help.

The reason was that the cookie domain was set in the global configuration and this domain was different from the new domain where the site was installed. By editing the configuration.php file and emptying the $cookie_domain parameter I was able to login again, i.e:

public $cookie_domain = '';

 

Share

Posted by on October 25th, 2012 No Comments

Switching from iPhone to another brand – don’t forget to turn off iMessage first!

A girlfriend to one of my friends recently decided to leave the dark side and replace her iPhone with an Android (good decision!). However when she was using the iPhone she also had enabled the iMessage texting.

After switching to her new Android phone her friends, that still was using iPhones, tried to text her. Because her iMessage account was still enabled the texts ended up in the Apple void and didn’t reach her. To disable it the SIM-card had to be put into an old iPhone 3 in order to turn the iMessage off. The iPhone she replaced was using micro-SIM but the Android had normal SIM:s so she had a new larger SIM that wouldn’t fit in her old iPhone. The iPhone 3 works with normal SIM cards so that is why a iPhone 3 had to be used to disable it. 

So, if you decide to convert from iPhone to another brand, remember to turn iMessage off in the iPhone first!

 

Share

Posted by on October 20th, 2012 No Comments