image cant seem to fit in just one section and keep overflowing to another section.
tried putting tag in between but does not seems to work, img keep showing in two section.also tried the width and padding but i can't move the img to the left. can anyone help with only css and html? can't use js on this project.
#section1 {
height: 580px;
width: 1519px;
background-color: #0E2E3B;
padding: 50px;
}
<body>
<section id="section1">
</section>
<section class="main" id="section2" id="profil">
<h1>Lorem</h1>
<h2>Lorem</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 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 src="pancasila.jpg">
</section>
<body>
the html code
If you want to have same ratio you should create a container and hide parts of the image. Follow like this with an additional CSS file. Tweak the parameters in the CSS file as you wish and you can get your desired results.
HTML
<body>
</section>
<section class="main" id="section2" id="profil">
<h1>Lorem</h1>
<h2>Lorem</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 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 class="img" src="pancasila.jpg">
</section>
</body>
CSS
.container{
width:100%;
height:60px;
overflow:hidden;
}
.img {
width:100%;
}
Try adding some css for img. Also you first section doesn't seem to have opening tag.
img { width: 100% }
When flex-basis:auto is set on a div, the div expands vertically to fit contents.
Example
Html:
<div class="parent">
<div class="image">
<img src="http://placebacon.net/400/103">
</div>
<div class="text">
-- Removed for readability --
</div>
</div>
scss:
.parent {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
display:flex;
flex-direction:column;
.image {
flex-basis:auto;
flex-grow:0;
flex-shrink:0;
img {
width:100%;
height:auto;
}
}
.text {
flex-basis:0px;
flex-grow:1;
flex-shrink:1;
overflow-y:scroll;
}
}
However this does not work horizontally :
Example 2
.parent {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
display:flex;
flex-direction:row;
.image {
flex-basis:auto;
flex-grow:0;
flex-shrink:0;
img {
height:100%;
width:auto;
}
}
.text {
flex-basis:0px;
flex-grow:1;
flex-shrink:1;
overflow-y:scroll;
}
}
If you resize the height of the parent, the image will change size to preserve aspect ratio. However the flex box retains the size of the image before the transformation.
Is there a CSS property I need to set to get the expected behavior?
Seems like you need to set an height in .parent, .image and finally to img to trigger the calculation for each elements : https://jsfiddle.net/knjesznx/4/
You should not mind the flex value unless you have really litlle content aside and a background to show , then just add flex:1 to the container that is suppose to fill all space left demo
.parent {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
height: 100vh;/* here */
display: flex;
flex-direction: row;
}
.parent .image {
height: 100%;/* here */
}
.parent .image img {
height: 100%;/* here */
width: auto;
}
.parent .text {
overflow-y: scroll;
/* eventually use flex:1; to fill all space left*/
}
<div class="parent">
<div class="image">
<img src="http://placebacon.net/103/400">
</div>
<div class="text">
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.
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.
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 would remove the and set the image as the background of the image container. The css would look like:
.image {
flex-basis:auto;
flex-grow:0;
flex-shrink:0;
height: 100%;
width: 150px;
background-image: url('http://placebacon.net/103/400');
background-size: cover;
}
I have a page layout which employs floating boxes with constant width and variable height, inside a variable-width container (which I'm going to make constant for the sake of this question). This is my page's code:
CSS:
#main {
width: 640px;
margin: 0 auto;
min-height: 100%;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
}
HTML:
<body>
<div id="main">
<div class="profile">1: I'm tall. 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 class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
When I apply this code, div 4 seems like it's "stuck" in the corner, instead of to the left of div 3 like it should be: (Codepen preview).
What am I doing wrong, and how should I fix this glitch?
You could clear the odd divs:
.profile:nth-child(odd) {
clear:left;
}
Updated Codepen
#main {
width: 640px;
margin: 0 auto;
background: #444;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
background: silver;
}
.profile:nth-child(odd) {
clear: left;
}
<body>
<div id="main">
<div class="profile">1: 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 class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
I have a grid with one div taking up around 30% and the other 70%. In the 30% div, I have 4 images stacked vertically. In the 70% div I have content. How could I dynamically resize and crop the 4 images equally so they equal the height of the 70% content div. I know I could resize the images manually, but I'd like them to auto-adjust if content is added or removed. Also, the design is responsive. Here is a jsfiddle:
http://jsfiddle.net/fETtm/
Here is my HTML:
<section>
<div id="inner-content" class="wrap">
<aside class="fourcol first">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
</aside>
<article class="eightcol">
<h3>H3 Title</h3>
<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>
</article>
</div>
</section>
Thank you for any help.
overflow: hidden will cut anything outside the element it is applied (here .wrap your container).
Demo: http://jsfiddle.net/fETtm/1/
By removing your images from the flow (position: absolute), only the right column is still in the flow and will define the size of its container. Now any bit of image that is outside this box won't be displayed.
As the left column was removed from the flow, your text now occupies the whole width of its container so it needs padding-left (same value as the width of your images).
HTML: same as yours
CSS:
.wrap {
position: relative;
overflow: hidden;
outline: 1px dashed purple;
max-width: 1140px;
width: 96%;
margin: 0 auto;
}
.fourcol {
width: 31.491712705%;
position: absolute;
}
.eightcol {
width: 65.74585634900001%;
position: relative;
float: left;
margin-left: 2.762430939%;
padding-left: 31.491712705%;
}
.first {
margin-left: 0;
}
This is my code:
#footer {
font-size: 10px;
position:absolute;
bottom:0;
background:#ffffff;
}
I've no idea what is wrong with this - can anyone help?
EDIT: For some more clarity on what's wrong: The footer is displayed on the bottom as expected when the page loads. However, when the web page's height is > than the dimensions on the screen such that a scroll bar appears, the footer stays in that same location. That is to say, when the height of the page is <= 100%, the footer is at the bottom. However, when the page height is >100%, the footer is NOT at the bottom of that page, but at the bottom of the visible screen instead.
EDIT: Surprisingly, none of the solutions below worked. I ended up implementing a sidebar instead.
You're probably looking for this example:
<div class="wrapper">
Your content here
<div class="push"></div>
</div>
<div class="footer">
Your footer here
</div>
CSS:
For a 142-pixel footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Try this:
position: fixed;
bottom: 0;
I had the same question, came here looking for an answer, didn't find it, then tried a few experiments on my own, and finally got the solution:
#body {
overflow-y: 0 auto;
}
#footer {
position: fixed;
top: 100vh; left: 0;
margin-top: -100px;
width: 100%; height: 100px;
padding: 10px;
color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<div id="footer">
<span>Some dummy Text</span>
</div>
The wrapper is the rest of your page. The negative/positive margin/height values are where the magic happens.
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push
{
height: 142px; /* .push must be the same height as .footer */
}
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
Do not use position: absolute; for any footer as the page will change in height. If it is absolute then your footer will not move with the page height.
You want to use ryan fait's method.
Although I would personally do it like this;
.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}
<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>
This way you don't have to mess around with negative margins and padding. Also this can easily be a part of html5 changing #footer to
<footer>
</footer>
This is what I did and it caused my footer to stay at the bottom.
.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
.footer-small, .push {
background-color: #2C3E50;
position: fixed;
padding-top: 5px;
clear:both;
width: 100%;
bottom:0px;
z-index: 0;
}
this is also working for me....
I struggled to find a solution, as none of the suggested achieved what I wanted:
If there is to less content, stay at the bottom of the page, not in the middle.
If there is enough content, do not be stick and overlap the content, just stay at the bottom.
Hide it from the first sight, so only if the user scrolls down the footer is seen.
This is what worked for me:
html:
<body>
<div class="page-wrapper">
<h1>
Page
</h1>
</div>
<footer>
Footer here
</footer>
</body>
css:
body {
height: 100%;
width: 100%;
}
.page-wrapper {
min-height:100vh; /*1vh = 1% of browser screen height*/
}
footer{
position: relative;
width: 100%;
bottom: 0px;
}
Here in action.
Why not with jquery?
Put a wrapper div between header and footer and assign min-height property for wrapper with jquery equal with the difference between document height and (header height + footer height).
<script type="text/javascript">
$(document).ready(function(){
var dh = $(document).height(); //document height here
var hh = $('header').height(); //header height
var fh = $('footer').height(); //footer height
var wh = Number(dh - hh - fh); //this is the height for the wrapper
$('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>