Make full-width without setting `width`

Question

I will simulate what i need to achieve.

for example, i want that #2 took the whole space, remaining of 100% - 180px.. how to achieve that?

p.s. seems flexbox is more supported over devices than calc - http://css3clickchart.com/#flexbox

This stack overflow [question](http://stackoverflow.com/questions/6601097/setting-div-width-to-100-minus-certain-amount-of-px) might help! — JCOC611, Aug 24 '16 at 11:59
`display: table` on parent and `display: table-cell` on child, `flexbox`, `#2 {position: absolute; left: 0; top: 0; padding-left: 180px;` — Justinas, Aug 24 '16 at 12:00
you can use `flex` that will do it for you. You can use jQuery to work out that space and put it into your CSS that way. I dont know if css `calc` would work out the space — Andrew, Aug 24 '16 at 12:00
[This](http://stackoverflow.com/a/35884883/3400962) answer in the link provided by @user3202670 is likely of particular interest — Hidden Hobbes, Aug 24 '16 at 12:08
@justinas, no, that is quite quite mess. will look in other solutions posted here. — T.Todua, Aug 24 '16 at 12:10

score 2 · Answer 1 · answered Aug 24 '16 at 12:03

2

You can use flexbox model as shown below. Adding flex: auto; will allow the right content to use remaining width.

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#parent {
  display: flex;
  height: 100%;
}
#left {
  width: 180px;
  background-color: hotpink;
}
#right {
  flex: auto;
  background-color: dodgerblue;
}

<div id="parent">
  <div id="left"></div>
  <div id="right"></div>
</div>

answered Aug 24 '16 at 12:03

T J

42,762
13
83
138

please, post BROWSER SUPPORT info about `flex` – T.Todua Aug 24 '16 at 12:17
Seems `flexbox` is more supported across devices, than `calc` – T.Todua Aug 24 '16 at 12:25

score 1 · Answer 2 · edited Aug 24 '16 at 12:04

1

Use css calc

Here with a example.. This might help:

.class {
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
}

edited Aug 24 '16 at 12:04

C.Raf.T

373
4
13

answered Aug 24 '16 at 12:01

Prasath V

1,336
4
20
39

please, post BROWSER SUPPORT info about `calc` – T.Todua Aug 24 '16 at 12:16
Check this [link](http://caniuse.com/#feat=calc) or this [link](http://css3clickchart.com/#calc) – Prasath V Aug 24 '16 at 12:29

Andrej · Answer 3 · 2016-08-24T13:42:14.213

There are many ways to do this. One simple way is below.

1st way: Simple inline-block

.container {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;  
  }

.sidebar {
  background-color: red;
  width: 180px;
  height: 600px;
  float: left;
}
.main-content {
  display: inline-block; 
  background-color: green;  
}

<div class="container">
  <div class="main-content">Main Content</div>
  <div class="sidebar">Sidebar</div>
</div>

Fair warning though: In this case the .main-content will only take the space it needs, and will not actually be full width. So If you want to set background to it, you should actually set the backround to .container.

2nd way: Use calc for width

.container {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
  position: relative;
  }

.sidebar {
  background-color: red;
  width: 180px;
  height: 600px;
  float: left;
}
.main-content {
  float: right;
  background-color: green;  
  width: calc(100% - 180px);
  height: 600px;
}

<div class="container">
  <div class="main-content">Main Content</div>
  <div class="sidebar">Sidebar</div>
</div>

3rd way: use Flex

.container {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2;
  display: flex;
  }

.sidebar {
  background-color: red;
  width: 180px;
  height: 600px;
}
.main-content {
  background-color: green;
  flex: auto;
}

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main-content">Main Content</div>
</div>

Flexbox is probably the nicest solution, but saidly old browsers don't support it.

4th way of doing this is the oldfasioned way with faking tables:

.container {
  width: 100%;
  height: 600px;
  background-color: #f2f2f2; 
  display: table;
  }

.sidebar {
  background-color: red;
  width: 180px;
  display: table-cell;
}
.main-content {
  display: table-cell;
  background-color: green;  
}

<div class="container">
  <div class="sidebar">Sidebar</div>  
  <div class="main-content">Main Content</div>
</div>

dont surprise, you might get into -~~~ on StkOvfl without realizing why.. read FAQ. I've upvoted though. — T.Todua, Aug 24 '16 at 12:11
This answer doesn't work. Add a background to main content and you'll see. — T J, Aug 24 '16 at 12:21
@Andrej good luck... however,, yes, see your answer again (i've updated), when you click `RUN SNIPPET` you will see that your code doesnt work. — T.Todua, Aug 24 '16 at 13:22
I understand what you mean. The inline-block main-content takes only the space it needs. — Andrej, Aug 24 '16 at 13:24

score 0 · Answer 4 · answered Aug 24 '16 at 12:07

0

You can use float: left and overflow: hidden.

aside {
  float: left;
  width: 30%;
  background: beige;
}
article {
  overflow: hidden;
  background: brown;
  color: white;
}

<aside>
  sidebar
</aside>
<article>
  content
</article>

answered Aug 24 '16 at 12:07

Simon

7,182
2
26
42

`overflow:hidden` is not a good way – T.Todua Aug 24 '16 at 12:37

Make full-width without setting `width`

4 Answers4