Inline divs with one having custom width [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am trying to code two inline Divs, one has defined width in px value while the other get the rest width of the container
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>

Answer 1

Use CSS table layout as its super-easy to implement and has really good support. It also has the added benefit of balanced column heights - thus making columned layout a doddle to create.
html, body {min-height:100%; height:100%; margin:0;}
.wrapper {display:table; width:100%; height:100%; min-height;100%;}
.wrapper .main {display:table-cell; background:#eee;}
.wrapper .sidebar {display:table-cell; background:#666; width:300px;}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>

Answer 2

Didn't really give us much to go on, but I would suggest using display:table-cell; instead of inline-block.
.wrapper {
display:table;
width:100%;
}
.main, .sidebar {
display:table-cell;
border:1px solid black;
}
.sidebar {
width:300px;
}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>

Answer 3

using calc without floats:
body,
div {
padding: 0;
border: 0;
font-size: 0
}
.wrapper {
width: 100%;
}
.main {
display: inline-block;
width: calc( 100% - 300px);
background: blue;
height: 50px;
}
.sidebar {
display: inline-block;
width: 300px;
background: red;
height: 50px;
}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>
this is kind of fragile , table or flexboxes are better_
flexbox example:
.wrapper {
width: 100%;
display:flex;
}
.main {
flex-basis:300px;
background: blue;
height: 50px;
}
.sidebar {
flex:1;
background: red;
height: 50px;
}
<div class="wrapper">
<div class="main">main</div>
<div class="sidebar">sidebar (300px)</div>
</div>