Question

I needed to make a second border without using images so my idea was to make another div inside the parent one ex:

<div class="box news">
    <div class="title">{l_news}</div>
    <marquee behavior="scroll" direction="left" loop="-1" scrollamount="3" scrolldelay="0">{news}</marquee>
    <div class="border"></div>
</div>

My css is:

.box{
    float: left;
    position: relative;
    margin: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #9a9a9a;
}
.box div.title{
    clear: left;
    width: 100%-10px;
    height: 22px;
    padding-top: 2px;
}
.border{
    width: 100%-2px;
    position: absolute;
    top: 0px; left: 0px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 1px solid #d6d6d6;
}

The width: 100%-10px worked the first time but not the second time. Why? Any suggestions for a way around that>

Answer 1

You can’t do calculations like this in CSS. The only reason why the first rule worked is because the browser encounters a syntax error, and reverts back to the default setting.
A div element’s default behaviour is to stretch to the fullest available width.

For the title div I would recommend giving .box a padding: 10px.

I’m not 100% clear how you want the border but I think you should be able to work with left: 2px; right: 2px; top: 2px; bottom: 2px or a variation of it.