Develop Reference

Formula to set max-width of a div depending on the original dimension of an image within it?

how can I come up with a formula for the max-width of a div depending on the original width of the image inside it? Below is a sample code from Medium.com which adjusts the logo max-width. The goal is to make the max-width wider as the original image width/height gets smaller. Thank you!
<div class="" style="max-width: 246px;">
<div class="">
<div style="padding-bottom: 57.00712589073634%"></div>
<img class="" src="https://cdn-images-1.medium.com/max/492/1*xXpHjKPcR7oYu8NRqGlO8w#2x.jpeg" data-width="1684" data-height="960">
</div>
</div>

I think you should set the image max width as well as the div and you may also use the #media on bootstrap, so that the divs and images will be scalable on different screen resolution such as tablet, desktop and on mobiles.

How to auto re-size the bootstrap column width based on data inside

Hi I have 3 divs inside my row class.
<div class="row">
<div class="col-3">some content</div>
<div class="col-9">
<div class="col-4">
<div class="col-12">
<div class="col-6">conetnt</div>
<div class="col-6">conetnt</div>
</div>
</div>
<div class="col-8"> content </div>
</div>
</div>
How can I modify this HTML so that, all the content inside floats right and auto adjust its width based on the content? Now the width is fixed, so even if the data in my 3rd div very little it still consumes loads of space. Any idea guys? bit newbie to CSS

Solution :
If your content is occupying space less than width of your bootstrap column. You better put it without bootstrap column classes and give it simply float:left to your content inside the simple div.
It will automatically be resized according to your content. You may need to give display:inline to your div to display that div inline.
Update :
You can use flexbox. display: flex to container and can use flex-direction attribute according to your need.
Reference :
First you need to study the behavior of bootstrap grid systems. This official bootstrap documentation is all about grid system of bootstrap (Latest version).
https://getbootstrap.com/docs/4.0/layout/grid/
It will help you to understand content management inside bootstrap rows and columns.

You can use float: right to move content on right and try using display: table
Have a look here: https://v4-alpha.getbootstrap.com/layout/grid/

Display three divs by order absolute than fixed than relative

I have some problems when rendering on only app(iOS) NOT website:
I have to use pure Javascript without any other libraries.
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" style="position:relative">
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
The Cover div didn't display overlapping Header. What can I do to that?
I want that initially user will see Cover first, then scroll up then see fixed Header and eventually Content.
I dont want to change the HTML, because when I put header in content div, header usually jumps and take moment to back the correct position when scrolling content div.
Thanks for any help!

Give #content a z-index property, too. Say, 100.
The problem looks like z-index context. z-index is not a global value - it is relative to it's parent. You have #header with z-index:99, and it's sibling #content with z-index:auto(say 1 for argument's sake). #header always overlaps #content, and its children.

You are using absolute property to cover class, relative to content className that means, it position will change according to content class. Remove relative property to content class, add wrapeer to all header and content className.
<div style="position:relative">
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" >
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
</div>

how to make an element padded to set the other element's, besides it, text visible completley on overflow in html

I have used float and made 3 divs floated, left, right and center. Left one and right one have images, Where as center one has text in it. But, when the center div's text is overflowed, it's text is displayed below. For example, I have programmed my html file based on my laptop browser. I have used padding so that the text will be fit exactly in between those 2 images. But when I have opened the same html file in my mobile, which has less pixels, the text has been displayed in 2 lines.
Now, my problem is that, I want to make the text fixed in between those 2 images no matter in which device or browser the file is opened. How can I do that?
Here is my code:
<header>
<div style="float:left;padding-left:24%">
<img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
</div>
<div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
<div style="float:center;padding-top:1%">
<h1>Welcome to AHK Organization</h1>
</div>
</header>
I do not have any fixed tags as of in:
How can I make an element on a webpage fixed BUT relative to another element?
The solution over there says to fix the center and make left and right tags relative to the center tag. I don't want to fix any tag.

try this fiddle use display:inline-block rather than float
<header>
<div style="display:inline-block;width:25%;">
<img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
</div>
<div style="display:inline-block;width:44%;">
<h1>Welcome to AHK Organization</h1>
</div>
<div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>

vertically positioning content after div transform

I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it either:
Pushes the content way above top of the div (cutting off content on scale in)
Pushes the content way too far down the container (leaving a lot of white space on scale out)
I've tried to call this snippet on DOM ready
$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });
but this only works at specific heights. I was wondering if there was anyway that I can push content to the top of the div even if my container changes heights.
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
Here is a detailed picture of what I am trying to achieve.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});

I believe what you are looking for is transform-origin
http://css-tricks.com/almanac/properties/t/transform-origin/
This will enable you to set the point on your element that will stay put as transforms occur. By setting the transform-origin to the top center: you can scale the element and keep its position relative to the top in the same place.

This worked for me! I don't know much about this transform.js plugin, but the property you want to look at is "transform-origin". Your issue is that it's scaling #zoomMe from the center, making your post-transform content 25% offset from the top and bottom.
CSS
#zoomMe {
transform-origin:center top;
-webkit-transform-origin:center top;
}