I have an HTML page with somewhat large text elements. I want the text to align to the bottom of the containing div so that it touches the bottom of the div.
I tried following but still there is some space between the text and the bottom. Is there any way I can remove this space and make the text touch the bottom?
Here is a live sample of what I have tried.
<html lang="en">
<head>
<style type="text/css">
.bottomAlignedText {
position: relative;
}
.bottomAlignedText span {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
<span style="font-size:300px;">Test</span>
</div>
</body>
</html>
You can do this with line-height
.bottomAlignedText {
position: relative;
}
.bottomAlignedText span {
position: absolute;
bottom: 0;
left: 0;
line-height: 0.7;
}
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
<span style="font-size:300px;">Test</span>
</div>
</body>
Related
I have a div of links that is stuck at the middle of the page. It's like a "press to go to top of page" set of links that is supposed to be belong at the bottom(where I have it in HTML). I believe the problem is that I have an absolute div with 3 divs relative within it, and this has somehow pushed the links that are supposed to belong at the bottom into the "middle" of the absolute div. I just can't seem to get the set of links to sit pretty at the problem after the absolute div with 3 divs in it. Can anyone help me? I've been trying to figure this out all day. Thanks.
Richard
body {
text-align: center;
margin: 0;
padding: 0;
}
#whole {
border: 1px solid black;
position: absolute;
width: 100%;
height: 100%
}
#1 {
border: 1px solid black;
position: relative;
float: right;
}
#2 {
border: 1px solid black;
position: relative;
float: right;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href=example1.css>
<title></title>
</head>
<body>
<h1>Hey</h1>
<div id=whole>
<div id=1>Hi </div>
<br>
<div id=2>Hey</div>
</div>
<div>Links</div>
</body>
You can use position:fixed on links div like this
.links{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
or move links div inside #whole and use position:absolute,
<div id="whole">
<div id="1">Hi </div>
<br>
<div id="2">Hey</div>
<div class="links">Links</div>
</div>
.links{
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here is example fiddle
The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).
My problem: How to prevent the bottom end of the Sheet to be hidden underneath the footer when I scroll down?
All my attempts with padding and margin failed ... (Please only html/css solutions.)
CSS
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red; }
HTML
<body>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
Give margin-bottom to sheet which is equal or grater than footer fix height;
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
}
Update
if you want to bring in front of all then add z-index property.
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
The problem as I see it is the absolute position of the sheet, as absolute positions do not affect the height of the surroundung Element (in your case the body).
If possible try position: relative;. Then your margin can be counted in.
See https://jsfiddle.net/y3mg5zvb/
If it has to be absolute for any reason, you need a surrounding div with relative or static positioning that sets the height of the body.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
max-height: 500px;
overflow: scroll;
top: 45px;
}
</style>
</head>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
</html>
This helps you?
Just don't use absolute position on .Sheet - there's no reason for it. Replace top and left with margin-top and margin-left and use a margin-bottom at least as high as the footer.
.Sheet {
margin-top: 100px;
margin-left: 25px;
margin-bottom: 30px; /* whatever value */
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
}
I think this is a perfect solution!!!
Solution by Joey, adapted by Nik
Set position absolute and margin
<!-- Solution by Joey, adapted by Nik -->
<!-- https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
text-align: right; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange; }
.Sheet {
position: absolute;
top: 200px;
left: 25px;
width: 50%;
background: red; }
.Sheet::after {
position: absolute;
content: "";
bottom: -80px;
height: 80px;
width: 1px; }
</style>
</head>
<body>
<div class="Background">
Background <br><br><br><br><br><br><br><br><br><br><br><br>Background</div>
<div class="Sheet">
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content</div>
<div class="Footer">
Footer</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
main {
z-index: 999;
}
footer {
width: 100%;
min-height: 40px;
background-color: black;
}
footer p{
color: white;
}
<body>
<main>
<p>david</p>
</main>
<footer>
<p>logo</p>
</footer>
</body>
try playing around with z-index and some
How do I get two div areas over each other? On the following website I try to get the search field in center and over the slider:
http://informationen.lensbreak.com
<div style="width: 100%; height: 100%; position: relative;">
<div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">[rev_slider testslider]</div>
<div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;">[search]</div>
</div>
The whole thing should stay responsive.
Try this:
(I added border for each div to help you see areas of divs.)
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
</head>
<body>
<div style="width: 100%; height: 100%; border: red 3px solid">
<div style="width: 100%; height: 100%; border: blue 2px solid ">[rev_slider testslider]</div>
<div style="width: 100%; height: 100%; border: green 1px solid ">[search]</div>
</div>
</body>
</html>
If you want You can also use
<table>
instead of div it can be easier for You.
As a rule you should not use inline-styling if you can avoid it - use classes instead. And below is a solution that will center the searchbox both horizontally and vertically over your slider.
/* This is for your search form */
#completeSearchForm {
margin: 0 auto;
transform: translate(0px, -50%);
}
/* This is for the div that contains the search form */
.your-modifier {
position: absolute;
left: 0;
right: 0;
top: 50%;
}
I have a container with with fixed width and centered. Inside of the container I have two DIVs position relative to the window side by side. Inside of these Divs I've other content which I want to be centered (preferably with container).
here is simplified code: http://jsfiddle.net/jTpGs/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
#container {
width: 960px;
height: 1000px;
background: red;
margin: 0 auto;
}
#windowdiv {
height: 200px;
background: purple;
padding-top: 20px;
position: absolute;
left: 0;
right: 30%;
top: 25px;
}
#windowdiv2 {
height: 200px;
background: blue;
padding-top: 20px;
position: absolute;
left: 60%;
right: 0;
top: 10px;
}
</style>
</head>
<body>
<div id='container'>
<div id='windowdiv'>
<p>some content</p>
</div>
<div id='windowdiv2'>
<p>some content</p>
</div>
</div>
</body>
</html>
Add to this to your CSS to center your text in the middle of those boxes:
#windowdiv p, #windowdiv2 p {
text-align: center;
height: 100%;
line-height: 180px;
}
This is assuming that your boxes are fixed height, because we set the line-height. (200px - 20px (padding-top) = 180px)
Need to fix textarea to the bottom of a div that is scrollable, but not have the textarea spill out of the div like it does when I try to put position: fixed to fix it to the bottom.
If you have a grid layout where there is a scrolling set of text how do you set the text area at the bottom. I have tried position: fixed; and it stretches the width of the entire screen. I need the textarea to fit directly inside the left div. When I use position: relative in the scrolling text div and use position: absolute; in the textarea it puts the textarea at the bottom of the screen but it doesn't stay there when I scroll.
This is what I currently have:
https://codepen.io/anon/pen/QMMjow
This is what I want, but have it pin to the bottom like above:
https://codepen.io/anon/pen/OjjMVK
You can do it by adding another element parallel with textarea and make textarea to bottom of first div.
.messages{
width: 300px;
height: 300px;
box-sizing: border-box;
border: 2px solid #ccc;
position: relative;
overflow: hidden;
padding-bottom: 50px;
}
.message{
width: 100%;
height: 100%;
overflow: auto;
}
.textarea{
width: 100%;
height: 50px;
position: absolute;
bottom: 0; left: 0;
resize: none;
background: red;
}
<div class="messages">
<div class="message">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="textarea"></div>
</div>
You can use the "sticky-footer" method on the textarea to keep it always at the bottom, regardless of the content size. This uses the a negative margin on the content wrapper:
body {
background: #fafafa;
}
.mdl-grid {
padding: 0!important;
margin-bottom: -25px !important;
}
.messages {
position: relative;
}
.mdl-cell {
overflow-x: hidden;
overflow: auto;
min-height:93vh;
background: #bdbdbd;
padding: 0!important;
text-align: center;
color: #424242;
font-weight: bold;
}
textarea {
position: absolute;
bottom: 0;
left: 0;
width: 98%;
height: 25px;
}
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdl-grid">
<div class="messages mdl-cell mdl-cell--4-col">4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<
<textarea></textarea>
</div>
<div class="mdl-cell mdl-cell--8-col">8</div>
</div>
</body>
</html>