CODEWITHSUNDEEP
htmlcss
user3670128
user3670128

Reputation: 47

min-width and position fixed not working

I have two columns where the left one has a dynamic width, and the right one has a google map with position: fixed.

The left column has a min-width value and when the window is resized, it does not work.

Here is a jsfiddle: http://jsfiddle.net/WWLd9/61/

HTML:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<section id="panel_contenedor">
</section>
<section id="mapa_contenedor">
<div id="map-canvas"></div>
</section>

CSS:

#panel_contenedor {
width: 50%;
min-width:300px;
}
#mapa_contenedor {
width:50%;
height:100%;
position:fixed;
top:0;
right:0;
}
#map-canvas {
height:100%;
width:100%;
}

Upvotes: 1

Views: 3125

Answers (1)

Freelex
Freelex

Reputation: 186

I added a min-width:50%; to the #left section and change min-width:200px; to min-width:50%; to the #right. It seems that, in all case, both section adjusts accordingly and the blue section doesn't hide the red anymore.

Edit:

position:fixed is relative to the html element of the DOM. That's the reason why you're seeing the map even if the min-width was set to 300px.

To fix it, here's what I tried:

I replace the google map with an Iframe (you can always set it up like you want).

HTML:

<div id="main">
    <section id="panel_contenedor">
        todo texto bien elaborado ha de presentar siete características:<br><br><br><br>Ha de ser coherente, <br><br><br><br>es decir, centrarse en un solo tema, de forma que las diversas ideas<br><br><br><br> vertidas en él han de contribuir a la creación de una idea global.
    </section>
    <section id="mapa_contenedor">
        <iframe width="600" height="300" marginheight="0" 
        src="http://maps.google.com/maps?ie=UTF8&amp;q=loc:{address} {number}@{latitude},{longitude}&amp;z=14&amp;output=embed&amp;iwloc=near" 
        frameborder="0" marginwidth="0" scrolling="no">
        </iframe>
    </section>
</div>

CSS: 

#panel_contenedor {
    width: 50%;
    min-width:300px;
    float:left;
}

#mapa_contenedor {
    max-width:50%;
    height:100%;
    float:right;
}

#map-canvas {
    height:100%;
    width:100%;
}

#main{
    width: 100%;
}

body{
    display:inline-block;
    /*overflow-x:hidden;*/
}

I've put in comment /*overflow-x:hidden;*/. It only adds a scroll bar if you need one when the window is reduced. The display:inline-block; show both sections on the same line. We just need to add a float:left to the left section and a float:right to the right section. I've put them in a #main container to adjust the size to the full window.

Upvotes: 1

Related Questions