Question

I know the following is wrong but what’s the easier way to generate something similar?

 .classhere{
 width: 50px + 10%
 }

So the div here has a minimun of 50px width +10% (let’s say the parent is 100px) so 55px and when the parent goes fullscreen e.g. 1800px the .classhere has a width of 50+180px.

Update:

javascript, jQuery and other solutions are welcome

Answer 1

You can do it like followed.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
    width:100px;
    height:100px;
    background-color:blue;
}

.child{
    background-color:green;
}

jQuery

$(document).ready(function(){
    $(".child").width(50+($(".parent").width()*0.1));
    $(".child").height(50);
});

If you want to see a demo of it, the jsfiddle is here