Something like this? <!doctype html> <head>
<link rel="stylesheet" href=" http://twitter.github.com/bootstrap/assets/css/bootstrap.css";> <link rel="stylesheet" href=" http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css";> </head> <style> body{ padding-top: 60px;max-height:100%; overflow:hidden;} .container-fluid{padding-right:0px;} /*makes map stretch all the way to the right side */ .map{overflow:hidden;} iframe {width:100%;height:100%; position: absolute; } .scrollable{overflow-y: scroll;height:300px;} </style> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span3"> <div class="well sidebar-nav scrollable"> <h2>Scrollable Side Bar</h2> <ul> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> <li><a href="#">Link number #</a></li> </ul> </div> </div> <div class="span9"> <div class="map"> <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=" https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=palm+dubai+jumeirah+atlantis&aq=&sll=25.185952,55.218442&sspn=0.249168,0.32547&ie=UTF8&hq=palm+dubai+jumeirah+atlantis&hnear=&ll=25.1305,55.1172&spn=0.249168,0.32547&t=m&z=12&iwloc=A&cid=402045504285854405&output=embed";></iframe><br /><small><a href=" https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=palm+dubai+jumeirah+atlantis&aq=&sll=25.185952,55.218442&sspn=0.249168,0.32547&ie=UTF8&hq=palm+dubai+jumeirah+atlantis&hnear=&ll=25.1305,55.1172&spn=0.249168,0.32547&t=m&z=12&iwloc=A&cid=402045504285854405"; style="color:#0000FF;text-align:left">View Larger Map</a></small> </div> </div> </div> </div> </body> </html> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936 On 4 July 2012 14:47, Alexey Zakharov <[email protected]> wrote: > I need scrollable sidebar and map that will be stretched to available > space. > > > On Monday, July 2, 2012 2:54:24 PM UTC+6, Phil Doughty wrote: >> >> Is this what you are thing about? >> <!doctype html> >> <head> >> >> <link rel="stylesheet" href="http://twitter.github.** >> com/bootstrap/assets/css/**bootstrap.css<http://twitter.github.com/bootstrap/assets/css/bootstrap.css> >> "> >> <link rel="stylesheet" href="http://twitter.github.** >> com/bootstrap/assets/css/**bootstrap-responsive.css<http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css> >> "> >> </head> >> >> <style> >> body{ padding-top: 60px;} >> >> div.well iframe >> { max-height: 100%; >> max-width: 100%; >> overflow:hidden; } >> </style> >> >> >> <body> >> <div class="navbar navbar-fixed-top"> >> <div class="navbar-inner"> >> <div class="container-fluid"> >> <a class="btn btn-navbar" data-toggle="collapse" >> data-target=".nav-collapse"> >> <span class="icon-bar"></span> >> <span class="icon-bar"></span> >> <span class="icon-bar"></span> >> </a> >> <a class="brand" href="#">Project name</a> >> </div> >> </div> >> </div> >> >> >> <div class="container-fluid"> >> <div class="row-fluid"> >> <div class="span3"> >> <div class="well sidebar-nav"> >> <p>Side Bar Stuff</p> >> </div> >> </div> >> <div id id="theMap" class="span9"> >> <div class="well"> >> <iframe width="1600" height="900" frameborder="0" >> scrolling="no" marginheight="0" marginwidth="0" src=" >> https://maps.google.com/**maps?f=q&source=s_q&** >> hl=en&geocode=&q=palm+**dubai+jumeirah+atlantis&** >> aq=&sll=25.185952,55.**218442&sspn=0.249168,0.** >> 32547&ie=UTF8&hq=palm+**dubai+jumeirah+atlantis&** >> hnear=&ll=25.1305,55.1172&**amp;spn=0.249168,0.32547&** >> t=m&z=12&iwloc=A&**cid=402045504285854405&**output=embed<https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=palm+dubai+jumeirah+atlantis&aq=&sll=25.185952,55.218442&sspn=0.249168,0.32547&ie=UTF8&hq=palm+dubai+jumeirah+atlantis&hnear=&ll=25.1305,55.1172&spn=0.249168,0.32547&t=m&z=12&iwloc=A&cid=402045504285854405&output=embed>"></iframe><br >> /><small><a href="https://maps.google.com/** >> maps?f=q&source=embed&**hl=en&geocode=&q=palm+** >> dubai+jumeirah+atlantis&**aq=&sll=25.185952,55.** >> 218442&sspn=0.249168,0.**32547&ie=UTF8&hq=palm+** >> dubai+jumeirah+atlantis&**hnear=&ll=25.1305,55.1172&** >> amp;spn=0.249168,0.32547&**t=m&z=12&iwloc=A&** >> cid=402045504285854405<https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=palm+dubai+jumeirah+atlantis&aq=&sll=25.185952,55.218442&sspn=0.249168,0.32547&ie=UTF8&hq=palm+dubai+jumeirah+atlantis&hnear=&ll=25.1305,55.1172&spn=0.249168,0.32547&t=m&z=12&iwloc=A&cid=402045504285854405>" >> style="color:#0000FF;text-**align:left">View Larger Map</a></small> >> </div> >> </div> >> </div> >> </div> >> >> </body> >> </html> >> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936 >> On 2 July 2012 11:59, Phil Doughty <[email protected]> wrote: >> >>> Sorry, that was a very general answer. >>> Which part/s of google maps did you want? >>> >>> >>> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936 >>> >>> On 2 July 2012 11:37, Phil Doughty <[email protected]> wrote: >>> >>>> Google maps is a very similar layout to http://twitter.github.com/** >>>> bootstrap/examples/fluid.html<http://twitter.github.com/bootstrap/examples/fluid.html> >>>> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936 >>>> >>>> >>>> >>>> >>>> >>>> On 2 July 2012 08:27, Alexey Zakharov <[email protected]>wrote: >>>> >>>>> How can I build layout similar to google maps with bootstrap fluid >>>>> layout? >>>>> >>>>> -- >>>>> Alexey >>>>> >>>> >>>> >>> >>
