I want to create a card-layout for my html elements. I came across this beautiful exposition by Jen Simmons, but it implements the idea using columns. The thing is that columns do not allow control over the width of each column, meaning equal width for each column.
Since in my webpage I want to keep control over the column width, I turned into grid:
main {
display: grid;
grid-template-columns: 60% 40%;
}
And here comes my question: How can I achieve this desired card layout using grid?
The desired visual effect is that each box (element) would appear after the one above it without taking into account the height of the box to its right or left.
The following image demonstrates:
Any help about it?
My code:
body {
margin: 10px;
width: 500px;
}
main {
display: grid;
grid-template-columns: 60% 40%;
}
section {
margin: 10px;
border: 1px solid black;
}
<main>
<section class="A">
<h3>Header 1</h3>
<p>Short text</p>
</section>
<section class="B">
<h3>Header 2</h3>
<p>Some Very long and boring text that lasts over a few lines.</p>
</section>
<section class="C">
<h3>Header 3</h3>
<p>Some text. Lorem ipsum dolor sit amet.</p>
</section>
</main>
The way I would do it, would be to re-structure your page, as the grid elements in the same row, are all one block, so if you separate them into the left column and right column, you can achieve this effect.
All I did was group the divs into the left and right columns to determine the heights of each one individually, based on columns and not rows.
body {
margin: 10px;
width: 500px;
}
main {
display: grid;
grid-template-columns: 60% 40%;
}
section {
margin: 10px;
border: 1px solid black;
}
.B {
height: 60%;
}
<body>
<main>
<div class="rContainer">
<section class="A">
<h3>Header 1</h3>
<p>Short text</p>
</section>
<section class="C">
<h3>Header 3</h3>
<p>Some text. Lorem ipsum dolor sit amet.</p>
</section>
</div>
<div class="rContainer">
<section class="B">
<h3>Header 2</h3>
<p>Some Very long and boring text that lasts over a few lines.</p>
</section>
</div>
</main>
</body>
Related
Before anything, I'm very new to this HTML and CSS world.
I have this HTML code:
<section class="instructions">
<div class="row">
<div class="instructions-col">
<h5>1.</h5>
<p>First, you'll need to choose your language. Click the button indicated.</p>
<img src="media/instructions/1.png">
</div>
<div class="instructions-col">
<h5>2.</h5>
<p>Use the switch to choose your language.</p>
<img src="media/instructions/2.png">
</div>
<div class="instructions-col">
<h5>3.</h5>
<p>When the right language is selected, click the indicated button.</p>
<img src="media/instructions/3.png">
</div>
<div class="instructions-col">
<h5>4.</h5>
<p>Elderoid's idiom is now updated. Click the indicated button to continue.</p>
<img src="media/instructions/4.png">
</div>
<div class="instructions-col">
<h5>5.</h5>
<p>This is the welcome screen. Click the indicated button to continue.</p>
<img src="media/instructions/5.png">
</div>
</div>
</section>
This code creates a row of divs, each containing a title, a paragraph and an image.
I also added this CSS code:
.instructions {
width: 80%;
margin: auto;
}
.row {
display: flex;
justify-content: space-between;
}
.instructions-col {
padding-top: 20px;
padding-bottom: 20px;
flex-basis: 15%;
background: #fff7f3;
border-radius: 10px;
text-align: center;
}
.instructions-col p {
font-size: 14px;
line-height: 22px;
padding: 20px;
}
.instructions-col img {
padding-top: 0;
border-radius: 6px;
}
Resulting in this:
I all looks pretty close to what I'm aiming for, except for column 2 (the second div). As you can see in the picture, the paragraph is smaller and that results in the images not getting lined up horizontally.
I need the images to be aligned to the bottom of the div (all at the same level), so as the titles to be aligned to the top of the div (all at the same level too). Also, the paragraph in the middle, should be centered between the title and image.
I've been playing with margins and the justify-content tag, but haven't been able to pull it off.
Any suggestions?
You can add display: flex and flex-direction: column to .instructions-col. Also add flex: 1 to paragraph. Then your paragraph will push heading to top and image to bottom. If you add display: flex and align-items: center to paragraph, it will be centered between heading and image.
Please take a look at an example of this.
.row {
display: flex;
}
.column {
width: 150px;
margin: 1rem;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.column p {
flex: 1;
display: flex;
align-items: center;
}
<div class="row">
<div class="column">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet.</p>
<img src="https://source.unsplash.com/random/100x100">
</div>
<div class="column">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt omnis molestiae dolorum nam eius incidunt?</p>
<img src="https://source.unsplash.com/random/100x100">
</div>
<div class="column">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet.</p>
<img src="https://source.unsplash.com/random/100x100">
</div>
</div>
The cause is the text, not the images. You have an image under a paragraph of text, so the position of the image depends on where the text ends. The other blocks of text have 3 lines, but in col 2 it's just two lines. So, the image starts a line higher.
The solution is either to add more text (even a line break) to make all the text blocks the same size, or to align the image to the bottom of the containing div (using flexbox, ideally) rather than being positioned based on the text block as is the case now.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm currently using Flexbox to lay out the main text and images on my web pages.
They way I have it set up works pretty well, with text on the left, photos on the right in wide viewports, and a single column of content on small viewports. But there are downsides: in a small viewport, all the images wind up piled at the bottom instead of intermingled with the text. In wide viewports, I don't have much control over where the images appear vertically, whether they correspond well to the text on the left. Plus, the same ol' two-column layout gets a little repetitive on a large site.
My current approach is this: I created two columns, the first using a flex-basis of 66%, the other 33%. I put the main text in the first flex item, then images in the second. In a wide viewport, I set the flex-direction to row so the text appears on the left, photos appear on the right. In a small viewport, the flex basis on both flex items is set to 100% and the flex-direction is set to column so they stack in a single column.
I'm sure there's a better approach than this
Make a container around all the content, set up each section to have both the text and the image inside it.
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 75vw;
}
.item {
display: flex;
flex-direction: column;
margin: 2rem 0;
}
.item .text {
margin: 1rem;
}
.item .image {
margin: 1rem;
}
.item .image img {
max-height: 120px;
}
#media all and (min-width: 650px) {
.item {
flex-direction: row;
}
}
<div class="container">
<div class="item">
<div class="text">
<p>lorem ipsum more text lorem ipsum more text lorem ipsum more text lorem ipsum more text</p>
</div>
<div class="image">
<img src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg">
</div>
</div>
<div class="item">
<div class="text">
<p>lorem ipsum more text lorem ipsum more text lorem ipsum more text lorem ipsum more text</p>
</div>
<div class="image">
<img src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg">
</div>
</div>
<div class="item">
<div class="text">
<p>lorem ipsum more text lorem ipsum more text lorem ipsum more text lorem ipsum more text</p>
</div>
<div class="image">
<img src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg">
</div>
</div>
</div>
This question already has answers here:
css text-indent equivalent on the right side
(6 answers)
Closed 4 years ago.
Consider this example:
How to indent text from the right side ? As seen from the example, this is indented from the left side, but how to make it opposite without affecting any other elements ?
I tried to play with text-indent, but could not figure it out.
I also refered here, but also could not get it working.
I managed to do it with float: right and padding, but they become block elements in that case, which should not happen.
text-align does this, but it moves all of it to the right side. I want to keep it on the left, but with reverse alingment. It also should not affect anything on the right or left side of it.
It seems as though you want the text to be right-aligned with some padding so it's not right up against the side of the box.
p {
text-align:right;
padding-right: 5em;
}
<p>test</p>
<p>test test</p>
<p>somethin grandom</p>
<p>test again</p>
<p>this is the last test</p>
An alternative is to use direction:
p {
direction:rtl;
text-indent: 5em
}
<p>test</p>
<p>test test</p>
<p>somethin grandom</p>
<p>test again</p>
<p>this is the last test</p>
Use display: inline-block with text-align. It will expand the container just enough and will not change the display to block:
.foo {
display: inline-block;
text-align: right;
background: papayawhip;
}
<div class="foo">
test<br>
test test test<br>
test test
</div>
Make the element inline-block and then use text-align:
.text {
display: inline-block;
text-align: right;
}
p {
margin: 0;
}
<div class="text">
<p>some text</p>
<p>text</p>
<p>some text text and more</p>
<p>some text</p>
</div>
Or use float:left and clear float after if you want to have a line break after:
.text {
float: left;
text-align: right;
}
p {
margin: 0;
}
<div class="text">
<p>some text</p>
<p>text</p>
<p>some text text and more</p>
<p>some text</p>
</div>
<div style="clear:left;">
lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret
</div>
Consider using text direction direction:rtl;, and then applying the indentation. This way your text will appear to be indented from the right.
Add padding-right: 20px; to the stylesheet. Of course you can change the value.
I'm having trouble figuring out how to position items in HTML/CSS, as I'm pretty much a newb when it comes to coding. But I wanted to do this myself without paying a developer.
Basically, I want to create a 3 column width "How it works" with 3 elements(classes?) in each column. An Icon, the heading, and subheading.
It looks like this: https://www.screencast.com/t/KAKYgJQYVLS
Can someone point me in the direction of just getting the headings on top of one another and the each bullet points next to each other?
TIA!
Use <ul> and <li>
ul {
display: flex;
}
<ul>
<li>1. Heading 2 lines of text</li>
<li>2. Heading 2 lines of text</li>
<li>3. Heading 2 lines of text</li>
</ul>
You can try this one. If you want these bullets much bigger, you should replace these by using image or anything else.
* {
margin: 0;
}
ul {
display: flex;
list-style-image: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/sign-check-icon.png');
}
ul li {
margin: 20px;
}
<ul>
<li>
<h3>1. Heading</h3>
two lines of text
</li>
<li>
<h3>2. Heading</h3>
two lines of text
</li>
<li>
<h3>3. Heading</h3>
two lines of text
</li>
</ul>
You can use bootstrap
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
If your starting out I would take a look at a framework like Bootstrap it makes this stuff a lot easier and has good examples of how to do things.
http://getbootstrap.com/
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h3>
heading 1
</h3>
<p>
sub heading
</p>
</div>
<div class="col-sm-4 text-center">
<h3>
heading 2
</h3>
<p>
sub heading
</p>
</div>
<div class="col-sm-4 text-center">
<h3>
heading 3
</h3>
<p>
sub heading
</p>
</div>
</div>
</div>
https://jsfiddle.net/vo1npqdx/475/
May be you would like to tweak with below HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.wrapper {
width:100%;
float:left;
}
.center {
float:none;
margin:0px auto;
width:600px;
}
.content {
float:left;
width:100%;
}
.col-3 {
width:33%;
float:left;
}
.col-3 p {
text-align: justify;
padding: 5px;
}
.cell {
width: 100%;
float:left;
}
.rounded-icon {
width: 16px;
height: 16px;
border: 1px solid #a84909;
border-radius: 50%;
float:left;
margin-right: 5px;
margin-top: 4px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="center">
<div class="content">
<div class="col-3">
<div class="cell">
<h3><div class="rounded-icon"></div>Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus felis, tristique...</p>
</div>
</div>
<div class="col-3">
<div class="cell">
<h3><div class="rounded-icon"></div>Heading 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus felis, tristique...</p>
</div>
</div>
<div class="col-3">
<div class="cell">
<h3><div class="rounded-icon"></div>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus felis, tristique...</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have the following problem:
There's an image floating left and a margin to the right.
Next to it, there is a div containing a headline and a text (I don't know any height-values of both, because it will be inserted dynamically).
The headline must align to the top and the text to the bottom. I thought it's enough to position the text absolute, but if the height of the image is smaller than the height of the headline + the text, the text flows into the headline....
I haven't found any solution to position the text at the bottom but letting it stay in document flow.
I am not allowed to use any table-elements (on the otherhand, display: table and so on is allowed, but I haven't figured out any solution with that as well)
<<<HTML
<div>
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div> <!-- float left, margin-right -->
<img>
</div>
<div> <!-- float left -->
<h5>The headline aligning to the top</h5>
<p>
Some text aligning to the bottom
</p>
</div>
</div>
</div>
HTML
Please help me, I just can't figure out any solution!
/EDIT:
Both the imnages' and text-/headline-containers' height may vary, so no fixed height.
What i got so far is (by assuming, the text wont have more than 4 lines (but thats not the best way). The next Problem is: Firefox adds the margin-bottom of .box to the bottom: 0; of the text (like: bottom: -35px; But shown as bottom: 0; ... Chrome does interpret that the right way):
<style>
.box {
width: 488px;
float: left;
margin-bottom: 33px;
margin-right: 22px;
padding-top: 5px;
}
.table {
display: table;
}
.box.wide .box-content {
display: table-row;
}
.box.wide .box-content > div {
display: table-cell;
position: relative;
width: 233px;
}
.box.wide .box-content > div:first-child {
margin-right: 22px;
}
.box.wide .box-content div h5 {
padding-bottom: 88px;
}
.box.wide .box-content div p {
position: absolute;
bottom: 0px;
}
</style>
<div class="box wide width-488">
<div>
<h4>Überschrift</h4>
<div class="table">
<div class="box-content">
<div>
<img alt="" height="401" width="233" src="res/dummy/233-130.jpg">
</div>
<div>
<h5>Überschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing eliÜberschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing elit</h5>
<p>
Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lor em ipsum dolor amet.
mehr
</p>
</div>
</div>
</div>
</div>
</div>
try using display: inline-block; on both floating elements and the text element that you want aligned to the bottom.
Then put the property vertical-align: bottom; on the text element you want aligned to the bottom.
I assumed you can make the right column a fix height, since the left column & right are the same in your image example.
I made a jsfiddle for your convenience: http://jsfiddle.net/hLPXM/
Alternately, here is what I did, based on your original code:
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div class="left"> <!-- float left, margin-right -->
<img src="http://placehold.it/150x350" alt="placeholder" />
</div>
<div class="right"> <!-- float left -->
<h5>The headline aligning to the top</h5>
<div class="bottom-text">
<p>
Some text aligning to the bottom
</p>
</div><!-- .bottom-text -->
</div>
</div>
Note I added a .bottom-text class around the <p> that you want to align bottom.
Here is the CSS for the divs to float properly, etc. Note the position:relative; :
.left {float:left; margin-right:20px;}
.right {float:left; background:#eeddff; /*background to see div*/}
.left, .right {height:350px; position:relative;}
And more importantly the text starting from the baseline:
.bottom-text {
position:absolute;
bottom:0;
}
Here is a solution for you, using display: table, relative and absolute positioning:
<div>
<h4>A headline, that isn't involved</h4>
<div style="display:table;">
<div style="display:table-row;">
<div style="display:table-cell;padding-right: 20px;">
<img style="display:block" src="http://baconmockup.com/300/200">
</div>
<div style="display:table-cell;background:green;position:relative;vertical-align:top;">
<p style="">Some text aligning to the top</p>
<p style="position:absolute;bottom:0;">Some text aligning to the bottom</p>
</div>
</div>
</div>
</div>
It does not rely on any fixed heights, and adopts to the height of the image automatically.
jsfiddle.net/EUvXh/
I don't know if you have already fixed this but the easiest way is to add margin-top: auto; to your p tag.