This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 1 year ago.
JSFiddle
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.imgur.com/JhOKdVb.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- game-pad icon img -->
<img src="https://i.imgur.com/c5O6IOS.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.imgur.com/JhOKdVb.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
</div>
</div>
.container{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.row:before,.row:after{
content: '';
display: block;
clear: both;
display: table;
}
.col-6{
width: 50%;
float: left;
}
.card{
margin-bottom: 50px;
}
img{
max-width: 100%;
height: auto;
}
I created the columns using the CSS float property. No framework! Everything is working fine but the last column in the row isn't floating left. can anyone explain?
Interesting Fact:
I'm using only two icons called Plane and Gamepad. Interestingly when I changed the Gamepad icon with the 'Plane' icon, it fixes the problem! Still can't figure out why this is happening.
You need to use:
float: right;
That's what you need.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
How can I make it so I have one image on the left, with a paragraph on the right. Then another image on the right, with a paragraph on the left.
Like this
I think it's simple but i can't get my head around how to do it
Most people use flex or grid to do this, some people use float too.
This is your answer via flex
img {max-width: 100%}
.blog-card {
width: 700px;
margin: 30px auto 0;
padding: 15px;
border-radius: 5px;
background: #f0f0f0;
display: flex;
}
.thumbnail {
-ms-flex: 0 0 300px;
flex: 0 0 300px;
max-width: 300px;
margin-right: 15px;
}
.blog-card:nth-child(even) .thumbnail {
order: 2;
margin: 0;
}
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
This question already has answers here:
Why is nth-child selector not working?
(5 answers)
Closed 2 years ago.
HTML
for each service box i want to change background.
but nth-child() selector is not working.
when each service class changed to nave with respective number its working finly.
.service:nth-child(1) {
background-color: red;
}
<section class="about-us">
<div class="service">
<div class="service-header">
<i class="fas fa-pen-nib"></i>
<h1>Interiar</h1>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
</div>
</div>
<div class="service">
<div class="service-header">
<i class="fas fa-pen-nib"></i>
<h1>Interiar</h1>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
</div>
</div>
</div>
To change the background for each service box to red remove :nth-child() from the css.
.service {
background-color: red;
}
nth-child(#) will get the number(#) of the element. Here 1st element with the match is selected and the style is applied.
To change the background for each try this :
.service:nth-child(1) {
background-color: red;
}
.service:nth-child(2) {
background-color: blue;
}
<section class="about-us">
<div class="service">
<div class="service-header">
<i class="fas fa-pen-nib"></i>
<h1>Interiar</h1>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
</div>
</div>
<div class="service">
<div class="service-header">
<i class="fas fa-pen-nib"></i>
<h1>Interiar</h1>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
</div>
</div>
</div>
Remember to remove background-color from .service. Background-color should be defined in the nth-child property.
If you want it more modular, I would recommend to use even/odd.
.service {
width: 100px;
height: 100px;
border: 1px solid black;
}
.service:nth-child(even) {
background-color: red;
}
.service:nth-child(odd) {
background-color: blue;
}
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
But you can also play around if you add different background-colors with for example :nth-child(3n+3), which means: Every third element: 3rd, 6th, 9th, etc, will have that background-color applied.
:nth-child(2n+2) => 2nd, 4th, 6th...
I am learning boot strap to build my own page. Here is the snippet.
The HTML file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>Title of the document</title>
</head>
<body>
<!-- container-fluid is taking of the padding towards the end, lets go with just the container. -->
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"><img id="photo" src="tom-cruise.jpg" alt="Pavan Dittakavi"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12">HELLO,
MY NAME IS KAMIL24YO AND THIS IS MY RESUME/CV</div>
</div>
<div id="seperator"></div>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
<div class="row">
<div class="my_header">
//EDUCATION
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<!-- -->
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME2
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
<!-- -->
</div>
</div>
</div>
</div>
</body>
</html>
Here is the CSS file:
#photo {
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height: 150px;
border-radius: 50%;
border:3px solid #021a40;
}
#seperator {
border-top: double;
color: #ededed;
}
.my_header {
color: #EC7263;
font-size: 1.8em;
font-weight: 700;
text-transform: uppercase;
}
body {
font-family: 'Open Sans', Arial, Tahoma;
}
.shape{
text-align:left;
background-color:rgba(3,78,136,0.7);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:20px auto;
position:relative;
}
What I have noticed is that col-lg-7 and col-lg-5 or for that matter col-lg-2 and col-lg-10 are not rendered as columns in Bootstrap. Can you please let me know where I am missing - I have a feeling that the div ordering or usage of rows and containers is missing something.
As a side note, I also see that on Chrome the distortion is more - the columns are not getting rendered at all, but on Firefox it renders to some extent - for example the first few columns.
Edit: My problem now is that I am trying to build a clone for http://kamsolutions.pl/projects/resume/ and in my implementation, I see that the resulting HTML file has columns and rows mixed up and not getting rendered as expected. Here is the picture that I am referring to.
Thanks,
Pavan.
You have a row, within which you have two columns, col-lg-7 and col-lg-5. Within the col-lg-7 you have two additional rows, whereas within the col-lg-5 you only have one row. That's where your blank space is coming from.
I just wonder what is the idea by HTML and CSS?
You only need a css, a markup like that
<div class="circle-border">
<div class="circle-image">
<img ....>
</div>
</div>
and in css
.circle-border{
overflow:hidden;
border-radius:50%;
position:relative;
width: 200px; //for example
height:200px; //for example
}
.circle-image{
position:absolute;
top:0;
left:0;
border-radius:50%;
border:8px rbba(255,255,255,.6);
}
.circle-border img{
width:100%;
object-fit:cover;
}
With this you create the form, only need adjust the desing. Other and maybe simplest way is use a library like iHover, that provide you the design with awesome effects, probably helpfully for what you need.
For the vertical line, is no problem. you only need make "relative" the div where you have the images and the content, after, envolve the image markup in other div and set these div with absolute position and set the "top": 50% and margin-top: with the - pixels that the size of your circle image, set the left position with the same value. The HTML may be like that:
<article>
<section class="container-image">
<div class="circle-border">
<div class="circle-image">
<img ....>
</div>
</div>
<section class="content">
<!-- your content here-->
</section>
Oh! I know this one, I did this example myself some time ago. Probably not the best solution, but i used .class:after (so a vertical line that goes after a circle).
Then you write the usual stuff: content:''; background-color:#______; height; width.
To put it in the center you can use the position:relative, position:absolute, left:50%.
You could also use css animation to do that but since it is 1 or 2 px it wouldn't make a difference.
Hope it helps.
You can use CSS Flexbox. Have a look at my snippet:
.timeline-holder {
position: relative;
}
.timeline-holder:before {
content: '';
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: calc(100% - 75px);
background: #ccc;
z-index: -1;
}
.box {
display: flex;
align-items: center;
margin: 60px 0;
}
.box .text {
flex: 1;
padding: 0 20px;
}
.box img {
border-radius: 50%;
}
.box:nth-child(even) {
margin-right: calc(50% - 75px);
}
.box:nth-child(odd) {
flex-direction: row-reverse;
margin-left: calc(50% - 75px);
}
<div class="timeline-holder">
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
</div>
Hope this helps!
I made a row with columns in it, these columns need to have the same height. Inside these columns are a header and a main-content, the content in both these elements can vary, but I want the header to have the same height in all the columns. So the columns need to be the same height, but the header in these columns also need the same height.
Heres an example of the html:
.row{
display: flex;
}
.column{
display: flex;
flex-direction: column;
}
.header{
display: flex;
flex-direction: column;
align-items: center;
}
.header-content{
flex: 1 0 auto;
}
.main-content{
flex: 1 0 auto;
width: 100%;
float: left;
}
<ul class="row">
<li class="column">
<div class="header">
<div class="header-content">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Toloribus, dolorem animi quo ea?</p>
</div>
Read more
</div>
<div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos. Beatae vero quas praesentium amet quos nemo, earum fugit.</p>
</div>
</li>
<li class="column">
<div class="header">
<div class="header-content">
<h2>Lorem ipsum dolor sit.</h2>
<p>Tenetur odio minus, quas natus.</p>
</div>
Read more
</div>
<div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos.</p>
</div>
</li>
</ul>
Flexbox cannot equalise heights between elements that do not share a parent (in fact no CSS layout method can). Since your headers do not, flexbox cannot help. You will need javascript (or a JS Library).
JQuery Sample Function
$(document).ready(function(){
var highestBox = 0;
$('.row .header').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('.row .header').height(highestBox);
});
$(document).ready(function() {
var highestBox = 0;
$('.row .header').each(function() {
if ($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.row .header').height(highestBox);
});
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
background:#c0ffee;
}
.header-content {
flex: 1 0 auto;
}
.main-content {
flex: 1 0 auto;
width: 100%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="row">
<li class="column">
<div class="header">
<div class="header-content">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Toloribus, dolorem animi quo ea?</p>
</div>
Read more
</div>
<div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos. Beatae vero quas praesentium amet quos nemo, earum fugit.</p>
</div>
</li>
<li class="column">
<div class="header">
<div class="header-content">
<h2>Lorem ipsum dolor sit.</h2>
<p>Tenetur odio minus, quas natus.</p>
</div>
Read more
</div>
<div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos.</p>
</div>
</li>
</ul>