Ubaid Rehman Ubaid Rehman - 23 days ago 12
CSS Question

css how to depend one div to another one in auto adjusting width

I am using Google maps to show on my website, the problem is currently the map has CSS property FIXED while on the left Side I have a form for reservation, the problem I am encountering is, I don't want my map to be 100% also behind the form I want my google map to start beside the form, for that I have created a dummy div to be exact pixel as form and try to float left the form but I don't know why google map is considering 100% width as full page let me share the code so guys better understand,

This is mega div I created

div#mapcontainermega {
height: 100%;
position: fixed !important;
left: 0;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
}


inside this div there are two div the form div that is exact pixel of the form width

div#mapcenterdiv {
width: 565px;
height: 100%;
float: left;
}


and then the map div inside which google map is located,

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


now the problem is when I try to decrease the width to 40% it start showing along with the form, but then on different screen sizes bigger there is a clear blank space appearing on the right side ? how can I make it responsive so that the clear space doesn't show up ?

refer to this image for better understanding

Answer

If you do not want the width of the map 100% & dynamically guess the width then use calc() function of CSS

div#mapmap {
    width: calc(100% - 565px);
    height: 100%;
    float: left;
}

I would still suggest giving a % width to your form rather than px, then just split the width between the 2 children divs

Read about it - https://developer.mozilla.org/en/docs/Web/CSS/calc