I have a div like this :
<div class="container">
<div class="wrap">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
.container {
position: relative;
padding:20px;
background: #ccc;
float:left;
}
.text {
position: relative;
float:left;
background: lightblue;
}
.wrap {
position: absolute;
}
Is it possible to avoid the wrapping of .wrap without using whitespace:nowrap or by specifying width to any div
http://jsfiddle.net/WmcjM/71/
Remove position: relative from the .container style.
Related
This is my goal: https://i.stack.imgur.com/HnALf.png
The images are well aligned. Despite the different heights of the images and the text, each beginning of a section is aligned with the one next to it as you can see in the image.
How can I make that with CSS?
P.S:
I can use tables to achieve this easily! But I will need to create other elements with the same images and texts for the responsive version and I do not want to do that.
I can use Javascript to give the image container a minimum height equal to the tallest height of the three images but I feel like it can be done using CSS => much easier for the responsive version. Plus this trick will not work for the "title" part because on smaller screen sizes, it will just break (for both the "px" and the "vw" units)
/*window.onload = function(){
let imgs = Array.from(document.querySelectorAll('.imgContainer img'));
let oldMinHeight = 0;
imgs.forEach(function(singleImg){
if(singleImg.clientHeight > oldMinHeight){
oldMinHeight = singleImg.clientHeight;
}
});
Array.from(document.querySelectorAll('.imgContainer')).forEach(function(singleImgContainer){
singleImgContainer.style.minHeight = (oldMinHeight) + 'px';
});
}*/
//This is the script that gives the minHeight to the image containers.
*{
font-family: sans-serif;
}
section{
display: flex;
justify-content: center;
}
.product{
margin: 0 2vw;
padding-top: 2vw;
background:#ececec;
border-radius: 5px;
}
.product .imgContainer{
display: flex;
width:15vw;
height: auto;
margin:auto;
}
.product img{
margin:auto;
width:100%;
display: block;
}
.product .desc, .product .title{
width:15vw;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 2vw;
}
<section>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12641780/pexels-photo-12641780.jpeg?cs=srgb&dl=pexels-stayhereforu-12641780.jpg&fm=jpg"> </div>
<div class="title">Title Title Title Title Title Title Title Title Title Title Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12681236/pexels-photo-12681236.jpeg?cs=srgb&dl=pexels-vildan-hanne-do%C4%9Fan-12681236.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12489081/pexels-photo-12489081.jpeg?cs=srgb&dl=pexels-josh-hild-12489081.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</div>
</section>
You could use the property object-fit for the image and set a fixed height for its container.
* {
font-family: sans-serif;
}
section {
display: flex;
justify-content: center;
}
.product {
margin: 0 2vw;
padding-top: 2vw;
background: #ececec;
border-radius: 5px;
}
.product .imgContainer {
display: flex;
width: 15vw;
height: 150px; /* Changed */
margin: auto;
}
.product img {
margin: auto;
width: 100%;
display: block;
object-fit: contain; /* Added */
}
.product .desc,
.product .title {
width: 15vw;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 2vw;
}
<section>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12641780/pexels-photo-12641780.jpeg?cs=srgb&dl=pexels-stayhereforu-12641780.jpg&fm=jpg"> </div>
<div class="title">Title Title Title Title Title Title Title Title Title Title Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12681236/pexels-photo-12681236.jpeg?cs=srgb&dl=pexels-vildan-hanne-do%C4%9Fan-12681236.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12489081/pexels-photo-12489081.jpeg?cs=srgb&dl=pexels-josh-hild-12489081.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</div>
</section>
Here is my HTML, I want to place £first next to £second, but when I try to use float: left;, my footer ignores my content and moves to the top of my page. Is there any way to solve this?
<!DOCTYPE html>
<html>
<link rel = "stylesheet" href = "style.css">
<head>
<title>Home</title>
</head>
<body bgcolor="lightgrey">
<header>
<h1>
HEADING
</h1>
</header>
</div id="wrapper">
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<footer>
Footer text here
</footer>
</body>
</html>
Here's the CSS. I managed to solve the footer issue by adding display: flex; on the body and flex-direction: column; but now the divs won't sit next to each other
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
header{
padding: 10px;
background-color: black;
height: 70px;
opacity: 80%;
}
footer{
padding: 10px;
background-color: black;
height: 70px;
opacity: 80%;
color: white;
margin-top: auto;
}
}
#wrapper {
display: flex;
}
there is a typo in your div
</div id="wrapper"> should be <div id="wrapper">
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
padding: 10px;
background-color: black;
height: 70px;
opacity: 80%;
}
footer {
padding: 10px;
background-color: black;
height: 70px;
opacity: 80%;
color: white;
margin-top: auto;
}
#first {
border: 1px solid blue;
}
#second {
border: 1px solid red;
}
#wrapper {
display: flex;
}
<body bgcolor="lightgrey">
<header>
<h1>
HEADING
</h1>
</header>
<div id="wrapper">
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<footer>
Footer text here
</footer>
</body>
</html>
Just a little change:
body{
min-height: 100vh;
}
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 3 years ago.
I want to align image captions for images with different heights. If I try to align the images vertically, the captions will not be aligned, on the other hand if I align the captions, the images will not be aligned as well.
I thought if I used align-self: center on the image divs I could ignore the align-items: baseline I used on the parent div.
So far, I have tried this:
align-items: center on the parent:
Notice how the captions are not aligned, but the images are (vertically).
align-items: baseline on the parent:
Notice now how the captions are aligned, but the third image "sticks" to the bottom
align-items: baseline on the parent and align-self: center; on the images, there is no difference visually between that and my second attempt.
What I want the website to look like:
If possible, to make the third picture bigger too
.container {
overflow: hidden;
width: 85%;
margin: auto;
}
#brands {
margin-top: 50px;
margin-bottom: 50px;
display: flex;
justify-content: center;
align-items: baseline;
flex-wrap: wrap;
}
#brands .brand-item {
margin: 10px;
min-width: 200px;
max-width: 400px;
width: 30%;
text-align: center;
}
#brands .brand-item h3 {
text-align: center;
margin: 10px 0 10px 0;
}
#brands .brand-item p {
text-align: justify;
}
#brands .brand-item img {
align-self: center; /* this being ignored?*/
width: 90px;
}
<section>
<div class="container">
<div id="brands">
<div class="brand-item">
<img src="https://via.placeholder.com/400x512" />
<h3>HTML 5 Markup</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua.</p>
</div>
<div class="brand-item">
<img src="https://via.placeholder.com/400x512" />
<h3>CSS3 Styling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua.</p>
</div>
<div class="brand-item">
<img src="https://via.placeholder.com/885x200" />
<h3>Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
.container {
overflow: hidden;
width: 85%;
margin: auto;
}
#brands {
margin-top: 50px;
margin-bottom: 50px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#brands .brand-item {
margin: 10px;
min-width: 200px;
max-width: 400px;
width: 30%;
text-align: center;
}
#brands .brand-item h3 {
text-align: center;
margin: 10px 0 10px 0;
}
#brands .brand-item p {
text-align: justify;
}
.img img{
width:90px;
}
.img {
display:flex;
align-items:center;
height:200px;
justify-content: space-around;
}
<section>
<div class="container">
<div id="brands">
<div class="brand-item">
<div class="img">
<img src="https://via.placeholder.com/400x512" />
</div>
<h3>HTML 5 Markup</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua.</p>
</div>
<div class="brand-item">
<div class="img">
<img src="https://via.placeholder.com/400x512" />
</div>
<h3>CSS3 Styling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua.</p>
</div>
<div class="brand-item">
<div class="img">
<img src="https://via.placeholder.com/885x200" />
</div>
<h3>Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
u need to wrap image inside div with display class and specific height that's how i solve it! hope this help!
In my testing (and as answered by my other SO questions), flexbox works well with overflowing text when it's consuming the full width of the page or having a fixed width parent element.
However, if a flexbox with dynamic width is within another dynamic width flexbox, it doesn't support overflow: hidden (and thus text-overflow) correctly and always uses the maximum width of its contents. Is there a way to fix this without setting a specific width on the parent element? Here's a full example:
body {
font-family: sans-serif;
font-size: 20px;
}
.container {
display: flex;
height: 500px;
max-width: 100%;
margin-top: 2em;
}
.aside {
flex: 0 0 220px;
background: black;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
/*width: calc(100% - 220px)*/
}
.toolbar {
display: flex;
background: #eeeeee;
height: 60px;
align-items: center;
padding: 0 10px;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- Works -->
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<!-- Doesn't work without setting width of .main -->
<div class="container">
<div class="aside">
</div>
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
Here's a codepen with the above code to play around with the HTML/CSS:
https://codepen.io/anon/pen/xyNoeq
use display:inline-grid instead of display:flex to class .toolbar as shown below:
.toolbar {
display: inline-grid;
}
Here's the updated snippet:
body {
font-family: sans-serif;
font-size: 20px;
}
.container {
display: flex;
height: 500px;
max-width: 100%;
margin-top: 2em;
}
.aside {
flex: 0 0 220px;
background: black;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
/*width: calc(100% - 220px)*/
}
.toolbar {
display: inline-grid;
background: #eeeeee;
height: 60px;
align-items: center;
padding: 0 10px;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- Works -->
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<!-- Doesn't work without setting width of .main -->
<div class="container">
<div class="aside">
</div>
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
Make the calculation of the width of your .main element more specific. Only when it is inside the .container element. I just added a few lines of CSS.
body {
font-family: sans-serif;
font-size: 20px;
}
.container {
display: flex;
height: 500px;
max-width: 100%;
margin-top: 2em;
}
.aside {
flex: 0 0 220px;
background: black;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
/* Added */
.container .main {
width: calc(100% - 220px);
}
.toolbar {
display: flex;
background: #eeeeee;
height: 60px;
align-items: center;
padding: 0 10px;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- Works -->
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<!-- Doesn't work without setting width of .main -->
<div class="container">
<div class="aside">
</div>
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
I am trying to create some container divs in a column and which have a paragraph within them of varying length.
I'd like to expand the div to the correct height to allow for all the text however as my elements are set as positioned: absolute, I think it is causing an issue.
Please see me fiddle: http://jsfiddle.net/p7pue2kx/1/
In the first box, the text fits nicely. However when the text is much longer, it overflows and the div container does not expand accordingly. I'd like to ensure there is a min-height but the max is determined by the text size.
Are there any better ways of doing this positioning that may allow for my text to expand the container.
Thanks in advance.
Don't use absolute positioning where there is no need to use it :)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.masterContainer {
height: 800px;
background: blue;
width: 300px;
}
.container {
position: relative;
width: 100%;
background: yellow;
min-height: 60px;
margin: 10px 0px;
padding: 10px;
}
.summary {
clear: both;
width: 100%;
overflow: hidden;
background: lightblue;
}
.id {
float: left;
background: green;
}
.xyz {
float: right;
background: red;
}
<div class="masterContainer">
<div class="container">
<div class="id">
KEY / ID
</div>
<div class="xyz">ABCD EFGH</div>
<div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="container">
<div class="id">
KEY / ID
</div>
<div class="xyz">ABCD EFGH</div>
<div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="container">
<div class="id">
KEY / ID
</div>
<div class="xyz">ABCD EFGH</div>
<div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
Always avoid absolute positioning when possible. Here is one solution with minimal CSS to accomplish what you want.
CSS:
.masterContainer {
height: 800px;
background: blue;
width: 300px;
}
.container {
width: 300px;
background: yellow;
margin: 10px 0px;
}
.summary {
background: lightblue;
display: block;
}
.id {
background: green;
}
.xyz {
background: red;
float: right;
}
HTML:
<div class="container">
<span class="id">
KEY / ID
</span>
<span class="xyz">ABCD EFGH</span>
<span class="summary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
<div class="container">
<span class="id">
KEY / ID
</span>
<span class="xyz">ABCD EFGH</span>
<span class="summary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="container">
<span class="id">
KEY / ID
</span>
<span class="xyz">ABCD EFGH</span>
<span class="summary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
</div>
Fiddle