I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}
Related
I'm trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser.
I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....
The html:
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
The css:
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
.itemwrapper {
display: inline;
}
img {
max-width: 100%;
height: auto;
}
use display table to set it side by side and keep it side by side and responsive.
display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;
this will not only keep them the same width but also keep the containers the same height.
vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.
Any questions just fire away.
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
#outer {
display: table;
width: 100%;
table-layout: fixed;
}
.itemwrapper {
display: table-cell;
vertical-align: top;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
if image are same size or same ratio, you may use flex , width and min-width to set a break point:
#outer {
width:70%;/* demo*/
margin:auto;/* demo*/
display:flex;
flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
width:100%;
min-width:200px;/* demo*/
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
remove or reset to your needs the rules commented with demo.
Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer {
position: relative;
width: 50%;
height: 0;
margin: 30px auto 0 auto;
padding-top: 25%;
background-color: #999;
}
.itemwrapper {
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.item2 {
left: 50%;
}
#outer img {
height: 100%;
max-width: 100%;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper item2">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.
I've got a problem with my HW. I cant align 2 elements on the left side https://jsfiddle.net/tkjxLfjy/ This is the code and i tried things like float:left but didn't work... So can you help me to put the meter and the text under the picture (the black sqare)?
According to w3school:
Elements after a floating element will flow around it. To avoid this,
use the clear property.
Add Clear:both to the div. The image has float:left so the next elements sit behind that.
Jsfiddle
figure div
{
clear: both;
}
You can remove float:left and add display: block to the image
Basically display: block reserve the whole line for the element, so that no other element set beside it, unless it's positioned.
Here is a fiddle
You should try like like this-
.clr{
clear:both
}
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
}
.header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
figure{
float: left;
}
img {
width: 150px;
height: 150px;
background: black;
}
meter {
width: 90px;
}
.meter-col{
float: left;
}
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
</figure>
<div class="meter-col">
<div>Profile completed: 60%</div>
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
<div class="clr"></div>
</div>
May it will helps you.
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<div>
Profile completed: 60%
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
</figure>
</div>
No need of other changing 'cause the tag has a default "block" behavior.
I changed a few things around. I also updated a few things to HTML5 (preferred). I changed everything to display block and changed the div that all of that lives in to float: left. JS fiddle link below.
https://jsfiddle.net/tkjxLfjy/6/
HTML:
<body>
<div id="container">
<header>
<h2>Profile</h2>
</header>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<label for="meter">Profile completed: 60%</label>
<meter name="meter" value="60" min="0" max="100">2 out of 10</meter>
</figure>
</div>
</body>
CSS:
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
float: left;
}
header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
img {
width: 150px;
height: 150px;
background: black;
display: block;
}
meter {
float: left;
width: 90px;
}
I am trying to get my Div to be centered in the page, however I cannot get it to work properly.
Despite using Margin-left: auto and Margin-Right:auto it still doesn't center in the middle of the page.
Any help would be appreciated!
HTML:
<div class="OuterService">
<div class="service">
<div class="virus" style="width:250px; height:218px;">
<center><h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="virus.jpg" alt="virus" height="140px"/></center>
</div>
<div class="screenRepair" style="width:250px;">
<center><h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="smashedScreen.jpg" alt="BrokenScreen" height="160px"/></center>
</div>
<div class="hardwareRepair" style="height:218px;">
<center><h3>Hardware Replacement</h3>
<img src="hardwareRepair.jpg" alt="hardwareRepair" height="130px"/></center>
</div>
<div class="WindowsReinstall" style="height:218px;">
<center>
<h3>OS Reinstallation</h3>
<img src="windowsInstall.jpg" alt="OS Reinstallation" height="150px;" width="220px;"/>
</center>
</div>
<div class="maintenance" style="width:250px;">
<center>
<h3>System Maintenance</h3>
<img src="SystemMaintenance.jpeg" alt="System Maintenance" height=150px;/>
</center>
</div>
<div class="SoftwareRepair" style="width:250px">
<center>
<h3>Software Repair</h3>
<img src="SoftwareRepair.png" alt="Software Repair" height="150px;" width="220px;"/>
</center>
</div>
<div class="MemoryUpgrades" style="width:250px; height:208px;">
<center>
<h3>Memory Upgrades</h3>
<img src="MemoryUpgrades.jpg" alt="Memory Upgrades" height="140px;"/>
</center>
</div>
<div class="DataRecovery" style="width:250px;">
<center>
<h3>Data Recovery</h3>
<img src="DataRecovery.jpg" alt="Data Recovery" height="150px;"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: auto;
margin-left: auto;
margin-right: auto;
}
.service {
max-width: 1100px;
display: table;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width:250px;
float:left;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border:1px solid #000;
}
You need to specify a width for your class outerService
.outerService
{
width: 70%;
margin-left: auto;
margin-right: auto;
}
Also, if you want outerService to not specify a size you can use flexbox. Assuming that the container of outerService is the body..
body
{
display: flex;
justify-content: center;
}
.outerService
{
width: auto;
}
Flex is currently supported on all major browsers in their current versions but if you're supporting older versions, look here.
Your class name in your HTML uses a capital O for OuterService
Your CSS uses a lower case o for outerService .outerService
Try changing to
.OuterService {
width: auto;
margin-left: auto;
margin-right: auto;
}
For some divs, you have to make the div width fixed at certain px. Try this:
.outerService {
width: 850px;
margin:0 auto;
}
If you want your div to change dynamically under certain screen size you can try the media query to make width with a percentage value.
I've been trying to get this image centered in the page for a while, and for some reason margin-left: auto; margin-right: auto; weren't doing anything. So in the spirit of wildly trying everything in sight, I stumbled on the following surprisingly correct result. My question is, why on earth does setting the width to 25% work? I would have expected 100%, or 50% at least.
This fiddle shows some other widths, which apparently behave in a nonlinear fashion: http://jsfiddle.net/mo85kkvv/
(Bonus question: is there a super-obvious way to use the margin-left/right properties instead that I'm missing?)
HTML:
<body>
<div id="bcontainer">
<img src="banner.png" alt="banner" />
</div>
</body>
CSS:
body {
margin: 0;
}
#bcontainer {
width: 25%; /* why 25%?? */
height: 50px;
display: table-cell;
text-align: center;
}
I don't know a lot about HTML but I think that the proper way to define the class container is:
.container {
height: auto;
display: block;
margin:auto;
}
This is more generic. You can use the element inspector, and see how the layers change.
Is what your after ? http://jsfiddle.net/mo85kkvv/4/
HTML
<body>
<div class="container" id="one">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="two">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="three">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="four">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div>
</body>
CSS
body {
}
.container img{
width:100%;
display: inline;
text-align: center;
margin: 0 auto;
}
#one {
width: 25%;
margin: 0 auto;
}
#two {
width: 50%;
margin: 0 auto;
}
#three {
width: 75%;
margin: 0 auto;
}
#four {
width: 100%;
margin: 0 auto;
}
It all depends what you want. Do you want the wrapper to be centered with the image floating in the center, or do you want the wrapper (in this case .container) to shrink around the image and be the one that floats in the center? I have updated your fiddle with simple examples of a few options.
http://jsfiddle.net/mo85kkvv/6/
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/