White lines between divs

Question

I'm trying to do a basic layout for a website. But I have two problems: - I'm getting spaces between my divs. I have already set margin and padding to 0. - I can't use % to set hights, I have to use vh for some of the divs and I don't understand why. fiddle: http://jsfiddle.net/4awfk/ HTML: ```

Stora

``` CSS: ``` * { padding:0; margin: 0; } html { height: 100%; width: 100%; } body { background: yellow; height: 100%; width: 100%; } li { list-style: none; } #stora { width: 50%; height: 100%; background: red; float:left; } #navigation { width: 50%; height: 100%; background: blue; float: right; } footer { width: 100%; height: 25px; background: white; position: fixed; bottom: 0px; } #ettan { width: 50%; height: 70vh; background: olive; fl…

Accepted Answer

To remove the spaces between the divs try setting font-size:0 for the whole document and set a font-size on the anchors or the element containing your text, try this for your example:

```
html {
    height: 100%;
    width: 100%;
    font-size:0;
}
#navigation ul li a {
    font-size:14px;
}
```

Briefly the vh (viewport height) is a new feature in CSS3, I'll explain with an example, if you set your div height to 50vh, this means that you want your div height to stretch to 50% of the viewport height, while setting it to 50% would make stretch to 50% of the div's parent height (same applies for `width:50vw`).

Here is a reference on how to use them.

EDIT

Another thing to try:

Try floating only the left div and remove the float from the right div, but set `display:inline-block` for both of them, I can't test the result because I don't have safari, so try it and let us know if it helps.

```
#stora {
    width: 50%;
    height: 100%;
    background: red;
    float:left;
    display:inline-block;
}
#navigation {
    width:50%;
    height: 100%;
    background: blue;
    display:inline-block;
}
```

White lines between divs

Solution

Problem