We Keep Coding

make div change height dynamically

I have a page with 3 rows. The first row is a fixed height of 150px and the last row is a fixed height of 120px. I need the middle row to adjust according to the height of the window so that all three rows are visible and there are no scroll bars visible. The middle row must adjust dynamically so that even after loading if you move the browser window to another screen that is smaller the middle row must adjust accordingly. Secondly the middle row must have it's content aligned vertically middle and horizontally center. Any help is appreciated.

CSS for the height:
.first-row {
height: 150px;
}
.middle-row {
height: calc(100vh - 150px - 120px);
}
.last-row {
height: 120px;
}

Run the code snippet in full page mode (!). Use css calc function to automatically calculate the height of middle container.
body {
margin: 0;
}
.top {
background-color: #f0f0f0;
height: 150px;
}
.bottom {
background-color: #ddd;
height: 120px;
}
.middle {
background-color: teal;
display: table-cell;
height: calc(100vh - 270px);
text-align: center;
vertical-align: middle;
width: 100vw;
}
<div class="top">TOP</div>
<div class="middle">MIDDLE</div>
<div class="bottom">BOTTOM</div>

As suggested, try using flexbox:
<style>
.container {
display: flex;
flex-flow: column wrap;
align-items: stretch;
height: 100%;
}
.row{}
.row.row1{height: 150px;}
.row.row2{flex: 1 1 auto;}
.row.row3{height: 120px;}
</style>
<div class="container">
<div class="row row1">First row</div>
<div class="row row2">Middle row</div>
<div class="row row3">Final row</div>
</div>
Don't forget to add your vendor prefixes when using this.

I use flexboxes for these things: A Complete Guide to Flexbox
.container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.header {
height: 50px;
background-color: green;
flex: 0 0;
}
.footer {
height: 30px;
background-color: red;
flex: 0 0;
}
.content {
background-color: blue;
flex: 1 1 auto;
min-height: 50px;
}
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
<div>

Personally the cleanest solution is using flexbox:
.container {
display: flex;
flex-direction: column;
}
.dynamic {
flex: 1 1 auto;
}
http://codepen.io/kevinfarrugia/pen/wzOqGo?editors=1100#0

how to make a website go to full width and height in asp.net

I am trying to understand how to make a web page which will go in full height and width in asp.net. I know to use width: 100% for the background but I am not understanding how to change the width and height of other buttons, , and other stuff..
I search on google and youtube for that but I am not getting a good tutorial to explain how I should make it.
Should I use jquery or javascript? I'm trying to stay far from those at the moment.
Can any one please give me a simple explanation about this?

Best way to control ui styles, should be CSS.
For example, setting a element to full width and height
.full_width {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}
.element_inside {
width: 100px;
border: 1px solid red;
}
.button_inside {
width: 125px;
height: 60px;
line-height: 60px;
}
<div class="full_width">
I am full width element
<div class="element_inside">
Low width
</div>
<button class="button_inside">
Button
</button>
<button style="width: 100%;">
Button full width
</button>
</div>
But it uses absolute position.
You could use something like this too.
html {
display: table;
width: 100%;
min-height: 100%;
}
body {
display: table-row;
}
.full_width {
width: 250px;
display: table-cell;
vertical-align: top;
min-height: 100%;
}
.full_width {
border: 1px solid #f00;
}
<div class="full_width">
full width container
</div>
For responsive layout, and different screen different size, you can use following codes:
#media (min-width: 768px) {
.container {
width: 740px;
}
}
#media (min-width: 992px) {
.container {
width: 960px;
}
}
#media (min-width: 1200px) {
.container {
width: 1160px;
}
}
#media (min-width: SCREEN_WIDTH_IN_PIXELS) {
.container { // my element width for this screen
width: 1160px;
}
}

Use different css container class for buttons. For ex;
.body{
width: 100%
}
button {
color: #666;
border-color: #EBEBEB;
background-color: #EBEBEB;
text-align: center;
height:200px;
width:200px;
}
And then use for button,
<button class="button">Button</button>

Center 3 div in parent div

I am trying to center 3 div into a parent div with no result.
Could you help me please ?
HTML :
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
CSS :
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
float: left;
background: red;
height: 90px;
}
RESULT :

Change the float:left; to display:inline-block;, like this:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}

you can try this one:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
DEMO HERE

Try display flex. You'll need to add vendor prefixes!
#container {
text-align: center;
display: flex;
justify-content: space-between;
width: 100%;
}
#left, #middle, #right {
width: 200px;
background: red;
height: 90px;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>

