This is a very simple question: I have two elements that should be displayed in one row at a specific ratio. Then the same pattern should be repeated in a next row. However, the content of the subsequent row is printed in unused space of the previous row.The problem is obviously the css file.
I guess the example will make it clear:
.row1 {
float: left;
width: 70%;
margin-bottom: 50px;
}
<head>
<link rel="stylesheet" type="text/css" href="syle.css">
</head>
<div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<div class="row1">
<p class="row1_col1"> 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 class="row1_col2">
<p> Just some other text</p>
</div>
</div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<p class="row1_col1"> 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 class="row1_col2">
<p> Just some other text</p>
</div>
</div>
</div>
Any idea?
Here's a less than elegant solution (Full code in link)
https://jsfiddle.net/qk7o8w4t/1/
.paragraph {
display: inline-block;
width: 50%;
}
.right {
float: right;
}
.left {
float:left;
}
Related
Newer to coding and I'm trying to create a mobile first website for reference. I am trying to centre text under three images in my footer. Could someone help me do this? Theres a <h1> and <p> for every image class. I also will need this centre text on other images throughout the website.
Appreciate your help.
Here's my html of the footer:
<section id="main-footer">
<hr>
<img src="images/image1.png" class="image1" alt="image1" width="150" height="125">
<h1> image1 </h1>
<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>
<img src="images/image2.png" class="image2" alt="image2" width="150" height="125">
<h1> image2 </h1>
<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>
<img src="images/image3" class="image3" alt="image3" width="150" height="125">
<h1> image3 </h1>
<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>
</section>
Here's my CSS:
.image1 > h1, p {
display: flex;
flex-direction: auto;
align-items: center;
}
I tried exchanging .image1 with #main-footer so it would be:
#main-footer > h1, p { }
It did not work as well.
Try the following styles.
You should set the child image fully take place inside parent div.
<div class="parent">
<img src="images/forest.png" class="forest" alt="forest" width="150" height="125">
<h1> From the Forest </h1>
</div>
.parent{
position: relative;
img {
width: 100%;
height: 100%;
}
h1 {
display: absolute;
top: 50%;
left: 50%;
transform: translate(50%, -50%);
}
}
you can also use center tag like this.
<div>
<img src="images/forest.png" class="forest" alt="forest" width="150" height="125">
<center><h1>From the Forest </h1></center> </div>
I am relatively new to coding and need help with grid elements. I am re-creating a storefront clothing website for reference. Could someone please help me align/center three divs in my main-footer with three other images in my main section or with the page entirely?
Here is my main-header:
<section id="main-headergrid">
<img src="images/image1.jpg" alt="image1">
<img src="images/image2" alt="image2">
<img src="images/image3.png" alt="image3">
</section>
Here is my main-footer:
<section id="main-footer">
<hr>
<div class="icon1">
<img src="images/icon1.png" alt="icon1" width="150" height="125">
<h1> icon1 </h1>
<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 class="icon2">
<img src="images/icon2.png" alt="icon2" width="150" height="125">
<h1> icon2 </h1>
<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 class="icon3">
<img src="images/icon3.png" alt="icon3" width="150" height="125">
<h1> icon3 </h1>
<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>
</section>
Here is the CSS for them:
.container > #main-headergrid {
display: flex;
flex-direction: row;
align-items: center;
}
#main-footer {
height: 250px;
background-color: var(--grey);
align-items: center;
display: flex;
justify-content: space-between;
padding: 0px 325px 0px 0px;
}
footer {
height: 350px;
background-color: #000;
text-emphasis-color: #FFF;
}
if you want alignment in 2 dimensions its better to use css grid, and not flexbox
good resource for css grid
flexbox is good if you want vertical or horizontal alignment if you need both look into using css grid.
or you could use margins and padding to manually move elements but would make your page less responsive.
according to what you've stated in comment I guess this is the result you want to achieve. If I misunderstood it then please tell me in comment I will edit the answer according to your need.
#main-headergrid {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
}
#main-footer {
height: 250px;
background-color: var(--grey);
display: flex;
justify-content: space-between;
margin-top:20px;
text-align:center;
}
footer {
height: 350px;
background-color: #000;
text-emphasis-color: #fff;
}
<section id="main-headergrid">
<img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="image1">
<img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="image2">
<img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="image3">
</section>
<section id="main-footer">
<hr>
<div class="icon1">
<img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="icon1" width="150" height="125">
<h1> icon1 </h1>
<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 class="icon2">
<img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="icon2" width="150" height="125">
<h1> icon2 </h1>
<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 class="icon3">
<img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="icon3" width="150" height="125">
<h1> icon3 </h1>
<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>
</section>
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% }
I have fixed height grid items with title and description. Title and description have different length and font-size. I need to show title fully (usually takes 1 - 4 lines) and the rest space should take description. How to avoid cutting description in the middle of the line?
.item{
display: block;
float: left;
margin: 10px;
height: 200px;
width: 150px;
padding: 10px;
background: black;
color: white;
overflow: hidden;
}
.title{
font-size: 21px;
line-height: 1.5;
}
.description{
font-size: 14px;
line-height: 1.5;
}
<div class="item">
<div class="title">
One line title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title
</div>
<div class="description">
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 can't offer you a solution per se as I don't think a decent one exists. However, might I suggest removing the fixed height that is causing the issue and instead use something like flexbox to match the item heights with that of the tallest item in the row? It's a different approach but is far more flexible.
In addition to matching the heights I would also consider limiting the length of the string returned (if it becomes too uncomfortable) using a server side language like SQL, PHP or C# or trim it and show the full text in a title tag.
.items {
display: flex;
flex-wrap: wrap;
}
.item {
box-sizing: border-box;
margin: 10px;
width: 150px;
padding: 10px;
background: black;
color: white;
overflow: hidden;
flex: 0 1 calc(50% - 20px);
}
.title {
font-size: 21px;
line-height: 1.5;
}
.description {
font-size: 14px;
line-height: 1.5;
}
<div class="items">
<div class="item">
<div class="title">
One line title
</div>
<div class="description">
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.
</div>
</div>
<div class="item">
<div class="title">
One line title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title
</div>
<div class="description">
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>
</div>
Truncation:
Here are a few methods for truncating text in various languages:
SQL
select
left(column, 150) + '...' column
from yourtable
PHP
substr($string,0, 150);
C Sharp
string.Substring(0, 150);
JS
string.substring(0, 150);
You can add a min-height to the title to push the content a little and avoid breaking text when the title is one line.
You can also adjust the line-height of the first line of the title to be different from the other and this will help you to fix the issue with multi-line titles (if of course you are ok with changing this value) :
.item {
display: block;
float: left;
margin: 10px;
height: 200px;
width: 150px;
padding: 10px;
background: black;
color: white;
overflow: hidden;
}
.title {
font-size: 21px;
line-height: 1.1;
min-height: 40px;
}
.title:first-line {
line-height: 1.7;
}
.description {
font-size: 14px;
line-height: 1.5;
}
<div class="item">
<div class="title">
One line title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title very long title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title very long title title very long title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title very long title title very long title long title
</div>
<div class="description">
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 don't think there is an easy solution to this.
You can adjust the line-height and margin values of the .title to ensure that the text doesn't cut awkwardly.
For a title with 3 lines, one option (for webkit browsers) is to add text-overflow: ellipsis and use line-clamp to keep the text on 2 lines.
For what it's worth, I think a tighter line height on the title looks a better too.
.item {
display: block;
float: left;
margin: 10px;
height: 200px;
width: 150px;
padding: 10px;
background: black;
color: white;
overflow: hidden;
}
.title {
font-size: 21px;
line-height: 1.2;
margin-bottom: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.description {
font-size: 14px;
line-height: 1.5;
}
<div class="item">
<div class="title">
One line title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Two lines very long title
</div>
<div class="description">
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>
<div class="item">
<div class="title">
Three lines makes a very long title
</div>
<div class="description">
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 working on a layout with the following attributes:
Fixed header (content should scroll up under it)
Fixed 100% height column (left menu)
Content area
Footer that A. sticks to bottom if content is short, or, B. is pushed down with longer content (off screen)
I have managed to get 1,2,3 and 4 A. working. But I can't get the footer to get pushed down by the longer content. I based my initial workings on css reset (example here:http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/), but, I am assuming that my fixed header and left column are not helping.
I'd really appreciate any pointers/suggestions on how I might overcome this.
Here is my code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Layout</title>
<style type="text/css">
html,
body { height: 100%; padding:0;margin:0; }
#sc_admin_wrapper {
min-height:100%;
position:relative;
background:#fff;
margin: 0;
}
#sc_admin_header{
width:100%;
height:50px;
position:fixed;
top:0;
background: #212121;
z-index:9995;
color:#fff;
}
#sc_admin_logo {
width:20%;
float: left;
}
#sc_admin_menu {
position:fixed;
top:50px;
bottom:0;
float:left;
width: 20%;
margin: 0;
background: #3d3d3d;
color: #fff;
}
#sc_admin_content {
float: left;
margin:50px 0 0 20%;
width: 77%;
padding: 0.5% 1.5% 30px 1.5%;
}
#sc_admin_footer {
background: #ffcc00;
width: 77%;
height: 30px;
position:absolute;
bottom:0;
left:0;
margin: 0px 0 0 20%;
padding: 0 1.5% 0 1.5%;
}
</style>
</head>
<body>
<div id="sc_admin_wrapper">
<div id="sc_admin_header">
<div id="sc_admin_logo"><h1>Fixed header</h1></div>
<div class="clear"></div>
</div>
<!-- / #sc_admin_header -->
<div id="sc_admin_menu">
<p>Fixed height column at 100%;</p>
<div class="clear"></div>
</div>
<!-- / #sc_admin_menu -->
<div id ="sc_admin_content">
<div id="sc_msgs"></div>
<p>This would be my short or long content.</p>
<p>I should scroll under the header.</p>
<p>My footer should be fixed at the bottom of the screen if content is
short, or, scroll should the content be longer.</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>
<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 class="clear"></div>
</div>
<!-- / #sc_admin_content -->
<div id="sc_admin_footer">
This is my fixed footer
<div class="clear"></div>
</div>
<!-- / #sc_admin_footer -->
</div>
<!-- / #sc_admin_wrapper -->
</body>
</html>
Hmmm, I think you you almost got it right! You just missed a couple CSS/structural details. You need to add a style definition for the .clear class, as follows:
.clear{
clear:both;
}
Then, you need to move the .clear div element at the bottom of .sc_admin_content out of it, so that it lies in between .sc_admin_content and .sc_admin_footer.
Here's a JSFiddle example of what this would then look like. (Try deleting content and pressing "Run", and see that the footer stays stuck to the bottom!) If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
Use four z-layers in your code:
At the top, put your text with opaque background.
In the layer below it, put one copy of your footer using position: fixed; in its class.
In the layer below that, have a div that is height: 100%; width: 100% and is opaque (i.e., has the same background color as your text) and travels with your text on scroll.
In the layer below that, put another copy of your footer that will travel with your text on scroll.
The z-order of these elements might not produce the exact effect, but it should point you in the right direction.