I am struggling trying to get the text to sit next to the image, its just not happening, please can some one explain what im doing wrong here? much appreciated!
.alignright {
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
Try using tags instead of div with display:initial in all 3 tags (img, h1, h2) and in h1 and h2 span tag set the float property to right or left.
Just corrected what was needed :
(click on full page in code snippet or else you will not see the difference with your own result)
.wrap {
width: 40%;
margin-left: 2%;
}
.alignright {
display: inline;
}
.source {
float: left;
overflow: hidden;
width: 20%;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin: 25px;
display: inline;
}
<div class="wrap">
<div class="source">
<img src="../image/recomendbutton.jpg">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
.alignright {
margin-top:-40px;
width: 77%;
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150"><span>
</div>
<h1 class="alignright">Recommendations?</h1></span>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
Related
I have 2 columns and a footer. One of the columns is much smaller in content than the other, but I need them to match so both of their background colors run all the way to the footer. It isn't a problem for the larger one, but not the other.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: left;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
}
.cf {
clear:both
}
/*clearfix hack*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>
Make the midden container a flexbox container
.midden { display: flex;}
You can either flex the midden div. OR, if you want to preserve your HTML structure, you can set fixed heights on both of your children. See the CSS changes I made below.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: right;
height: 150px;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
height: 150px;
}
.cf {
clear:both
}
.container {
height: 100vh;
width: 100%;
}
<div class="container">
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>
I'm trying to specify content specifically somewhere on the page, How can i do this so that it'll always be in the exact same spot even when screen size changes?
jsfiddle = https://jsfiddle.net/4pkgfgwh/1/
<div class="container">
<img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
.container {
text-align: center;
}
.display {
position:absolute;
TOP:45px;
LEFT:350px;
}
Use position: relative on the parent container:
HTML
<div class="container">
<div class="image-container">
<img src="http://i.imgur.com/iGIFvH6.png">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
text-align: center;
}
.image-container {
display: inline-block;
position: relative;
width: 354px;
height: 228px;
}
.container img {
width: 100%;
}
.display {
position: absolute;
top: 10px;
left: 200px;
}
JSFiddle demo: https://jsfiddle.net/ompfnjc5/2/
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img img {
float:left;
height: 4.3vw;
}
#logo-text {
float:left;
font-size:2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
I've tried adding left:50%;right:50% but it doesn't align it horizontally right in the middle. What is the right way to horizontally align divs in my situation?
JSFiddle: http://jsfiddle.net/8s0q9cyq/
I improved Praveen's answer: https://jsfiddle.net/9mpgdqzf/
Dont use a div with an ID only to give style to an IMG. The Img can have the ID and and inherit all the attributes directly into it and your HTML becomes cleaner and lighter ;)
<div id="logo">
<img id="logo-img" src="http://revistasindromes.com/images/100x100.gif" />
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img, #logo-text {
display: inline-block;
vertical-align: middle;
}
#logo-img {
height: 4.3vw;
}
#logo-text {
font-size:2vw;
}
Why not use text-align: center?
#logo {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo-img,
#logo-text {
display: inline-block;
vertical-align: middle;
}
#logo-img img {
display: inline-block;
height: 4.3vw;
}
#logo-text {
display: inline-block;
font-size: 2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img {
display:inline-block;
}
#logo-img img {
height: 4.3vw;
}
#logo-text {
display:inline-block;
font-size:2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.
Everything worked just fine, until...
I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.
Please see my JSFiddle: http://jsfiddle.net/bkG5A/
Any help would be greatly appreciated!
HTML
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
CSS
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
height: 100%;
background-color: blue;
}
Another option is to set your child div to display: inline-block;
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
<div class="container">
<div class="child">
a
<br />a
<br />a
</div>
<div class="child">
a
<br />a
<br />a
<br />a
<br />a
<br />a
<br />a
</div>
<div class="child">
<div class="content">
a
<br />a
<br />a
</div>
</div>
</div>
JSFiddle Demo
You have to set the height for the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
position:relative;
}
.content {
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: blue;
}
Fiddle
You can use this CSS:
.content {
height: 100%;
display: inline-table;
background-color: blue;
}
JSFiddle
The child can only take a height if the parent has one already set. See this exaple : Vertical Scrolling 100% height
html, body {
height: 100%;
margin: 0;
}
.header{
height: 10%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 80%;
}
.footer {
height: 10%;
background-color: #faf2cc;
}
$(function() {
$('a[href*="#nav-"]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
html,
body {
height: 100%;
margin: 0;
}
.header {
height: 100%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 100%;
}
.footer {
height: 100%;
background-color: #faf2cc;
}
nav {
position: fixed;
top: 10px;
left: 0px;
}
nav li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<li>
got to a
</li>
<li>
got to b
</li>
<li>
got to c
</li>
</ul>
</nav>
<div class="header" id="nav-a">
</div>
<div class="middle" id="nav-b">
</div>
<div class="footer" id="nav-c">
</div>