How to align image and content inside div under div. tried with float left but not working
Js fiddle link for quick overview
here is the CSS:
.container {
clear: both;
padding: 0px;
margin: 0px;
overflow:hidden;
}
.profile1 {
background-color: #CCF;
}
.profile2 {
background-color: #CFC;
}
.profile3 {
background-color: #FCC;
}
#media only screen and (min-width: 480px) {
.span_1_of_3 {
width: 32.2%;
}
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.col:first-child {
margin-left: 0;
}
}
HTML:
<div class="container" style="border:2px solid black;">
<div class="col span_1_of_3 profile1"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
<div class="col span_1_of_3 profile2"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
<div class="col span_1_of_3 profile3"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
</div>
Floating image to the left seems to be working just fine: http://jsfiddle.net/rTZJ9/.
.col > img {
float: left;
}
DRD's aswer is good and You may also use align="left" inside img tag.
<img src="http://placehold.it/100x100" align="left"/>
#Sharanpreet The align attribute of is not supported in HTML5. Use CSS instead.
Related
I have a task that supports older browsers such as IE9, so I cannot use flexbox or CSS Grid.
I'm struggling with making the .second and .third have equal height as the .first div.
Here is my attempt.
https://codepen.io/abccba_123/pen/QWKMwpK
img {
width: 100%;
height: auto;
}
.first img {
background-color: gold;
}
.second img {
background-color: cyan;
}
.third img {
background-color: grey;
}
.container {
width: 1000px;
margin: 0 auto;
}
.container article {
position: relative;
}
.wrap {
position: absolute;
bottom: 0;
}
.first {
float: left;
width: 50%;
}
.second {
float: left;
width: 30%;
}
.third {
float: left;
width: 30%;
}
<div class="container">
<article class="first">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
<article class="second">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
<article class="third">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
</div>
What I want.
Thank you!!
You may also use a display:table reset ;) Understood by every browsers and IE8+
(.wrap div removed , but you can use it)
img {
width: 100%;
height: auto;
}
.first {
background-color: gold;
}
.second {
background-color: cyan;
margin-bottom: 5px;
}
.third {
background-color: grey;
}
.container {
width: 100%;/* for demo */
/* width:1000px; */
margin: 0 auto;
display: table;
/* IE8 + */
table-layout: fixed;
/* IE8 + */
border-spacing: 5px;
border: solid;
}
.container article {
border: solid;
margin: -left:5px;
}
h3 {
padding: 1em;
}
.img {
vertical-align: top;
}
.first {
display: table-cell;
/* IE8 + */
width: 50%;
vertical-align: top;
}
<div class="container">
<article class="first">
<img src="https://picsum.photos/id/118/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
<article class="second">
<img src="https://picsum.photos/id/1015/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
<article class="third">
<img src="https://picsum.photos/id/1016/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
</div>
A simple table layout:
img {
display:block;
}
.first img {
background-color: gold;
}
.second img {
background-color: cyan;
}
.third img {
background-color: grey;
}
.container {
margin: 0 auto;
}
.container td {
position: relative;
}
.container td h3 {
position:absolute;
bottom:0;
left:0;
right:0;
}
<table class="container">
<tr>
<td class="first" rowspan="2">
<img width="300" height="400">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
<td class="second">
<img width="300" height="200">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
</tr>
<tr>
<td class="third">
<img width="300" height="200">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
</tr>
</table>
.cont {
width: 1000px;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
}
article {
position: relative;
}
.first {
float: left;
width: 500px;
height: 300px;
background-color: gold;
}
.second, .third {
float: left;
width: 500px;
height: 150px;
overflow: hidden;
}
.second {
background-color: lime;
}
.third {
background-color: cyan;
}
.info {
color: white;
padding: 10px 10px 0 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="cont">
<article class="first">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
<article class="second">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
<article class="third">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
</div>
I've partially solved my own problem.
Tried this in every major browser (Chrome/Safari/IE/Edge) and Firefox. Works in everything but Firefox where the text gets nudged down.
.auto-height {
display: table;
height: 100%;
}
.full-height-section {
display: table-cell;
height: 100%;
width: 49%;
background-image: url("https://preview.ibb.co/iNcv0f/ladysquats.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.half-content {
width: 100%;
height: 100%;
vertical-align: top;
padding: 60px 30px;
}
.half-content h2, .half-content p, .half-content ul {
text-align: center;
}
.half-content .img-size-payment-type {
width: 65%;
}
button.colour-dark-pnk, button.colour-light {
font-size: 1em;
margin-top: 25px;
padding: 10px 60px;
border: 0 solid #f4a2a4;
border-radius: 0;
cursor: pointer;
}
}
<div class="how-works-section-six-container auto-height mobile-screen-hide">
<div class="full-height-section">
</div>
<div class="section-six half-content">
<h2>IPSUM LOREM</h2>
<p> <img class="img-size-payment-type" src="https://preview.ibb.co/f0Ea0f/metodos-pago.png"><br>
<button class="colour-dark-pnk">Order now</button></p>
<h2 class="font-colour-dark-pnk">Test Title</h2>
<p>Ipsum Lorem Ipsum Lorem:</p>
<ul class="box-pnk">
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
</ul>
</div>
</div>
What it looks like in FF:
What's even weirder is that the problem disappears as soon 'Inspect Element' is used, meaning it's very hard to see what's going on. Looks like an actual Browser bug?
http://jsfiddle.net/c3bfzLhj/
Change all height:100% to min-height:100%
This is a Firefox bug. I had faced this problem two weeks ago while working on my web app.
I'm running into an issue with flex-wrap. Where I need flex-wrap: wrap to take care that images wrap and don't run out of the container. I don't need wrap for a link. See my issue below, also my code is included in the post.
JSFiddle
HTML
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
<div class="tools">
View details
</div>
</div>
SCSS
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
&:after {
content: "";
display: table;
clear: both;
}
.image {
float: left;
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
a {
text-decoration: none;
&:not(:last-of-type) {
margin-right: 5px;
}
}
}
.tools {
float: left;
width: 40%;
padding: 5px;
}
}
You can achieve this by adding
.box .image a:last-of-type {
flex: 1 1 0;
}
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
}
.box:after {
content: "";
display: table;
clear: both;
}
.box .image {
float: left;
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
}
.box .image a {
text-decoration: none;
}
.box .image a:last-of-type {
flex: 1 1 0;
}
.box .image a:not(:last-of-type) {
margin-right: 5px;
}
.box .tools {
float: left;
width: 40%;
padding: 5px;
}
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
<div class="tools">
View details
</div>
</div>
Min Width & Overflow Hidden
If you use min-width of 80px which is your image box size and add overflow:hidden, everything fits in fine and there's nothing falling out.
To make the demo better, I made the other columns a min-width of 80px and total min-width 160px (2x80px) and gave all containers overflow:hidden.
The Working Demo
See it working here
The Code
SCSS
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
min-width:160px;
overflow:hidden;
&:after {
content: "";
display: table;
clear: both;
}
.image {
float: left;
width: 60%;
min-width:80px;
overflow:hidden;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
a {
text-decoration: none;
&:not(:last-of-type) {
margin-right: 5px;
}
}
}
.tools {
float: left;
width: 40%;
padding: 5px;
overflow:hidden;
flex-wrap: wrap;
min-width:80px;
}
}
HTML
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
<div class="tools">
View details
</div>
</div>
You can add an extra container around the single box and the text. Define it as a flexbox and it will scale according to your desires.
* {
box-sizing: border-box;
}
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
}
.box:after {
content: "";
display: table;
clear: both;
}
.image {
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
}
.image a {
text-decoration: none;
}
.image a:not(:last-of-type) {
margin-right: 5px;
}
.tools {
width: 40%;
padding: 5px;
}
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<div style="display:flex; align-items: center;">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
</div>
<div class="tools">
View details
</div>
</div>
Please check my fiddle where I added my solution https://jsfiddle.net/Lazzaro/vkrh48tn/
I added new class
.image2 {
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 5px;
a {
text-decoration: none;
&:not(:last-of-type) {
margin-right: 5px;
}
}
}
and it works
I am working in wordpress on a webpage. I have a box made with css where some text is displayed. What is strange is that I have no
Anyone can see what the poblem may be ?
And why is the space so big, it is bigger than the height of a letter.
code:
<style>
.bottom2 {
display: flex;
flex-direction: column;
}
.bottom1 {
width: 70%;
}
.bottom2 {
width: 30%;
}
.publicationright {
width: 250px;
height: 180px;
border-radius: 25px;
padding: 15px;
background: #559BBC;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
.publicationbottom {
width: 250px;
height: 90px;
border-radius: 25px;
padding: 15px;
background: #769DBD;
margin: 0 auto;
margin-bottom: 5%;
margin-top: 5%;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 0px;
text-decoration: none;
}
.textpub {
color: #365A6B;
font-size: 14px;
}
</style>
<div class="publication">
<div class="bottom2">
<div class="publicationright">
Title!
<div class="textpub">
FamoS – Fahrradverkehrsmodelle
</div>
<p>
<div class="textpub"></div>
Title
<div class="textpub">
Name Surname, Name Surname, Name Surname, Name Surname
</div>
</div>
<div class="publicationright">
Title!
<p>
<div class="textpub">
FamoS – Fahrradverkehrsmodelle
</div>
<p>
<div class="textpub"></div>
Title
<p>
<div class="textpub">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
</div>
You have to remove the default margin of paragraphs, set by browsers by default;
p { margin: 0; }
EDIT I restructured your html (set correct indents), you'll see you actually open up <p> tags, but don't close them. Either remove them, or close them properly on appropriate places.
EDIT 2 As you're using wordpress, most probably wpautop is messing with you. Try to put this in wp-content/themese/YOUR-THEME/functions.php
function my_theme_init() {
remove_filter('the_content', 'wpautop');
}
add_action('init', 'my_theme_init');
NB: if you're not using a child theme you're doing it wrong. So when I say YOUR-THEME above, of course I mean YOUR-CHILD-THEME
In short, I'm having trouble getting my content div to align vertically within a page - I was told that in order for it to work, my container would have to have a height value that isn't auto, so I went and fixed that, but it's still not working, could anyone help me out?
HTML
<div class="units-container" style="overflow: hidden;">
<div id="home" class="section">
<div id="home-content">
<section id="intro">
<section>
<h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
</section>
</div>
</div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="blog"></div>
<div id="contact"></div>
</div>
CSS
#home {
background-color: #1a1a1a;
color: #fff;
}
.section {
padding: 0;
margin: 0;
display: block;
overflow: hidden;
}
#home #home-content {
vertical-align: middle;
text-align: center;
}
#intro {
width: 60%;
margin: 0 auto;
}
#home-content h3 {
font-family:'amblelight_condensed', 'Courier';
display: block;
color: #fff;
font-size: 2.17em;
line-height: normal;
}
JQuery (if needed)
jQuery(document).ready(function ($) {
/*--------------------------
Resize Div(s) when Window Resizes
---------------------------*/
$(".section").css("height", $(window).height());
$(".section").css("width", $(window).width());
$(window).resize(function () {
$('.section').css('height', $(window).height());
$(".section").css("width", $(window).width());
});
});
http://jsfiddle.net/sWeLw/
Relatively to your sample. Add the following CSS:
#home, #home-content {position:relative;}
and JS:
$('#home-content').css("top", ($('#home').height() - $('#home-content').height()) / 2);
i would do this, try a class and make it "left:0px"
<head>
<style>
.left
{
position:absolute;
left:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="left">
<p>content</p>
<p>more content</p>
</div>
</body>
You can use table:
HTML:
<div id="home-content">
<table><tr><td>
<section id="intro">
<section>
<h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
</section>
</section>
</td></tr></table>
</div>
and CSS:
#home #home-content {
vertical-align: middle;
text-align: center;
height: 100%;
}
#home-content table, #home-content tr, #home-content td{
height: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}