First time trying to do any coding, and was not sure how to make my question presentable without using entire code in jsfiddle.
the html:
<div class="gridContainer clearfix">
<div id="header">
<p id="headtitle">
<button id="switch">Header Button to close Menu</button>
</p>
</div>
<div id="sidebar" class="ui-accordion" style="">
the js:
$(document).ready(function(){
$("#switch")
.button()
.click(function(){
$("#sidebar").toggle("slide");
});
});
the css:
#sidebar {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
}
#map {
clear: none;
float: left;
margin-left: 1.0989%;
width: 66.3003%;
display: block;
}
my jsfiddle
when site is in pc mode/larger screen, the sidemenu is to the left of the image. Yet when collapsed, i want the image to fill the entire screen. Did i use the wrong way of collapsing the sidemenu so that the image (map) will fill the screen? My image is just shifting left, instead of resizing how i would like it to.
after looking at the slide in dw, i realized since im using fluid grid layout, that my map div is set at 66.3003%, hence it is not changing to 100%. Is it possible to change the css of the div to 100%? I would still want the layout to remain fluid, so an actual px size wouldn't work i believe.
