I have these 3 columns, and it was built using a grid.
How do I make the grey background the same height for all columns?
Ideally not changing this html structure and using css only.
I tried making the div "content" 100% height but doesn't work.
Thanks!
.block-news__container {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 30px;
}
.block-news__container ._item {
width: 100%;
}
.block-news__container ._item ._image {
width: 100%;
height: 310px;
object-fit: cover;
}
.block-news__container ._item ._content {
background-color: #ccc;
padding: 50px 30px 80px;
position: relative;
margin-top: 10px;
}
<div class="block-news__container">
<div class="_item"><img alt="image-news-1" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png">
</div>
</div>
<div class="_item"><img alt="image-news-2" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit </p><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png">
</div>
</div>
<div class="_item"><img alt="image-news-3" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in </p><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png">
</div>
</div>
</div>
Make the height of the .block-news__container ._item ._content class with manual value. you can fix the height of the content container as you desired to get same height for all the containers.
.block-news__container {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 30px;
}
.block-news__container ._item {
width: 100%;
}
.block-news__container ._item ._image {
width: 100%;
height: 310px;
object-fit: cover;
}
.block-news__container ._item ._content {
background-color: #ccc;
padding: 50px 30px 80px;
position: relative;
margin-top: 10px;
height:250px;
}
<div class="block-news__container">
<div class="_item"><img alt="image-news-1" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png">
</div>
</div>
<div class="_item"><img alt="image-news-2" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit </p><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png">
</div>
</div>
<div class="_item"><img alt="image-news-3" class="_image" src="https://dummyimage.com/600x400/000/fff">
<div class="_content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in </p><img alt="icon-arrow-green" width="30" src="https://e7.pngegg.com/pngimages/503/684/png-clipart-right-arrow-simple-rounded-arrow-right-icons-logos-emojis-arrows.png">
</div>
</div>
</div>
vertical size is based on content or specific size
you can add height: 300px (or whatever measurement you desire) to ensure the same size
Related
Adding overflow style to a flexbox element makes it unresponsive, below is the code:
.projects-wrapper{
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
width: 95%;
margin: 0 auto ;
padding-bottom: 1rem;
}
.project {
margin: 1rem;
flex: 1 1 0;
border-radius: 5%;
background: rgb(189, 198, 209);
transition: all 1s ease-out;
cursor: pointer;
}
<div class="projects-wrapper">
<div class="project">
<img src="img/restaurantapi.png" alt="">
<div class="project-title">
<h1>Microservices-Based App</h1>
</div>
<div class="project-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<span class="card-meta">
<i class="fab fa-github fa-2x"></i>
</span>
</div>
<div class="project">
<img src="img/restaurantapi.png" alt="">
<div class="project-title">
<h1>Microservices-Based App</h1>
</div>
<div class="project-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<span class="card-meta">
<i class="fab fa-github fa-2x"></i>
</span>
</div>
</div>
Whenever I add to the .project class overflow:hidden, flexbox becomes unresponsive. I am not sure why, any suggestions are appreciated.
Edit: I just added some lorem ipsum text.
The reason why the flex starts to wrap "on mobile" is that with default overflow the layout engine tries to have all of the content fit, and the widest "single non breakable element" is the word "Microservices-" - as soon as the width of the .project is less than the width of that word then the wrapping occurs, giving you a "responsive" feel. Once you add overflow:hidden you are telling the layout engine that even overflowing elements can be clipped by the parent.
The best solution would be a more conscious decision on when the wrapping should occur, e.g. decide that for max-width: ...px the max width of the .project should be set.
If you want to have the exact same behavior as without the overflow:hidden - the break would occur on the longest word, then use min-width: min-content, as shown below:
.projects-wrapper{
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
width: 95%;
margin: 0 auto ;
padding-bottom: 1rem;
}
.project {
margin: 1rem;
flex: 1 1 0;
border-radius: 5%;
background: rgb(189, 198, 209);
transition: all 1s ease-out;
cursor: pointer;
min-width: min-content;
overflow: hidden;
}
<div class="projects-wrapper">
<div class="project">
<img src="img/restaurantapi.png" alt="">
<div class="project-title">
<h1>Microservices-Based App</h1>
</div>
<div class="project-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<span class="card-meta">
<i class="fab fa-github fa-2x"></i>
</span>
</div>
<div class="project">
<img src="img/restaurantapi.png" alt="">
<div class="project-title">
<h1>Microservices-Based App</h1>
</div>
<div class="project-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<span class="card-meta">
<i class="fab fa-github fa-2x"></i>
</span>
</div>
</div>
Note: I looked at this question:
Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS?
and tried to use box-sizing: border-box; but it does not seem to fix the problem.
Question:
I have a popup container with different stacked scrollable divs, whose heights are set in percentage.
Everything works well if I don't use padding. If I add padding, everything is moved down and the divs are displayed outside the popup window.
How can I use padding with heights in percentages?
Here my example code:
<div class="cardinfobutton">
click me
</div>
<div id="popup" class="infooverlay">
<div class="infopopup">
<div class="content-top">
<p>This goes at the top</p>
</div>
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content-body">
<p>
Long text, it has to be scrollable
</p>
</div>
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content-body">
<p>
Long text, it has to be scrollable
</p>
</div>
<div class="content-bottom">
<p>This goes at the bottom</p>
</div>
</div> <!-- close infopopup -->
</div> <!-- close infooverlay -->
And here the CSS code:
html,
body {
height: 100%;
}
.content-top,
.content-bottom {
padding: 10px 0px 10px 0px;
}
.title {
padding: 10px;
}
.content-body {
max-height: 30%;
overflow: auto;
}
.infooverlay {
position: fixed;
box-sizing: border-box;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.infooverlay:target {
visibility: visible;
opacity: 1;
box-sizing: border-box;
}
.infopopup {
box-sizing: border-box;
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
height: 75%;
transition: all 5s ease-in-out;
position: relative;
padding: 5px 20 5px 20;
}
You can find the example code showing the problem at this codepen:
https://codepen.io/riclab/pen/XePbxR
Thanks a lot!
you have a set fixed height on the popup, so the content doesnt fit inside it,
you can add style 'overflow:auto' to the .infopopup class to stop the content falling our the box,
on top of this I would probably remove the max heights from the content containers inside the popup so you dont have too many scroll bars.
n.b. also one of your padding attributes has units missing,
it reads "5px 20 5px 20" when it should say 20px or 20% for example
Working fine with flex. I have also added some min-height to .content-body to show content in minimal height screen.
html,
body {
height: 100%;
}
.content-top,
.content-bottom {
padding: 10px 0px 10px 0px;
}
.title {
padding: 10px;
}
.content-body {
min-height: 50px;
overflow: auto;
}
.infooverlay {
position: fixed;
box-sizing: border-box;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.infooverlay:target {
visibility: visible;
opacity: 1;
box-sizing: border-box;
}
.infopopup {
box-sizing: border-box;
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
height: 75%;
transition: all 5s ease-in-out;
position: relative;
display: flex;
flex-direction: column;
overflow: auto;
}
<div class="cardinfobutton">
click me
</div>
<div id="popup" class="infooverlay">
<div class="infopopup">
<div class="content-top">
<p>This goes at the top</p>
</div>
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content-body">
<p>
Exercitation minim ex sit commodo anim magna in dolore minim occaecat irure eu est pariatur. Ut tempor ex adipisicing lorem cupidatat aliquip consequat. Voluptate ex velit magna id voluptate officia amet, ut consectetur excepteur aute duis aliquip dolore
ea ipsum labore dolor excepteur do magna veniam, eiusmod deserunt ut velit commodo esse aliqua. Ut amet, nisi sed nulla ullamco i. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt
anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco
lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate
id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi
exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat
eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur.
Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam,
sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor
aliquip fugiat eiusmod esse sit ullamco lorem exercitatio.
</p>
</div>
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content-body">
<p>
Exercitation minim ex sit commodo anim magna in dolore minim occaecat irure eu est pariatur. Ut tempor ex adipisicing lorem cupidatat aliquip consequat. Voluptate ex velit magna id voluptate officia amet, ut consectetur excepteur aute duis aliquip dolore
ea ipsum labore dolor excepteur do magna veniam, eiusmod deserunt ut velit commodo esse aliqua. Ut amet, nisi sed nulla ullamco i. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt
anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco
lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate
id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi
exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat
eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam, sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur.
Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor aliquip fugiat eiusmod esse sit ullamco lorem exercitatio. Amet, culpa quis commodo esse sint adipisicing in irure sit non veniam,
sit magna aute nisi exercitation dolor sunt anim reprehenderit excepteur nulla anim ut aliqua. Qui mollit nulla deserunt in pariatur. Enim ea ut voluptate id ipsum laboris et deserunt ut veniam, nostrud esse ut id sed consequat. Excepteur ut tempor
aliquip fugiat eiusmod esse sit ullamco lorem exercitatio.
</p>
</div>
<div class="content-bottom">
<p>This goes at the bottom</p>
</div>
</div>
<!-- close infopopup -->
</div>
<!-- close infooverlay -->
I've done my share of css, and think I know all the usual tricks, but this one stumped me. I'm trying to absolutely position a caption box over an image (implemented as background-image) with a list of requirements:
Should be centered
Should have max-width and max-height as percentages of the image.
Should have bottom 10% from parent, and resize up with more content
Text content over maximum size should be hidden, but the background with it's rounded border-radius corners should remain visible.
The following is the closest I've come - it fails at centering:
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I know lots of ways to center of course, but none I try maintain the other requirements.
I don't mind wrapping one or more extra elements around .caption if it achieves all my aims. Anyone able to help? Thanks in advance.
Wrap the caption in another div with the dimensions and positioning you require.
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
margin: 1em auto;
}
.wrap {
width: 75%;
max-height: 80%;
position: absolute;
transform: translateX(-50%);
bottom: 10%;
border-radius: 5px;
left: 50%;
overflow: hidden;
}
.caption {
box-sizing: border-box;
background-color: rgba(75, 75, 75, 0.4);
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="wrap">
<div class="caption">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="caption">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
add left:0px and right:0px to .caption
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
left: 0px;
right: 0px;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I am having a problem setting up the css properly
Here is my small code that I play with:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { margin: 0; padding:0; }
html, body { width: 100%; height: 100%; background: #abc; }
#container { background: #eee; width: 100%; height:100%;}
#sidebar { background: #a0f; width: 200px; height: 500px; position: absolute; left: 0px; top: 0px; }
#content { background: #777; margin-left: 200px; width: auto; height: 100%; }
#wrapper { background: #357; height: auto; padding: 10px;}
#column1 { background: #0f0; width: 66%; float: left; }
#column2 { background: #f00; width: 33%; float: right; }
#text1 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
#text2 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
</div><!-- end sidebar -->
<div id="content">
<div id="column1">
<div id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column1 -->
<div id="column2">
<div id="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column2 -->
</div><!-- end content -->
</div><!-- end container -->
</body>
</html>
This is supposed to be a page with fixed sidebar on left and fluid content area on the right. In short pages I want the background color of #content extend to the bottom of screen (this works). On long pages I want that background to extend to the end of page (this does not).
I've added colors to all elements to see what's going where, but eventually the #content background will be white with 0.9 transparency, and there will be a background image on body.
How to fix that?
Update: see working example here: http://jsbin.com/AXUmALU/1/edit?html,output - just scroll the output up to see the break in colors.
I think I have what you want here. In the css I have added some selectors for a clearfix class, which is very common. It looks like this:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
And I added that class to the #content This css is from HTML5 Boilerplate, which you can google. I also changed
#content { height: 100%; } to #content { min-height: 100%; }
so that the content can expand beyond the size of the screen if it needs to.
I'm making a simple layout as part of a web site. It has multiple blocks, each with similar content. Here's the html/css:
<html>
<head>
<style>
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
h2, p, img {
display:block;
float: left;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<img class='auto' src='img/test.jpg' alt='test image' />
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class='content'>
<h2>Title two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class='auto' src='img/test.jpg' alt='test image' />
</div>
</body>
</html>
The second image is displayed lower than expected. What causes this, and is there a way to fix it?
Thank you!
Try putting the img tag in the second div above the p elements.
Adjust your html...
<html>
<head>
<style>
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
h2, p, img {
display:block;
float: left;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<img class='auto' src='img/test.jpg' alt='test image' />
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class='content'>
<img class='auto' src='img/test.jpg' alt='test image' />
<h2>Title two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body></html>
You should use CSS to float your text and images:
<html>
<head>
<style>
.left {
float:left;
}
.right {
float:right;
}
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
h2, p, img {
display:block;
float: left;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<div class="left">
<img class='auto' src='img/test.jpg' alt='test image' />
</div>
<div class="right">
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class='content'>
<div class="right">
<img class='auto' src='img/test.jpg' alt='test image' />
</div>
<div class="left">
<h2>Title two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body></html>
Your image as well the paragraphs and the h2 are defined with float: left.
As both p and h2 have a fixed width, you can't put two of these into one line (580px*2 > 900px), so they wrap.
However, an image will fit next to a paragraph (or a title), so it will be displayed at the same height.
To display the image right tothe title, you'll have to swap your floating style for the image to "float: right" and place the image before the h2 tag.
You can find a (cleaned-up) fiddle here:
http://jsfiddle.net/Xmujr/
I removed most of the float directives, as they aren't needed for anything except the image. I also added a class (left / right) to the image to make clear where the image will be shown.
HTH
Add the second image before <h2> inside <div class="content"> with following style:
<div class='content'>
<img class='auto' src='img/test.jpg' alt='test image' style="float:right;"/>
<h2>Title two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
EDIT
Or you can use css class to achieve the same:
Check the to_right and to_left css classes in below code.
<html>
<head>
<style>
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
.to_right{float:right;}
.to_left {float:left;}
h2, p, img {
display:block;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<img src='img/test.jpg' alt='test image' class="auto to_left"/>
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class='content'>
<img src='img/test.jpg' alt='test image' class="auto to_right"/>
<h2>Title two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body></html>