CODEWITHSUNDEEP
htmlcss
Samantha J T Star
Samantha J T Star

Reputation: 32848

Is there a way I can give 20% width to a div and the remainder of width to another div with CSS

I have the following simple HTML:

<article id="root-view">
   <div id="menu-view">
      x
   </div>
   <div id="content-view">
      y
   </div>
</div>

I set the style of menu-view to width: 20% and content-view to width: 80%

I would like to now give the menu-view: width: 40rem and have the remainder allocated to the content-view.

Is there a way that I can do this with CSS? I've not seen a setting that I could use for content-view's width? Note that we are using browsers IE9 and above.

Upvotes: 1

Views: 96

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241258

You could use calc() to set #content-view's width to 100% subtracted by 40rem.

jsFiddle example - Full screen example might work better.

#content-view {
    width:calc(100% - 40rem);
}

This is equivalent to the remaining space.

Alternatively, you could use CSS tables:

jsFiddle example - Full screen example

#root-view {
    display:table;
    width:100%;
}
#menu-view {
    display:table-cell;
    width:40rem;
}
#content-view {
    display:table-cell;
}

Upvotes: 3

Kamlesh
Kamlesh

Reputation: 529

Try this 

#content-view { 
float:right;
margin-left:20%;
width:80%; }

#menu-view{
float:left;
margin-right:80%;
width:20%; }

Upvotes: 0

Related Questions