Dynamic sidebar width depending on the main div

I have the following code

<div id="content">
    <div id="sidebar"></div>
    <div id="main"></div>
</div>

and the css

 #main{
     width: 840px;
     margin: 0 auto;
 }

 #sidebar{
     float: left;
     width: ?; -> need to fill dhe auto space
 }

the problem is how i can make #sidebar div to fill the space left from the main div? This image shows what i want

Answers


you can use

 #sidebar{
     float: left;
     width: calc(100% - 840px);
 }

Correct version based od Jean-Bernard Pellerin answer

#sidebar{
     float: left;
     width: calc((100% - 840px) / 2);
 }

Need Your Help

Button To Reset The View Of JFrame

java swing

I have to write a program that will generate 20 random circles with random radius lengths. If any of these circles intersect with another, the circle must be blue, and if it does not intersect, the...

Adding rows to datatable through javascript

javascript jquery html5 datatables jquery-datatables

I want to add rows to the datatable when the page is displayed using a javascript array.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.