Fit two divs

Question

Fit two divs

Navigation

#1 by (0 votes)
#2 by (-1 votes)

1

Good, I need guidance to make a Flickr gallery and a Google Maps map fit on one page.

I need the left half of the page to show the gallery and the right half of the Google Maps map.

The HTML code that I am using the following:

    <title>Search results</title>

<fieldset id="googlemaps">
    <legend>
        Google Maps search for the location
        <c:out value="${param.searchQuery}" />
    </legend>


    <div id="map"></div>
    <script>
  function initMap() {
    var uluru = {lat: ${lat}, lng: ${lng}};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMPX-BlAy9WQULw6ghUPdinLeGACrjA70&callback=initMap">
</script>


</fieldset>

<fieldset id="flickr">
    <legend>
        Flickr search for the location
        <c:out value="${param.searchQuery}" />
    </legend>

    <c:forEach items="${requestScope.photos.photo}" var="photo">
        <img
            src='http://farm<c:out value="${photo.farm}"/>.staticflickr.com/<c:out value="${photo.server}"/>/<c:out value="${photo.id}"/>_<c:out value="${photo.secret}"/>.jpg' />
        <br />
        <form action="/facebookPostCreation" method="post">


            <textarea hidden="" name="message">I just liked a Flickr photo via Project TOROID. See it on http://farm<c:out
                    value="${photo.farm}" />.staticflickr.com/<c:out
                    value="${photo.server}" />/<c:out value="${photo.id}" />_<c:out
                    value="${photo.secret}" />.jpg</textarea>
            <br>
            <div class="bottom_links">
                <button type="submit" class="button">Post in Facebook</button>
                <button type="button"
                    onClick="javascript:window.location.href='index.html'"
                    class="button">Cancel</button>
            </div>
        </form>
    </c:forEach>
</fieldset>

html css facebook api

asked by Josh Beausoleil 20.05.2017 в 15:27

source

2 answers

-1

You can use bootstrap , so not only do you get what you want but also you will responsive and it will look good on any device and the div of the gallery you give 6 columns and the div where the map is you give 6 columns also

<div class="row">
<div id="galería" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      ....
</div>
<div id="mapa" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      ....
</div>
</div>

On the bootstrap page there is a lot of introductory material that will be useful to you. I leave the Link: link

answered by 20.05.2017 в 16:01

How to prevent the text of a ListView from leaving the frame? date format when exporting to excel changes

score 0 · Accepted Answer

It's easy, I recommend you take this tutorial from flexbox = > Guide to Flexbox

Actually I recommend this Web page as a very good source of CSS learning that will get you out of more than one hurry, but now we're going with your problem.

First of all, create a div that we will use as a main container that will encapsulate all the html code that you have put, you can put the class name you want to access it using CSS , I put "flexbox" (that original) and within the create two more divs strong> to represent each of the columns, where each encapsulates your fieldset tags (that is, one will encapsulate your Flicker gallery and the other your Map)

I've tried it on JSBIN.COM and it works correctly in your code.

.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}

.flexbox > div {
width: 50%;
padding: 10px;
}

.flexbox > div:first-child {
margin-right: 20px;
}

As you have answered above, a framework such as Bootstrap, Foundation, Materialize ... can help you lay out the elements of your web page very easily with your systems. grillas which are all very similar (not to say the same)

Greetings!