#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
margin:0px auto;
height: 90px;
}
#left
{
background: red;
}
#middle
{
background:blue;
}
#right
{
background: green;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>

Add Bootstrap CSS and have a look at this example.
Here:
COL=Column
MD=Medium Sized Device
4 represents the partition of the screen as the Maximum column possible in a single row is 12
So 4/12=3 Panels in result.
<div class="row">
<div class="col-md-4">left</div>
<div class="col-md-4">middle</div>
<div class="col-md-4">right</div>
</div>
Try Bootstrap it will make your life easy.
Here's link for the Grip System you want Bootstrap Grid System.

remove float & add display inline-block
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}

Add margin-left: auto, margin-right:auto, width: 600px to your container.
Thanks

div to fill up the remaining space (width)

hey there i have a div with 100% width (the width of computer screen can be anything) inside this width i have two child divs one with fixed width say 50px and i want the other child div to take up the remaining (100%-50px) space can anyone tell me how do i achieve this please ....
I have done like
<div style="width:100%;min-height:90px;">
<div style="float:left;width:50px;height:60px;">
</div>
<div style="float:left;width:90%;height:60px;">
</div>
</div>
in this code if 50 px is not the 10% of screen the there are some left blank space which I do not want

jsFiddle
Only float the fixed width element.
CSS:
.container {
height: 10px;
width: 100%;
}
.right {
background: red;
height: 10px;
}
.left {
background: blue;
width: 50px;
height: 10px;
float: left;
}
HTML:
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>

You could use a table layout:
HTML:
<div class="container">
<div class="fixed-width"></div>
<div class="fluid-width"></div>
</div>
CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.fixed-width {
display: table-cell;
width: 50px;
}
.fluid-width {
display: table-cell;
}
http://jsfiddle.net/myajouri/zJq8N/
OR...
You could use width: calc(100% - 50px) which is not supported in IE8 and below.
.container {
width: 100%;
}
.fixed-width {
float: left;
width: 50px;
}
.fluid-width {
float: left;
width: calc(100% - 50px);
}
http://jsfiddle.net/myajouri/mTq6x/

CSS how to fill the entire width?

i already goggle but still don't know what to do
i have 3 div
<body>
<div id="container">
<div id="center"> <h1>center</h1> </div>
<div id="right"> <h1>right</h1> </div>
</div>
</body>
what i try to accomplish
div id=center is auto fill the width
div id=right is in right position of the div id=center, width=200px;
what i try so far
#center{
background-color: green;
float: left;
overflow: auto;
}
#right{
background-color: red;
float: right;
width: 200px;
}
How to make div id=center fill the entire width with another div (div id=right) in right position of it
jsfiddle
forgive my english

If you need a pure CSS Solution, than consider altering your DOM
Demo
First of all, remove float: left; property from #center, and than I've added width: auto; and overflow: hidden; properties which will make the columns independent.
Reference Code :
<div id="container">
<div id="right"></div>
<div id="center"></div>
</div>
#container {
height: auto;
overflow: hidden;
}
#center {
background-color: green;
width: auto;
height: 20px;
overflow: hidden;
}
#right {
background-color: red;
float: right;
height: 20px;
width: 200px;
}

Doesn't work that way - you need to nest the 'right' div inside of the 'center' div:
<body>
<div id="container">
<div id="center">
<h1>center</h1>
<div id="right">
<h1>right</h1>
</div>
</div>
</div>
</body>
Then make the h1 display inline:
h1 {
display: inline-block;
}
#center {
background-color: green;
float: left;
width: 100%;
}
#right {
background-color: red;
float: right;
width: 200px;
}
Here's an updated fiddle.

I got this from here and learnt a new/useful one.
The following solution will not affect your dom in making changes.
#center{
background-color: green;
float: left;
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
}
DEMO

Adding this separate since the other one may be useful to someone in the future. Here's the only CSS only solution I could come up with, but there's a caveat: you have to use percentage based widths on both divs:
#center {
background-color: green;
display: inline-block;
float: left;
width: 80%;
}
#right {
background-color: red;
float: left;
width: 20%;
}
20% should be close to what you need on the smaller div, and you can use media queries if necessary to keep it from being too wide on larger screens.
Here's an updated fiddle.

What can i do is customize your css :
#center{
background-color: green;
position : absolute;
width : 100%;
z-index : -1;
}
#center fill all the empty space between it and #right. but you have to notice it that the #center is behind the #right