CODEWITHSUNDEEP
htmlcss
Chris Middleton
Chris Middleton

Reputation: 5934

Double border using two divs

I'm trying to make a darkblue box that has an inner white border and an outer blue border. The white-bordered div is situated within a blue-bordered div. But all I get is one big darkblue box.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Practice 2014-4-22-01</title>
<style>
#bannerDiv {
    border: 2 px solid white;
    background-color: darkblue;
    color: white;
}
#outerDiv {
    border: 2 px solid blue;
}
</style>
</head>
<body>
<div id="outerDiv">
    <div id="bannerDiv">No double border :(</div>
</div>
</body>
</html>

Output: enter image description here

You can see it here: JSFiddle.

Upvotes: 0

Views: 71

Answers (6)

Oriol
Oriol

Reputation: 288290

No need to use two divs, you can fake a second border with box-shadow and margin:

HTML:

<div id="bannerDiv">Double border</div>

CSS:

#bannerDiv {
    border: 2px solid white;    /* Inner border */
    box-shadow: 0 0 0 2px blue; /* Outer border */
    margin: 2px;                /* Same as outer border width */
    background-color: darkblue;
    color: white;
}

Similarly, instead of box-shadow, outline can be used too:

border: 2px solid white;    /* Inner border */
outline: 2px solid blue;    /* Outer border */
margin: 2px;                /* Same as outer border width */

Demo

Upvotes: 2

Mutu Yolbulan
Mutu Yolbulan

Reputation: 1052

your css is misspelled should be:

border: 2px solid green;
border: 2px solid white;

Upvotes: 0

Lucas Henrique
Lucas Henrique

Reputation: 1364

Remove space 

#outerDiv {
    border: 2px solid blue;
}

Upvotes: 1

albert
albert

Reputation: 8153

because you have space between 2 px, see here: http://jsfiddle.net/jalbertbowdenii/9TtwB/2/
also, you can do with css, no extra div needed

Upvotes: 1

Liftoff
Liftoff

Reputation: 25392

Don't put spaces between the number and the measurement:

2 px /*Invalid*/
2px /*Valid*/

This applies to % as well:

2 % /*Invalid*/
2% /*Valid*/

JSFiddle

Upvotes: 1

Daze
Daze

Reputation: 488

Don't put spaces before units (px).

Upvotes: 4

Related Questions