css - Unexpected behavior changing inline-block and float with media query -


i'm creating responsive page 3 elements. left 2 elements set display:inline-block they'll appear side-by-side. third element set float:right align right side of page instead of being inline other 2 elements. have css media query makes 3 elements display vertically when window less 600px wide.

when shrink window smaller 600px , stretch out wide again, third element not display @ top of page. floats right side of page, there space @ top if it's placed below other 2 elements.

i see behavior on mac in chrome 43 , safari 7.1.6, not in firefox 38.0.5.

why happen?
there remedy?

i realize there other ways structure layout avoid issue. i'm more interested in why behavior occurs in alternate methods, since seems happen in specific browsers.

here's illustration of issue:

enter image description here

please see demonstration below. use "full page" button can resize window test media query.

div#image {    display: inline-block;    vertical-align: middle;    width: 30%;  }  div#image img {    max-width: 100%;  }  div#caption {    display: inline-block;    width: 20%;  }  div#text {    float: right;    width: 30%;  }  div#text p {    margin: 0 0 1em;  }    @media screen , (max-width: 600px) {        div#image,    div#caption {      display: block;      width: auto;    }    div#text {      float: none;      width: auto;    }      }
<div id="image">    <img src="http://lorempixel.com/400/300/abstract/3/" alt="">  </div>  <div id="caption">    caption goes here.  </div>    <div id="text">    <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. nullam sit amet enim. suspendisse id velit vitae ligula volutpat condimentum. aliquam erat.</p>    <p>sed quis velit. nulla facilisi. nulla libero. vivamus pharetra posuere sapien. nam consectetuer. sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. donec porttitor ligula eu dolor.</p>    <p>proin @ eros non eros adipiscing mollis. donec semper turpis sed diam. sed consequat ligula nec tortor. integer eget sem.</p>  </div>

it's because of float:none - reason* remains stuck when stretch - don't use , you'll fine. div staying floated in column won't make difference anyway.

*(i suspect browsers may choose ignore reverting rules in case save on resources, since sort of resizing done developers testing purposes , not regular users - it's speculation)


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more