Right now I have a footer that is always at the bottom of the page. This is fine until I have more content than can fit on the page, which means when you scroll down, the footer scrolls up as if its fixed..
Here is my CSS:
.footerWrap{
clear: both;
position:absolute;
width:100%;
bottom:0;
}
.footer {
position: relative;
margin-bottom: 0px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #000000;
color: #FFFFFF;
}
.footerLinks{
padding-left: 150px;
text-align: left;
}
.footerLinks p {
display: inline;
}
.footerLinks a {
color: #169e98;
}
.footerSocial{
text-align: right;
}
And my HTML:
<!--Footer-->
<div class="footerWrap">
<div class="footer">
<div class="footerLinks">
Privacy Policy<p> |</p>
Sitemap<p> |</p>
<p>© 2017</p>
</div>
<div class="footerSocial">
<img src="image/findfb.png" alt="Find us on Facebook">
</div>
</div>
</div>
Essentially, I want to put the footer Div below the text content.
it is very easy :
wrap your html code in
<div class="page">
...
</div>
and just add css
.page{
position:relative;
}
that is all
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I'm trying to specify content specifically somewhere on the page, How can i do this so that it'll always be in the exact same spot even when screen size changes?
jsfiddle = https://jsfiddle.net/4pkgfgwh/1/
<div class="container">
<img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
.container {
text-align: center;
}
.display {
position:absolute;
TOP:45px;
LEFT:350px;
}
Use position: relative on the parent container:
HTML
<div class="container">
<div class="image-container">
<img src="http://i.imgur.com/iGIFvH6.png">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
text-align: center;
}
.image-container {
display: inline-block;
position: relative;
width: 354px;
height: 228px;
}
.container img {
width: 100%;
}
.display {
position: absolute;
top: 10px;
left: 200px;
}
JSFiddle demo: https://jsfiddle.net/ompfnjc5/2/
On my page I have two elements in a header area. I would like the first element to be centered in the middle of the header area and a second element that is pushed all the way to the right side of the header area. I achieved the desired effect using this code:
<div id="header-area" style="text-align:center;width:100%;">
<div id="partition1" style="display:inline-block;width:33%;"></div>
<div id="partition2" style="display:inline-block;width:33%;">
<div id="element1" style="display:inline;width:400px;height:100px;">
<h3 style="display:inline;width:400px;">Main title Goes Here</h3><br/><br/>
<p style="display:inline;width:400px;">Subtitle goes here</p>
</div>
</div>
<div id="partition3" style="display:inline-block;width:33%;text-align:right;">
<div id="Element2" style="display:inline;width:150px;vertical-align:middle;">
<button onclick="history.back();" style="height:45px;width:100px;">
Back</button>
</div>
</div>
</div>
You will notice I partitioned the header-area into three spaces and aligned the element1 & element2 within their respective partitions. How can I achieve the same layout without partitioning the header-area?
There's several ways to do this. Here are two:
Option #1: Float
The HTML:
<div id="header">
<div class="right">Element on right end</div>
<div class="center">Center-Aligned Element</div>
</div>
The CSS:
#header {
text-align: center;
}
#header div.center {
margin: 0 auto;
text-align: center;
width: 30%;
}
#header div.right {
float: right;
text-align: right;
}
Option #2: Position absolute
The HTML:
<div id="header">
<div>Center-Aligned Element</div>
<div class="right">Element on right end</div>
</div>
The CSS:
#header {
text-align: center;
}
#header div {
text-align: center;
width: 30%;
margin: 0 auto;
}
#header div.right {
position: absolute;
top: 0;
right: 0;
text-align: right;
}
Example Using Your Elements:
The HTML:
<div id="header">
<h3>Main Title Goes Here</h3>
<p>Subtitle Goes Here</h3>
<button>Element on right end</button>
</div>
The CSS:
#header {
text-align: center;
}
#header h3,
#header p {
margin: 0 auto;
text-align: center;
width: 30%;
}
#header button {
position: absolute;
top: 0;
right: 0;
}
i have a page with 3 parent divs , now im having problems positioning the divs inside the header div.
my code is something like this:
divs layout:
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
<div id="menu">menu</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
css is something like this:
.body {
background-color: #ffffff;
margin: 0px;
background-repeat: repeat-x;
background-image: url(imgs/back.png);
}
#layout {
margin:auto;
width: 1024px;
background-color: #ffffff;
}
#main {
background-color: #ffffff;
}
#header {
background-color:#0F0;
height: 300px;
}
#body {
margin-left: 180px;
margin-right: 180px;
padding: 5px;
background-color: #ffffff;
}
#footer {
margin-left: 180px;
margin-right: 180px;
padding: 0px;
background-color: #ffffff;
}
#right {
float: right;
width: 180px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#left {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
#clear {
clear:both;
}
i want to put in a position of header div (e.g. vertical: center , horizontal: 0 px (0 pixels of the header div not of the total page) on left side) and menu in other position (e.g. vertial: top , horizontal: between the center and right side (center and right side of header div only again).
i would appreciate a solution.
thanks to all.
I could be more helpful if you could clarify your question.
I am not sure of what your are asking for in terms of the location for the header.
Here is an approach to move the menu between the center and the right column. Nest the menu and the right hand column in another right aligned div. For the purposes of example I have called it right-container.
Here is the HTML
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right-container">
<div id="menu">menu</div>
<div id="right">right</div>
</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
And here are the css statements I added:
#right-container {
float: right;
width: 360px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#menu {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
You can see the fiddle here:
http://jsfiddle.net/SkLvX/
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari