Related
I need some help.
There are a few containers that have text inside. Obviously there is a lot of text, so there have to be scroll. But I don't want text look like it's cut, I want to "blur" the bottom of the single container.
Here are the results: https://jsfiddle.net/rsze93wk/3/
Well, it looks... pretty shitty in my opinion. The bottom of the container should be almost invisible, but I can clearly read it. I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.
There is also a problem, gradient stays in one place when I scroll down. Can you help me solve this? Also, maybe you have any ideas how to make this effect look much better?
Update: the first snippet seems to be buggy on Chrome but works fine on Firefox
You can try to color the text using gradient like below:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
background: linear-gradient(#000 calc(100% - 50px),white);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
Another alternative using sticky:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
}
.main::after {
content:"";
display:block;
height:200px;
margin-top:-200px;
position:sticky;
bottom:0;
background: linear-gradient(transparent calc(100% - 50px),white);
pointer-events:none;
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
And if you want a real blur effect use backdrop-filter:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
}
.main::after {
content:"";
display:block;
height:20px;
margin-top:20px;
position:sticky;
bottom:0;
pointer-events:none;
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
I want to "blur" the bottom of the single container.
Blur is CSS filter (filter: blur(1)) and you can't use it here with the after:: pseudoelement because content of that element is empty.
I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.
This is a good and common solution. To make text bellow the after:: clickable you can add pointer-events: none; to the after::.
There is also a problem, gradient stays in one place when I scroll down.
after:: should be positioned to the .main and in the .main you should have another container with scroll.
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 3 years ago.
I am trying to build a card-based layout, with an image taking up the left-hand half of each card. If I use a div with a background-image, the image takes up exactly half the width, and expands to exactly the height of the content on the right-hand side of the card.
However, if I instead use an img element (with object-fit: cover), the image never crops vertically when the card is too short, but instead only horizontally when the card is too tall. How can I tell the image not to cause the card to stretch, reproducing the behaviour of the div's background image?
As an example, the third and fourth cards are what I am trying to achieve, but with an image tag for semantic reasons.
main {
display: flex;
flex-direction: column;
max-width: 700px;
margin: auto;
}
article {
display: flex;
flex-direction: row;
border: 1px solid;
margin: 1em;
}
article > img {
object-fit: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > div:first-child {
background-position: center;
background-size: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > aside {
padding: 1em;
}
<main>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img taller than the text</h2>
<p>
Here the image extends beyond the text, which I do not want.
</p>
</aside>
</article>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img shorter than the text</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
</main>
You can simply make the image out of the flow using position:absolute so only the text content will define the height:
main {
display: flex;
flex-direction: column;
max-width: 700px;
margin: auto;
}
article {
/*display: flex;
flex-direction: row; not needed sine one element is in-flow */
border: 1px solid;
margin: 1em;
position:relative;
}
article > img {
position:absolute;
top:0;
left:0;
height:100%;
width:50%;
object-fit: cover;
}
article > aside {
padding: 1em;
width:50%;
margin-left:auto;
box-sizing:border-box;
}
<main>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img taller than the text</h2>
<p>
Here the image extends beyond the text, which I do not want.
</p>
</aside>
</article>
<article>
<img src="https://picsum.photos/id/411/1000/900" />
<aside>
<h2>img shorter than the text</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
Similar question: How can you set the height of an outer div to always be equal to a particular inner div?
main {
display: flex;
flex-direction: column;
max-width: 700px;
margin: auto;
}
article {
display: flex;
flex-direction: row;
border: 1px solid;
margin: 1em;
}
article > img {
object-fit: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > div:first-child {
background-position: center;
background-size: cover;
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
article > aside {
padding: 1em;
}
.img-container{
border:2px solid red;
overflow:hidden;
position:relative;
}
.img-container div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.img-container img{
object-fit: cover;
width:100%;
height:100%;
}
<main>
<article>
<div class="img-container">
<div>
<img src="https://picsum.photos/id/411/1000/900" />
</div>
</div>
<aside>
<h2>img taller than the text</h2>
<p>
Here the image extends beyond the text, which I do not want.
</p>
</aside>
</article>
<article>
<div class="img-container">
<img src="https://picsum.photos/id/411/1000/900" />
</div>
<aside>
<h2>img shorter than the text</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
</p>
</aside>
</article>
<article>
<div style="background-image: url(https://picsum.photos/id/411/1000/900)">
</div>
<aside>
<h2>background image</h2>
<p>
With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui.
</p>
</aside>
</article>
</main>
Use object-fit: cover; width:100%; height:100%;. You need to specify width and height with "object-fit: cover" to achieve this.
Currently stuck on how to align the textbox and button on the same line with 50% width (in footer), can anyone give me some sort or guide or able to fix this issue for me?
[Extra questions, any further support or guidance would be appreciated, Wireframe given for basic idea]
One being how to put spacing between the text and picture that are aligned below the navbar.
Below that, how to put a thin border for each separate picture and box of text.
(Sorry if i'm not allowed to ask extra questions)
You could use css flexbox to achieve the
"align the textbox and button on the same line with 50% width"
part Specifically, add
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
to your css file. I included the modified project below so that you could check the effect. More about CSS flexbox at here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.paragraph {
padding: 5px;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=text] {
width: 50%;
padding: 15px;
margin: 5px 0 5px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
</form>
</body>
</html>
As of adding space between image and text, you could simply apply a margin or some padding to the image. Something like this will do:
.desired-img {
margin: 5px;
}
To add border to a paragraph, simply use css to style your border. Something like this will do the job:
.column {
border: 1px solid lightgrey;
}
Hope this helps!
You need to remove the button from it's own div block element and put inline with the input. I've set the .container div to 50% and centered aligned the input and button. To add space between your image and text, just and a margin to the right and bottom. And you can simple add a border attribute to your .column class to give a thin border:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#holidayImg {
margin: 0px 20px 20px 0px;
}
.paragraph {
padding: 5px;
}
{
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
border: solid 1px #ccc;
margin: 0px 5px;
border-radius 4px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.container {
display: flex;
}
input[type=text] {
padding: 15px;
margin: 5px;
display: inline-block;
border: none;
background: #f1f1f1;
width: 50%;
}
.signupbtn {
width: 50%;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left" id="holidayImg">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</form>
</body>
</html>
If I understand what you're asking, you can add another class as follows:
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required class="side-by-side">
<div class="clearfix side-by-side">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
// CSS added to get effect
.container {
width: 100%;
float: right;
}
.side-by-side {
display: inline;
}
This way it stays on 1 line and stays on the right side similar to your wireframe.
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 5 years ago.
I meet a confused problem with CSS grid. I have a grid with 2 columns, the first is 100px, the second is fit the remaining (grid-template-columns: 100px auto). Everything works right. But if the second column has an extra large element, the width of second column is overflow. I tried to use the max-width but it doesn't work.
Here is my fiddle, please check it: https://jsfiddle.net/truongwp/ka54e7u4/1/
.container {
display: grid;
grid-template-columns: 100px auto;
grid-gap: 30px;
width: 400px;
}
.right {
max-width: 100%;
}
.text {
width: 700px;
max-width: 100%;
}
<div class="container">
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus lorem in iaculis dictum. Etiam nec urna et erat volutpat ultrices non vel elit. Nullam commodo tortor a est luctus, et semper ipsum suscipit. Praesent in ipsum quis odio imperdiet posuere
in vitae leo.
</div>
<div class="right">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus lorem in iaculis dictum. Etiam nec urna et erat volutpat ultrices non vel elit. Nullam commodo tortor a est luctus, et semper ipsum suscipit. Praesent in ipsum quis odio imperdiet posuere
in vitae leo. Aliquam facilisis at justo vel pellentesque. Quisque vitae lobortis nibh, commodo facilisis ante. Nullam facilisis leo vel aliquet egestas. Etiam commodo porta lorem pretium suscipit. Morbi finibus est ac ex suscipit, at feugiat magna
facilisis. Sed tempor ex interdum lobortis gravida. Sed rutrum semper sapien, at finibus metus maximus in. In turpis augue, pellentesque at lectus nec, porta elementum justo. Sed consequat nec dui et interdum. Aenean placerat orci sem, ut blandit
ex semper sit amet.
</div>
</div>
</div>
Thank you very much!
Try to add
overflow: auto
Like this:
.right {
max-width: 100%;
overflow: auto
}
It will fix your trouble!
https://jsfiddle.net/ka54e7u4/2/
I have the following code. Right now the Title is aligned vertical top of the image. But the description is still wrapping (blocked) below the image and I want it to also be top aligned, right under the title next to the image like the title is, but again below the title.
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="../../../Images/thumbs/206.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
</p>
<p class="vtop">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
Try this
.vtop
{
display: inline-block;
vertical-align: top;
float: left;
margin-right: 20px;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
It sounds like you're after the CSS concept called the media object. It's designed specifically for the scenario you mention; a layout as follows:
+---------+ ~~~~~~~~~~ ~~~~~
| |
| | ~~~~~ ~~~~~ ~~~~
| | ~~~~~~~~~ ~~~~~~
+---------+
You can achieve this with a basic structure:
<div class="media">
<img src="http://placehold.it/50x50" alt="" class="media__img" />
<div class="media__body">
<p>Title of Something.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut.</p>
</div>
</div>
And just a few lines of CSS:
.media { display: block }
.media__img {
float: left;
margin-right: 24px
}
.media__body {
overflow: hidden;
display: block;
}
Here is a working fiddle to demonstrate.
You know there's always so many ways to solve problems. It seems to me it was a bit harder for me to understand what exactly was going on since you left out a lot of css info for the rest of the tags, but as far as I can see I feel like you're doing a lot of work to potentially do something quite simple. Hopefully that's not being to harsh I commend your efforts! I left your tags that aren't referenced in the css so it won't break you're code and you can paste it in easily.
All you need to do is float the image left .floatLeft and then create a div beside it with a margin-left to push the .content div containing the title/paragraph below out from the floated div since floats don't hold "real" space in the content flow of a web site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
.floatLeft {
float:left;
}
.content {
margin-left:210px;
}
</style>
</head>
<body>
<div class="col-lg-9 well">
<div class="row">
<div class="col-lg-12 well nopadding">
<img class="floatLeft" src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" />
<div class="content">
<p><span class="bold inline-block">Title of Something</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec.
Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur
lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl.
Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum
magna et ligula consectetur lobortis.</p>
</div>
</div>
</div>
</body>
</html>