HTML, CSS - div in div color

Question

I want that every second line is grey. It works almost, but on the left and the right side, there are a few Pixels white.

Does anybody knows why?

HTML

<div class="recent">
    <h1>Recent Downloads:</h1>
    <div class="row">test</div>
    <div class="row">test</div>
    <div class="row">test</div>
    <div class="row">test</div>
    <div class="row">test</div>
</div>

CSS

.recent {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30%;
    width: 35%;

background-color: white;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    border-style: solid;
    border-color: white;
}

.recent h1 {
    font-size: 16px;
    font-weight: normal;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.row {
    background-color: white;
}

.row:nth-child(odd) {
    background: #e0e0e0;
}

http://jsfiddle.net/C8drX/4/

Remove the height from the .recent div? The contents are overflowing. jsfiddle.net/Paulie_D/C8drX/8 — Paulie_D
– Paulie_D, Commented Aug 1, 2014 at 11:27
How is Bootstrap helpful here? It's not relevant to the situation. — Paulie_D
– Paulie_D, Commented Aug 1, 2014 at 11:29
Bootsrap have already in default (I mean, you do not have to code it), evry second line in color (grey) — DaniKR
– DaniKR, Commented Aug 1, 2014 at 11:35

William · Accepted Answer · 2014-08-01 11:25:14Z

3

You should remove borders from .recent:

.recent {
    border: 0px;
}

and maybe add some padding to .row:

.row {
    padding: 3px;
}

Here is a JSFiddle

answered Aug 1, 2014 at 11:25

William

3,0152 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johan Hjalmarsson · Accepted Answer · 2014-08-01 11:37:22Z

2

The height of the .recent div is to small. The way I see it, you can do one of four things:

Remove the height property from .recent
increase the height property on .recent
remove a child div from the .recent-div
Like Wil93 sugested, you can remove borders from .recent and add padding to .row

Here is a fiddle where I just removed the height all together:

(/*height:30%;*/)

JSFiddle

edited Aug 1, 2014 at 11:37

answered Aug 1, 2014 at 11:28

Johan Hjalmarsson

3,5036 gold badges44 silver badges64 bronze badges

Comments

Richa · Accepted Answer · 2014-08-01 11:29:01Z

0

It is because you have set

border-color: white;

in

.recent {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30%;
    width: 35%;

    background-color: white;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    border-style: solid;
    border-color: white;
}

Check Fiddle you will understand

You can simply remove it using

border:none;

answered Aug 1, 2014 at 11:29

Richa

3,2992 gold badges30 silver badges51 bronze badges

Comments

swiss_blade · Accepted Answer · 2014-08-01 11:30:07Z

0

You should also use this, replacing the current css rules:

background-color: white;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
}

answered Aug 1, 2014 at 11:30

swiss_blade

5417 silver badges20 bronze badges

Comments

Kana · Accepted Answer · 2014-08-01 11:30:28Z

0

Your .recent div has a border from your user agent stylesheet because you're setting a border-style. Set it to 0 and use padding in your .row divs instead.

answered Aug 1, 2014 at 11:30

Kana

1079 bronze badges

Collectives™ on Stack Overflow

HTML, CSS - div in div color

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related