I'm using an article header to divide up some projects I wish to display:
.project-elem {
background-color: greenyellow;
padding-top: 5rem;
padding-bottom: 5rem;
height: 300px;
}
.projects {
margin: 0;
padding: .7rem;
background-color: #DDCDE8;
font: Asap, sans-serif;
height: 1000px;
}
.project-n {
background-color: green;
text-align: center;
width: 60%;
float: left;
padding: 2.5rem;
}
.img {
background-color: blue;
text-align: center;
padding: 3rem;
margin-left: 40%;
}
<div class="projects" id=#projects>
<h2>My Projects</h2>
<article class="project-elem">
<div class="project-n" id="dictocounter">
<h3>Dictation Counter</h3>
<p>info about proj</p>
<img src="dictocounter1.jpg" alt="Dictocounter in Action">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="calc">
<h3>RPN Calculator</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="RPN Calculator Decoding Input">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="markov">
<h3>Markov Chain Text Generation</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Markov Chain Text Generation">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="audio">
<h3>Song Similarities</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Audio Spectral Analysis">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="tree">
<h3>DFS/BFS Search Tree</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Simple Trees">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
</div>
Yet, even though I pad project-elem explicitly, the actual project-elem articles are not padded (rather, smushed all together into one lime-green blob):
I can tell that there is no padding between the project elements because the outer division (with bkgrd color purple) cannot be seen between each of the lime-green project elements. Why is this the case, and how can I fix this?
Also, how can I make the img class vertically-even with the project-n class?
You might need margin-bottom instead of padding-bottom;
By using padding you don't seperate them, padding works kind of from-inside.
You may read about box-model here to understand this.
Since the project-elem has only padding and not margin, there is no gap between different elements with the class "project-elem"
Change padding to margin for your requirement as shown below:
.project-elem {
background-color: greenyellow;
margin-top: 5rem;
margin-bottom: 5rem;
height: 300px;
}
.projects {
margin: 0;
padding: .7rem;
background-color: #DDCDE8;
font: Asap, sans-serif;
height: 1000px;
}
.project-n {
background-color: green;
text-align: center;
width: 60%;
float: left;
padding: 2.5rem;
}
.img {
background-color: blue;
text-align: center;
padding: 3rem;
margin-left: 40%;
}
Understand the difference between padding and margin. You can refer this: https://stackoverflow.com/a/2189462/12774953
I suggest you to use flex-box for this.
It would be something like this:
html
<html>
<head>
<style>
.project-elem {
background-color: greenyellow;
padding-top: 5rem;
padding-bottom: 5rem;
height: 300px;
display: flex;
justify-content: space-between;
}
.projects {
margin: 0;
background-color: #DDCDE8;
font: Asap, sans-serif;
height: 1000px;
box-sizing: border-box;
}
.project-n {
background-color: green;
text-align: center;
width: 60%;
padding: 2.5rem;
box-sizing: border-box;
}
.img {
background-color: blue;
text-align: center;
padding: 3rem;
box-sizing: border-box;
width: 25%;
}
</style>
</head>
<body>
<div class="projects" id=#projects>
<h2>My Projects</h2>
<article class="project-elem">
<div class="project-n" id="dictocounter">
<h3>Dictation Counter</h3>
<p>info about proj</p>
<img src="dictocounter1.jpg" alt="Dictocounter in Action">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="calc">
<h3>RPN Calculator</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="RPN Calculator Decoding Input">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="markov">
<h3>Markov Chain Text Generation</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Markov Chain Text Generation">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="audio">
<h3>Song Similarities</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Audio Spectral Analysis">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="tree">
<h3>DFS/BFS Search Tree</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Simple Trees">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
</div>
</body>
</html>
Related
This question already has answers here:
Align an element to bottom with flexbox
(10 answers)
Closed 4 months ago.
I am brand new to coding (thanks for your patience!) and working on a portfolio project for a bootcamp course. I'd like to show headers & copy on the top of my cards with the images aligned underneath. We are using CSS flex. Currently if the text length differs between cards the images end up un-aligned. Here is a screenshot:
Screenshot of uneven card images:
Any suggestions on how I can keep the header + copy at the top but align the images to the bottom of the card?
.card-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: auto auto 60px auto;
max-width: 100vw;
/* 1000px; */
}
.card {
background-color: #f2f2f2;
width: 40%;
margin: 20px;
}
.card a:hover {
text-decoration: none;
}
.card-copy {
padding: 0 20px 20px 20px;
}
<section>
<h2 class="center">Apparel Design</h2>
<div class="card-container">
<!--Card 1-->
<div class="card">
<a href="">
<div class="card-copy">
<h3 class="margin-bottom_five">Design Process</h3>
<p class="margin-top_zero">Copy here about my design process overview</p>
</div>
<img src="https://via.placeholder.com/400">
</a>
</div>
<!--Card 2-->
<div class="card">
<a href="">
<div class="card-copy">
<h3 class="margin-bottom_five">Professional Work</h3>
<p class="margin-top_zero">Copy here about my most recent professional work</p>
</div>
<img src="https://via.placeholder.com/400">
</a>
</div>
<!--Card 3-->
<div class="card">
<a href="">
<div class="card-copy">
<h3 class="margin-bottom_five">Exploratory Projects</h3>
<p class="margin-top_zero">Copy here about my recent stretch projects</p>
</div>
<img src="https://via.placeholder.com/400">
</a>
</div>
</div>
</section>
There are several ways to do this. One is to make your anchors flex containers as well, with direction 'column'. You'd then make them full height and spread their child elements with space-between.
You could also apply flex-fill properties to the paragraph to make it expand to fill available space.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox.
.card-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: auto auto 60px auto;
max-width: 100vw; /* 1000px; */
}
.card {
background-color: #f2f2f2;
width: 40%;
margin: 20px;
}
.card a {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card a:hover {
text-decoration: none;
}
.card-copy {
padding: 0 20px 20px 20px;
}
.card img {
max-width: 100%;
}
<section>
<h2 class="center">Apparel Design</h2>
<div class="card-container">
<!--Card 1-->
<div class="card">
<a href="">
<div class="card-copy">
<h3 class="margin-bottom_five">Design Process</h3>
<p class="margin-top_zero">Copy here</p>
</div>
<img src="https://via.placeholder.com/400">
</a>
</div>
<!--Card 2-->
<div class="card">
<a href="">
<div class="card-copy">
<h3 class="margin-bottom_five">Professional Work</h3>
<p class="margin-top_zero">Copy here about my most recent professional work</p>
</div>
<img src="https://via.placeholder.com/400">
</a>
</div>
</div>
</section>
here is my interface
I have two blocks div.small (include 4 small articles) and article.big. I want the big block to be to the right of the small block, but it's underneath.
*{
font-family: tahoma;
}
div.all{
height: 528px;
width: 824px;
}
article.small{
width: 312px;
height: 82px;
}
div.small{
float: left;
}
img.smallimg{
float: left;
width: 121px;
height: 82px;
}
article.big{
width: 496px;
height: 525px;
}
img.bigimg{
width: 494px;
height: 329px;
}
<div class="all">
<div class="small">
<article class="small">
<img src="small01.jpg" alt="" class = "smallimg">
Link 01
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link 02
</article>
<article class="small">
<img src="small03.jpg" alt="" class="smallimg">
link03
</article>
<article class="small">
<img src="small04.jpg" alt="" class="smallimg">
link04
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link05
</article>
</div>
<article class="big">
<img src="big.jpg" alt="" class="bigimg">
big link
</article>
</div>
I've tried to limit div.all with height = 528px, however, the article.big should've to be to the right, but it's not. My question is: Why's my way wrong?
Notice removal of floats (redundant) and addition of display: flex which displays in child elements as a row by default. The reason your big div is underneath is because the elements being used div are block level elements by default. If they were inline-block they would also align side by side. Cheers!
*{
font-family: tahoma;
}
div.all{
height: 528px;
width: 824px;
display: flex;
}
article.small{
width: 312px;
height: 82px;
}
img.smallimg{
width: 121px;
height: 82px;
}
article.big{
width: 496px;
height: 525px;
}
img.bigimg{
width: 494px;
height: 329px;
}
<div class="all">
<div class="small">
<article class="small">
<img src="small01.jpg" alt="" class = "smallimg">
Link 01
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link 02
</article>
<article class="small">
<img src="small03.jpg" alt="" class="smallimg">
link03
</article>
<article class="small">
<img src="small04.jpg" alt="" class="smallimg">
link04
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link05
</article>
</div>
<article class="big">
<img src="big.jpg" alt="" class="bigimg">
big link
</article>
</div>
Is this what you want? No complicated display: flex; needed
*{
font-family: tahoma;
}
div.all{
height: 528px;
width: 824px;
}
article.small{
width: 312px;
height: 82px;
}
div.small{
float: left;
}
img.smallimg{
float: left;
width: 121px;
height: 82px;
}
article.big{
width: 496px;
height: 525px;
position: absolute;
top:0;
right:0;
}
img.bigimg{
width: 494px;
height: 329px;
}
<div class="all">
<div class="small">
<article class="small">
<img src="small01.jpg" alt="" class = "smallimg">
Link 01
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link 02
</article>
<article class="small">
<img src="small03.jpg" alt="" class="smallimg">
link03
</article>
<article class="small">
<img src="small04.jpg" alt="" class="smallimg">
link04
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link05
</article>
</div>
<article class="big">
<img src="big.jpg" alt="" class="bigimg">
big link
</article>
</div>
I have a parent container 'Streams' and it's Childs 'course' i what to set the margin-right: 10px to every child except the child appear at the rightmost of a parent
if I use '.course:nth-child(3n)' it works fine until the browser window is full when we zoom the page or window size change it didn't work properly.
.Streams {
width: 100%;
height: auto;
padding: 40px 60px 40px 60px;
display: flex;
flex-wrap: wrap;
}
.course {
width: 300px;
border: 1px solid black;
margin-right: 10px;
}
<div class="Streams">
<div class="course">
<img src="#" alt="BCA" />
<p>
div 1
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 2
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 3
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
</div>
to Fix this i use but this only effect the very last child.
.course:last-of-type{
margin-right:0px;
}
What you need to do is take a similar approach that Bootstrap does for its column implementations:
.Streams {
padding: 60px -5px;
...
}
.course {
...
margin: 0 5px;
}
If the distance between components you want is Xpx then
The formula is horizontal margin (x/2)px on the children, and horizontal padding -(x/2)px on parent.
.Streams {
width: 100%;
height: auto;
padding: 40px -5px;
display: flex;
flex-wrap: wrap;
}
.course {
width: 300px;
border: 1px solid black;
margin: 0 5px;
}
<div class="Streams">
<div class="course">
<img src="#" alt="BCA" />
<p>
div 1
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 2
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 3
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
</div>
You can use this code in (.course:last-child)
body {
margin: 0;
}
.Streams {
width: 100%;
height: auto;
padding: 40px 60px 40px 60px;
display: flex;
flex-wrap: wrap;
}
.Streams .course {
width: 300px;
border: 1px solid black;
margin-right: 10px;
margin-bottom: 5px;
}
.Streams .course:last-child {
margin-right: 0px;
}
<div class="Streams">
<div class="course">
<img src="#" alt="BCA" />
<p>
div 1
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 2
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 3
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
</div>
My code is here: https://jsfiddle.net/tewbaLnc/
HTML:
<div class="fields">
<div class="block" >
<img class="fieldsvg" src="documentfields-icon.svg" alt="Document Fields"
style="padding-top:10px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;" >Div1</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Guide.</p>
</div>
<div class="block">
<img class="fieldsvg" src="templates-list-icon.svg" alt="Templates List"
style="padding-top:20px">
<br>
<br><br>
<br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div2</h3>
<p style="color:#656565;text-align:left;padding-left:10px">clicks.</p>
</div>
<div class="block">
<img class="fieldsvg" src="tracking-icon.svg" alt="Tracking Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div3</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Track.</p>
</div>
<div class="block">
<img class="fieldsvg" src="routing-icon.svg" alt="Routing Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div5</h3>
<p style="color:#656565;text-align:left;padding-left:10px"> once.</p>
</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
</div>
CSS used:
img.fieldsvg{
padding-left:10px;
width:80px;
height:80px;
float:left;}
div.fields{
width: 100%;
background: #f8f8f8;
margin: 10px;
position: relative;
text-align:center;}
.block {
background-color:white;
height: 300px;
width: 300px;
display:inline-block;
margin: 25px;
}
The HTML is a little messy but easy to understand. Having a hard time figuring out what to do. I have tried adding margin-top:-20px to move the Div1 up, but to no avail.
Is there anything else I could try? Since I am unable to find my mistake.
`
I have amended your fiddle here
What you need to do is add vertical-align: top; to the .block element like so:
.block {
background-color: white;
height: 300px;
width: 300px;
display: inline-block;
margin: 25px;
vertical-align: top;
}
Just use vertical-align: middle; (for example middle) on your inline-block items (.block). Here is the fiddle: https://jsfiddle.net/tewbaLnc/2/
And a snippet:
img.fieldsvg{
padding-left:10px;
width:80px;
height:80px;
float:left;}
div.fields{
width: 100%;
background: #f8f8f8;
margin: 10px;
position: relative;
text-align:center;}
.block {
background-color:white;
height: 300px;
width: 300px;
display:inline-block;
margin: 25px;
vertical-align: middle;
}
<div class="fields">
<div class="block" >
<img class="fieldsvg" src="documentfields-icon.svg" alt="Document Fields"
style="padding-top:10px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;" >Div1</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Guide.</p>
</div>
<div class="block">
<img class="fieldsvg" src="templates-list-icon.svg" alt="Templates List"
style="padding-top:20px">
<br>
<br><br>
<br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div2</h3>
<p style="color:#656565;text-align:left;padding-left:10px">clicks.</p>
</div>
<div class="block">
<img class="fieldsvg" src="tracking-icon.svg" alt="Tracking Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div3</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Track.</p>
</div>
<div class="block">
<img class="fieldsvg" src="routing-icon.svg" alt="Routing Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div5</h3>
<p style="color:#656565;text-align:left;padding-left:10px"> once.</p>
</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
</div>
For more info about vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:
<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s
.panel { width:100%; padding-bottom:30px; overflow: hidden }
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
HTML
<div class="pick_group">
<h2>Name 1</h2>
<img class="photo" />
<p class="text"></p>
</div>
<div class="pick_group">
<h2>Name 2</h2>
<img class="photo" />
<p class="text"></p>
</div>
The CSS
place this in between just before the
.pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}
.pick_group h2{
style if you want
}
.photo {
width: 200px;
float: left;
margin: 10px 25px;
}
.text {
width: 500px;
float: left;
margin: 10px 25px;
}