CODEWITHSUNDEEP
htmlcss
supersize
supersize

Reputation: 14773

How to apply remaining width to a div aside sidebar having specific width

what I intend to do is following. I have a div#sidebar with specific width on the right. This sidebar div takes up place on the right. What I now want to do is to apply the remaining width to another div#left on the left of sidebar.

But it does not work properly, since the div under the sidebar div. I want the div to be 100% width to the margin of sidebar. Not the whole side. I made an image to explain it better: desired output

Following is the css i currently have:

#sidebar {
   height: 100%;
   width: 342px;
   float:right;
}

#left {
   float: left;
   width: 100%;
   height: 100%;
}

Hope you get my point. Thanks

Upvotes: 5

Views: 3145

Answers (6)

laaposto
laaposto

Reputation: 12213

You can use calc. Read here more

So your #left div will have width equal to 100% minus the width of the #sidebar

#sidebar {
   height: 100%;
   width: 342px;
   float:right;
}

#left {
   float: left;
   width: calc(100% - 342px);
   width: -moz-calc(100% - 342px);
   width: -webkit-calc(100% - 342px);
   height: 100%;
}

And the DEMO

Upvotes: 1

T J
T J

Reputation: 43156

You can absolutely position the #left content using left:0, right: width of sidebar inside a relative container. So you'll have better browser support...

HTML

<div id='container'>
 <div id='left'></div>
 <div id='sidebar'></div>
</div>

css

html, body {
 height:100%;
}
#container{
 position:relative; 
 height:100%;
}
#left {
 position:absolute;
 left:0;
 right:342px;
 height: 100%;
}
#sidebar {
 width: 342px;
 height: 100%;
 float:right;
}

Demo

Upvotes: 1

Izzy
Izzy

Reputation: 6866

Using .calc is probably your easiest option see Demo http://jsfiddle.net/qxEzX/6/ 

<div id="sidebar">Sidebar
</div>
<div id="left">Left 
</div>

CSS

#sidebar{height: 100%;  width: 342px; float: right; background: #000000;}
#left{float: left; width: calc(100% - 342px); height: 100% background: #ff0000;}

Upvotes: 0

demonofthemist
demonofthemist

Reputation: 4199

Use this Markup

<div class="container">
    <div class="sidebar"></div>
    <div class="main"></div>
</div>

& CSS:

body,html{height:100%;}
.container{display:block; height:100%; padding:0 150px 0 0;}
.container .main{display:block; height:100px; background:#f00;}
.container .sidebar{display:block; float:right; width:150px; height:100%; background:#0f0; margin:0 -150px 0 0;}

Here is DEMO

Upvotes: 0

valerio0999
valerio0999

Reputation: 12138

    #sidebar {
       height: 100%;
       width: 342px;
       position:fixed;
       right:0;
       top:0
    }

    #left {
     width:100%;
     box-sizing:border-box;
     padding:0 342px 0 0;
     height: 100%;
    }

http://jsfiddle.net/vlrprbttst/WYhz4/

Upvotes: 0

Alex Wilson
Alex Wilson

Reputation: 2419

try this code DEMO

<aside class="panel">
    ...
</aside>
<div class="content">
    ...
</div>

CSS

.content {
    overflow: hidden;
  border: 1px solid;
  height:500px;
}
.panel {
    float: right;
    width: 20%;
  border: 1px solid;
  height:500px;
}

Upvotes: 0

Related Questions