Div Images Side by Side - html

Good morning, I am trying to put 2 images, side by side within a div.
I have tried float left and float right, but to no success.
It works on a separate HTML page, but not when I add it to my current page.
very strange, but a simple resolution, but cannot see it...
Thanks
#mikeimgs {
width:70%;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
}
.img1 {
margin-top:10px;
float:left;
}
.img2 {
margin-top:10px;
float:right;
}
<div id="mikeimgs" class="fluid">
<div class="fluid img1"><img src="file:///G-DRIVE mobile USB/STR Website/STRv1/August 2016/Mike-Vittiimg.jpg" alt="" width="200" height="200"/></div><div class="fluid img2"><img src="file:///G-DRIVE mobile USB/STR Website/STRv1/August 2016/Odyssey250.jpg" alt="" width="200" height="200"/></div>
</div>
` with the page i'm trying to create.

The div containing the image should not have fluid class, additionally you do not need float left and float right, they both will be float left.
#mikeimgs {
width:70%;
margin-top: 10px;
}
.img {
margin-top:10px;
float:left;
width:200px;
}
<div id="mikeimgs" class="fluid">
<div class="img"><img src="file:///G-DRIVE mobile USB/STR Website/STRv1/August 2016/Mike-Vittiimg.jpg" alt="" width="200" height="200"/></div><div class="img"><img src="file:///G-DRIVE mobile USB/STR Website/STRv1/August 2016/Odyssey250.jpg" alt="" width="200" height="200"/></div>
</div>

Your code as it stands seems to run fine here. However there's no CSS provided for the .fluid class. Is it possible that this class is overriding your expected outcome?

Related

HTML img won't resize with CSS, no matter what I try

I'm trying to update the front page of my companies website, but nothing appears to be working.
This is how the one part I need help with looks:
Images are wrongly sized, with or without the CSS. Image included here.
.homepageImage1{
}
.homepageImage1 p{
text-align:center;
position:relative;
}
.homepageImage1 img{
position:relative;
height:200px;
width:200px;
}
.homepageImage2{
}
.homepageImage2 p{
text-align:center;
position:relative;
}
.homepageImage2 img{
position:relative;
height:70px;
width:70px;
}
.homepageImage3{
}
.homepageImage3 p{
text-align:center;
position:relative;
}
.homepageImage3 img {
position:relative;
max-height:50px;
max-width:50px;
}
<div class="homepageImage1">
<p><img src="[the source]" /><br /><strong>Art Alexander</strong></p>
</div>
<div class="homepageImage2">
<p><img src="[the source]" /><br /><strong>Chuck Davidson</strong></p>
</div>
<div class="homepageImage3">
<p><img src="[the source]" /><br /><strong>Roger Miranda</strong></p>
</div>
It looks correct, but there is a small problem. I can remove the CSS entirely. The images remain the exact same. I input the CSS, and the images remain the exact same.
Keep in mind each image has much larger dimensions than what is being shown.
It worked fine in previous front page adjustments.
How do I fix this?
Are you sure your images are large enough? They won't stretch to be larger with your setup.
Here is an example of how I would go about it. When creating a targeted example for a StackOverflow question, leave out anything that isn't necessary for the particular problem - such as your paragraph css. Also, creating a jsFiddle can often help you solve the problem yourself - or reveal that the issue may be somewhere else in your code. : )
https://jsfiddle.net/sheriffderek/wuewmcaL/
markup
<div class="image-w avatar">
<img src="https://placehold.it/800" alt="">
</div>
<div class="image-w avatar small">
<img src="https://placehold.it/800" alt="">
</div>
<div class="image-w avatar medium">
<img src="https://placehold.it/800" alt="">
</div>
styles
.image-w img { /* let img respond to parent size */
display: block;
width: 100%;
height: auto;
}
.avatar {
max-width: 200px;
border-radius: 50%;
overflow: hidden;
}
.avatar.small {
max-width: 80px;
}
.avatar.medium {
max-width: 120px;
}

Align divs Horizontally with image size fixed. (Horizontal Scroll bar may come)

I've two divs. It contains two chart with width 800px and height 400px each. I want them horizontally aligned.
Also, they shouldn't change there alignment or image size if monitor/browser size changes. Automatic horizontal scroll bar (or vertical if required) should come.
I've tried many options but couldn't get what I am looking for. :(
<style type="text/css">
#container{
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
#left{
display:inline-block;
width:50%;
margin:0;
}
#right{
display:inline-block;
width:50%;
text-wrap:none;
}
This is the latest version of CSS I tried.
From what I understand, this should satisfy what you're looking for. Here's a working example in JSFiddle. I've added notes to the CSS to describe how I got it to work.
#container{
/* Since you know the width of the images, we can set
the container width. This will force the browser to
draw a horizontal scrollbar when the width is too small */
width: 1600px;
/* This is a little trick to make the container as large
as the elements inside it, even though they are set to
float: left */
overflow: hidden;
}
#left,
#right{
/* display: inline-block does not work because is adds space
around each element, making them wider than the container and
forcing the second image down below the first, so we can use
float: left instead */
float: left;
width: 50%;
}
<div id="container">
<div id="left"><img src="http://placehold.it/800x400" /></div>
<div id="right"><img src="http://placehold.it/800x400/444444" /></div>
</div>
display:flex and margin will do the trick here. And remove width:50%; if do not want to change image size.
Check following: Here i change image size to display properly.
#container {
display: flex;
font-size: 28px;
height: 100%;
text-align: center;
width: 100%;
}
#container > div {
margin: 0 5px;
}
img{
width:400px;
height:200px;
}
<div id="container">
<div id="left"><img src="http://placehold.it/100x100" /></div>
<div id="right"><img src="http://placehold.it/100x100" /></div>
</div>
Working Fiddle
Display inline-block will work, here is an example: https://jsfiddle.net/w913sbro/
You can also try adding this to your #container:
display:flex;
as by default flex will align in row style.(horizontal).
Would be great if you could show us what you have tried. Anyways I hope this is what you are expecting. demo here
<div class="row">
<div class="container">
<div id="1" class="box left">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
<div id="1" class="box right">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
</div>
</div>

html fitting text in between two images that resize

Basically I want the text to always be centered in the middle. With one image on either side that resize depending on how large the page is to take up all the white space. This is what I have so far.
<div style="text-align:center;">
<img style="float: left; width: 33%; margin:20px 0 0 0;" src="img/pulse.gif"/>
<img style="float: right; width: 33%; margin:20px 0 0 0;" src="img/pulseR.gif"/>
<h1 style="display:inline; vertical-align: middle; text-align: center; width: 33%;">Safety</h1>
</div>
I would like to remove the width: 33% and for the images to resize to fit the space. Keep in mind it needs to be forced to stay on one line.
Thanks
You can use table and table-cell for display, or just classic html table.
There is example using table and table-cell for display (there is added extra divs for images and header) :
.container
{
width:100%;
display:table;
margin-top:20px;
}
.container div
{
display:table-cell;
text-align:center;
vertical-align:top;
}
.container img
{
width:100%;
height:100%;
}
<div class="container">
<div><img src="http://placehold.it/350x350"/></div>
<div><h1>Safety</h1></div>
<div><img src="http://placehold.it/350x350"/></div>
</div>
You can wrap images inside div containers like this:
<div style="text-align:center;">
<div class="left"> <img src="img/pulse.gif"/></div>
<h1>Safety</h1>
<div class="right">
<img src="src="img/pulseR.gif"/></div>
https://jsfiddle.net/uv85304v/

Bootstrap: How can set an image on another image

In my page i have 2 images that i want show one of them on the another one, this is my code, how can i set images:
<div class="profile-image img-responsive">
<img src="images/pro.png"/>
<img src="images/2.png" class="img-circle">
</div>
JSFIDDLE
I want to set 2.png onto the left and bottom pro.png like this:
How can I do this?
The following code will display the second image over the first image. All the images and the image panel are responsive.
1.CSS
.profile-img {
width: 100%;
position: relative;
}
.img-responsive {
max-width:100%;
height:auto;
}
.img-circle {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
2.HTML
<div class="profile-img">
<img class="img-responsive" src="images/pro.png" />
<img class="img-circle img-responsive" src="images/2.png" />
</div>
#bnuhero's answer is very good, and I would change it just a little.
First, basing off the jsfiddle, encapsulate the two images in a relative div. This will allow the image placed on top, when defined as "absolute" to be placed relative to the parent div, rather than relative to the entire window.
<div class="header-image">
<div class="profile-image" style="margin: 50px auto;">
<img src="http://s9.postimg.org/41fwo4k4v/pro.png" class="img-responsive"/>
<img src="http://s24.postimg.org/on764040x/image.png" class="img-circle img-responsive img-on-top">
</div>
</div>
</div>
Next, make a rule to define the realtive div. And make an additional class or id to target the image to be placed on top. Writing the rules with the same 'img-circle' class will interfere with the default 'img-circle' rules setup by Bootstrap
.header-image {
position:relative;
}
.img-on-top {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
Updated jsfiddle at http://jsfiddle.net/Bavc_Am/jG9bP/1/
Update your css to this
.img-circle {
border-radius: 50%;
position: relative;
top: -69px;
left: 10px;
}

make a div grow and shrink based on the browser window size

I am making a very simple html page and would like to know how to do the following two things for my page:
I have a container div and would like to put the container div in the center of the page.
The container div will grow and shrink when I resize the windows size.
I wrote the attached code but the container is always sticked on the left and it won't change the size when I resize the window.
<title>Demo</title>
<head>This is a demo</head>
<style>
#nav
{
background-color: red;
float: left;
width: 200px;
position:relative;
}
#detail
{
background-color: green;
float : right;
width: 800px;
position:relative;
}
div.testDetail
{
margin-top:10px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
}
#container
{
width:1000px;
position:relative;
}
</style>
<hr>
<body>
<div id="container">
<div id="nav">
<ul>Tests</ul>
</div>
<div id="detail">
<div class="testDetail">
<image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
<image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
<image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
<image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
<h3>Title</h3>
<p>Testing</p>
</div>
<hr>
</div>
</div>
<body>
Did I miss something here? Any help will be appreciate!
Thanks.
<div id="my-div">
...content goes here
</div>
CSS
#my-div{
//For center align
margin: 0 auto;
// For grow & shrink as per screen size change values as per your requirements
width: 80%;
height: 50%;
}
A shorthand method of Matt's CSS to do the horizontal centering is
margin: 0 auto;
The 0 will dictate the top and bottom margin's and the auto the left and right margins. If you want a margin on the top/bottom you can change the 0 to anything you want(ie margin: 20px auto; .
The best way to center an object, especially a <div>, is to use the following CSS:
margin-left: auto;
margin-right: auto;
Without a fixed margin, the object will be centered.
For the resizing, make sizes relative (e.g. 40%) to the page rather than absolute (e.g. 400px).