I'm creating a website that contains a footer, on the left side just simple text. On the far right will be icons with links to various social networking sites. I can't get the icons to stay inside the container when I float the image to the right. How can I get the image to stay inside the yellow area and out of the green without adding any more padding to the footer?
http://jsfiddle.net/Fd4Pc/1/
body {
background-color: #17241d;
margin: 0;
}
#mainWindow {
width: 1200px;
margin-left: auto;
margin-right: auto;
background-color: #fffff6;
height:100%;
}
.right {
float:right;
}
footer, .footer {
font-size: .8em;
padding:10px;
}
<body>
<div id="mainWindow">
<p>Text here</p>
<div id="footer">
<footer>
<span>Left Side</span>
<img class="right" src="http://static.viewbook.com/images/social_icons/facebook_32.png" />
</footer>
</div>
</div>
</body>
Try adding overflow:auto to your footer:
footer, .footer {
font-size: .8em;
padding:10px;
overflow:auto;
}
jsFiddle example
You can also set a line-height to your footer: http://jsfiddle.net/Fd4Pc/3/
footer, .footer {
font-size: .8em;
padding:10px;
line-height: 2em;
}
floated element will expand the parent element height, to expand that add float to the parent as well:
footer, .footer {
font-size: .8em;
padding:10px;
float:left;
}
This can be done in two ways
Add overflow: hidden to footer
or
clear div that is
<footer>
<!--your code goes here-->
<div style="clear:both"></div>
</footer>
Related
I have tried many different methods mentioned here and elsewhere on the web, but none of them do what I want it to achieve.
I currently have elements on a webpage positioned and styled with the code below. Then below that, I have a footer div that I want to be at the bottom of the page content (see attached images). If the content height is less than the screen height, I can either have the footer at the bottom of the screen or directly under the content (both work). If the content is larger than the screen, I want the footer to be at the bottom of the page content, so that when the user scrolls down they see the footer.
Right now, My bottom-sec div is the footer (not the one that actually has id footer), but it is sticking to the bottom of the viewport, not to the bottom of the content. So, if the content is greater than the screen, the footer overlaps over the page content.
I think it may be because of the position: relative in the indiitem divs, however I need them to be there for the rest of the page to work.
Here's my code
.items-container {
margin-left: 45px;
margin-right: 45px;
display: flex;
flex-wrap: wrap;
position: absolute;
}
#bottom-sec {
position: fixed;
bottom: 10px;
width: 100%;
}
#footer {
margin: 20px;
margin-top: 0px;
display: flex;
flex-wrap: wrap;
}
#footer > div {
margin: 35px;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="items-container">
<div class="indiitem" style="position: relative;">
<div class="list-item">
<img src="https://imgur.com/c3cv6SW.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
The_Tiger_Shirt
<h5 style="font-size: 13px; margin: 0; padding: 0;">$1000</h5>
</div>
</div>
<div class="indiitem" style="position: relative;">
<div class="list-item">
<img src="https://imgur.com/nIZxLpA.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
Basic_Hoodie
<h5 style="font-size: 13px; margin: 0; padding: 0;">$50</h5>
</div>
</div>
<div id="bottom-sec">
<hr style="width: 170px; text-align: center; margin-top: 50px;">
<div id="footer">
<div id="links">
<h4>M_E_N_U:</h4>
A navbar is supposed to be here--took up too much space so it isn't included
</div>
<div id="mailform">
<form method="POST" action="/shop" id="enter_email">
<input type="text" name="email" id="email" required>
<input type="submit" value=">>>>" id="emailpost">
</form>
</div>
</div>
When I tried position: absolute on my 'bottom-sec' div, would be at the bottom of the viewport, overlapping with my content, but if I scrolled down, it stayed in the same position in the middle of the content.
When I tried removing the position or position: relative, the footer completely ignored the page content and moved up to be right under my header.
Any help would be appreciated!
You need a set height into body,html tag.
Then you need a absolute position into #footer tag
For example like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* adjust to footer height */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
One of the simplest and cleanest ways without having to mess with too many display modes is by taking advantage of flexbox. It's really simple, I wrote an article explaining it in depth here:
It's geared towards bulma but in the last paragraph I also share how this would work without a framework like bulma. There is also a codepen that you can open and edit. If you need any help, let me know :)
I'm experiencing an issue with overflow content in divs. I am using SharePoint and some of the content [namely Libraries or Lists or big webparts containing the aforementioned] will extend past the visible display space, but the body content doesn't scroll properly.
My structure looks something like this:
html {100%}
body { background: #010831; font: 500 1em 'Raleway'; height: auto; min-height: 100%; margin:0; overflow:hidden;}
#container { margin: 0 auto; min-height: 100%; }
#topBar {background: #010831; font: inherit; padding: 5px; height: 80px; margin-bottom: 1px;}
.topline {width:100%; height:20px; font-size:0.8em; color:#fff;}
.social {width: 30%; float:right; text-align: right; font-size: 1.2em;}
#searchBar {width: 25%; float:right;}
#searchBox {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1.2em;}
#quicklaunch {width:18%; min-height: 35%; color: #666; font: 600 1em 'Raleway'!important; padding-top:4px;}
#main {width:100%; background:#fff; display:flex;}
#s4-workspace {width:auto!important; overflow:auto!important; background:#fff;}
#content {width:80%}
#footer {background:#000; width:100%}
<body>
<div id="s4-workspace">
<div id="bodyContainer">
<div id="container">
<!-- this is the beginning of my custom coding, and my own styles. -->
<header id="topnav">
TOP NAV MENU HERE
</header>
<section id="main">
<div id="quicklaunch"> SIDE NAV HERE</div>
<div id="content"> ALL USER DRIVEN CONTENT GOES HERE</div>
</section>
<footer id="footer"></footer>
</div>
</div>
</body>
What's happening is that the Content div that's set to 80% won't display content that extends past the screen properly. The content overflows but the background is my body color (dark Blue). I can't set the content div width to 100%, as that will make the entire div go under the sideNav AND it affects how webparts then display. [They stretch across the entire screen forever, since by default SP allows the webparts to take up full width of their containing zone].
Essentially, all I want is for the background color of my content div to stretch when the content overflows.
I am working on a page for employees biography with one picture. The biography (content) to display on the left and photo of the employee on the right as sidebar. The page also have footer with full width.
I used CSS to layout the page, and float:left both content and photos and set the width divided accordingly, but the photo (aside) does not display on the right and it appear under the content, however I used display:inline properties for both content and aside. I am trying to display the aside on the right side of the article.
article, h1, aside, footer {
padding: 20px;
}
h1 {
width: 100%;
background-color: gray;
}
article {
width: 60%
float: left;
display: inline;
}
aside {
width: 40%;
float: left;
display: inline;
}
footer {
width: 100%;
background-color: gray;
clear: both;
}
<body>
<article>
<h1>Biography</h1>
<p>General Information goes here</p>
<p>Rest of information goes here</p>
</article>
<aside>
<h2>Employee Photo</h2>
<img src="http://placehold.it/350x150" />
</aside>
<footer>
<p>Copyright goes here</p>
</footer>
</body>
A couple of issues should be corrected:
You have width set to 60% and 40% for article and aside, however they also have padding:20px, that make the total width over 100%, an easy fix would be set box-sizing:border-box, it makes the padding as part of the % width.
If you set float:left on an element, that turns it to a replaced element, display:inline or block won't take any effects.
There is an syntax error, it's missing ; at the end of width: 60%.
It would better to also set img {max-width:100%; height:auto;}, to make it to be responsive.
Below is the updated example:
* {
box-sizing: border-box;
}
article, h1, aside, footer {
padding: 20px;
}
h1 {
background-color: gray;
}
article {
width: 60%;
float: left;
}
aside {
width: 40%;
float: left;
}
footer {
background-color: gray;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
<body>
<article>
<h1>Biography</h1>
<p>General Information goes here</p>
<p>Rest of information goes here</p>
</article>
<aside>
<h2>Employee Photo</h2>
<img src="http://placehold.it/350x150" />
</aside>
<footer>
<p>Copyright goes here</p>
</footer>
</body>
Wrap it with a flex container will do.
<div style="display:flex">
<article>...</article>
<aside>...</aside>
</div>
<footer>...</footer>
I'm trying to align text on the left and on the right side of my footer. The problem is that the text on the right falls a line below the text on the left. I want them to be even on the same line. Any help would be appreciated! Thanks for the help!
Here's my code: http://jsfiddle.net/kc6AL/
HTML
<!--Footerline-->
<div id="footerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<!--Footer-->
<div id="footer">
<h3 class="copyright">Copyright Stuff.</h3>
<h3 class="social">Social Links.</h3>
CSS
#footerline {
width: 100%;
overflow: hidden;
margin: 5px auto 10px auto;
text-align: center;
}
#footer {
max-width: 980px;
text-align: center;
margin: auto;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
text-transform:uppercase;
font-weight : 300;
font-size : 14px;
color : #000;
}
.copyright {
text-align: left;
}
.social {
text-align: right;
}
I've forked your jsfiddle:
http://jsfiddle.net/82ZU8/
the key here is to float the <h3/>s
CSS
.copyright {
float: left;
}
.social {
float: right;
}
HTML
<!--Footer-->
<div id="footer">
<h3 class="copyright">Copyright Stuff.</h3>
<h3 class="social">Social Links.</h3>
<div style="clear: both"></div>
</div>
Note that you must clear the floated blocks, so the footer div will be fixed.
The reason that the text-align approach doesn't work in the way you will expected, is because <h3 /> is a block element, so it will fill the entire width and causing the next h3 to go to next "line". Giving the float to a block element, will cause the element to shrink to its content and allowing other elements to be aside of it.
Just change your text-align to float for both .copyright and .social and you're golden.
EDIT Here's a jsFiddle demo with some unnecessary stuff removed: http://jsfiddle.net/kc6AL/6/
Do this: (Add the floats to your css)
.copyright {
float:left;
text-align: left;
}
.social {
float:right;
text-align: right;
}
I would simply use one h3 and float the social icons within that head tag.
Updated fiddle
<h3 class="copyright"><span class="social">Social Links.</span>Copyright Stuff.</h3>
CSS
.social { float: right; }
just add display: inline;
to your h3 element.
see this: http://jsfiddle.net/kc6AL/3/
for more information: http://learnlayout.com/display.html
This is not happening in chrome or ie. Firefox instead is adding 50px after my footer. with analyze element and firebug it is showing that that space is outside html tags. here is the link: http://www.sociallab.ro/index_romana
Thanks!
html:
<html>
<body>
<div id="main">
</div>
<footer>
<div class="message_lab"><img src="images/logo_mic.png" alt="Tineret in Actiune"/></div>
</footer>
</body>
</html>
css:
html{
margin: 0;
padding: 0;
}
footer{position:relative;
top: -50px;
width:1060px;
height:50px;
overflow:hidden;
text-align: center;
margin:0 auto;
padding:0;}
body{
margin-top:0px;
margin:0 auto;
padding:0;
text-align: center;
height: 1950px !important;
background:url(../images/bg.png) left top repeat; }
A few things:
There should not be a <div> tag inside <a> tag.
There is a height for body and #wrap.
For the footer, please remove the top: -50px; and replace it with negative margin as margin-top: -50px;.
To make the footer link align center
Without using div, use this way:
<footer>
<a target="_blank" href="http://www.messagelab.ro">
<img alt="Tineret in Actiune" src="images/logo_mic.png">
</a>
</footer>
And CSS:
footer a {display: block; text-align: center;}
Insted of using top:-50px, use margin-top:-50 px on the footer and the problem is solved.