My problem is that when I am resizing the browser window, the first text breaks up. It should never break up the words, just show the entire sentence no matter how small the window gets. I've tried with queries, but can't figure out how to do it correctly. See the image to understand the issue.
<div class="row">
<div class="col-sm-7">
<ul class="list-inline">
<h2>
<li class="list-inline-item">LYD</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LYS</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LED</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">AV</li>
</h2>
</ul>
</div>
<br>
<div class="col-sm-5">
<div class="middle">
<h2>
<span class="glyphicon glyphicon-earphone"></span> 57 67 18 14
</h2>
</div>
</div>
</div>
CSS:
ul li { display: inline; }
ul.list-inline{
text-align: center;
padding-right: 15px;
}
.middle{
margin-bottom: 60px;
padding-right: 15px;
}
The main issue here is that the content, namely the list and list items all inherit their width from the containing col-7.
If you know the exact width of the text you can just put an exact width property on it-
ul {
width: 302px;
}
In a more dynamic way, though, you can use either white-space or max-content
/* white-space */
ul {
white-space: nowrap
}
/* max-content*/
ul.list-inline {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
Note: I would be displaying this page on my SharePoint 2010 site.
I am trying to use CSS table to display and following is my HTML code for it:
<div id="cr">
<ul class="contact-img">
<li><img src="Landing page/Contacts/CassWade.png"></li>
<li>Cass Wade<br/>Project Manager</li>
<li><img src="Landing page/Contacts/Meredith.png"></li>
<li>Meredith<br/>HR Head</li>
<li><img src="Landing page/Contacts/Simon.png"></li>
<li>Simon<br/>CEO</li>
<li><img src="Landing page/Contacts/Roger.png"></li>
<li>Roger<br/>Director</li>
<li><img src="Landing page/Contacts/Sharyl.png"></li>
<li>Sharyl<br/>Employee</li>
</ul>
<hr/>
</div>
Here is my CSS for the above page:
.contact-img{
position: relative;
list-style:none;
display:table;
border:none;
padding:none;
margin:none;
}
.contact-img li
{
display:table-cell;
padding:10px 10px 10px 10px;
vertical-align:middle;
margin-left: 25px;
}
I was trying to display these images and its corresponding name in tabular format. The problem with this table is that width of the cell is getting resized as per the content of the cell. However, i want to fix the table cell width (no restrictions on height). Also I want to restrict the number of columns to 4. Any more entries should go to next row.
Any help on how to achieve would be highly appreciated. Thanks in advance.
My solution uses flexbox CSS3 properties to allow the boxes to be aligned and to wrap if the window gets to small. If you don't want this additional responsive behavior, you can change the max-width for width which in any case limits the number element to 4 per line.
I had to add boxing (div) inside to fix the cell size.
HTML:
<ul class="container">
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=1"></div>
<div class="description"><div>Cass Wade<br/>Project Manager</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=2"></div>
<div class="description"><div>Meredith<br/>HR Head</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=3"></div>
<div class="description"><div>Simon<br/>CEO</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=4"></div>
<div class="description"><div>Roger<br/>Director</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=5"></div>
<div class="description"><div>Sharyl<br/>Employee</div></div>
</div>
</li>
</ul>
CSS:
.container {
list-style: none;
-webkit-padding-start: 0px; /* fixing Chrome auto style */
display: flex;
flex-wrap: wrap;
max-width: 800px; /* max 4 items of 200px width per line */
}
/* the content as a bloc */
.inside-container {
width: 200px;
height: 100px;
display: flex; /* makes the description to stay next to the image */
}
.inside-container div {
width: 100px;
height: 100px;
}
.inside-container div.description {
text-align: center;
}
.inside-container div.description div {
display:table-cell;
vertical-align: middle;
}
Hope it helps!
edit:
To center your text horizontally you need the container to have text-align: center;.
To center horizontally, you need to put your text in a <div> and add these properties display: table-cell; vertical-align: middle;. It's not as beautiful as I would like, but it works well!
On load I'd like to load the topsection div with a bg image and have it take up the entire screen, but then I have content below it which you can scroll down to. The div should size itself to the window screen only on load and not remain like that on scrolldown. I cannot give the div a position:absolute; either.
I'm banging my head on this one. I've tried a ton of different things
Here is my html:
<div id="topsection" class="row bgimage ">
<div id="logomain" class="mainlogo ">
<div class=" floorplanbuttoncontainer helvetical">
<ul>
<li>Residence A - Duplex</li>
<li>
Residence D - Simplex</li>
</ul>
</div><!-- end floorplanbuttoncontainer -->
</div><!-- end logomain -->
Here is my css for the background image:
.bgimage {
background: url(images/image.jpg) no-repeat center center fixed;
background-size: cover;
.mainlogo {
margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
background-image:url(images/picture.png);background-repeat:no-repeat;
background-position: center;
}
In order to set a div to take up the entire screen you need to set the height of the body and html element to 100%. You also have to remove the padding and margin from them. Then you create a wrapper class to encase your content and assign it your background-image. Then all ya' gotta do is create the content below your full screen image to scroll into!
Fiddle
Edit
If you run the snippet below and hit full page you can see how it works.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
background: red;
}
.full {
width: 100%;
}
.footerThing {
width: 100%;
height: 200px;
background: blue;
}
<div class="wrapper">
<div class="full">
asd
</div>
</div>
<div class="footerThing">
</div>
Modern browsers: a simple way is to use vh units to get the Viewport Height
Just to simplify: jsBin demo
<div id="home" class="container full">
<h1>HOME</h1>
</div>
<div id="about" class="container">
<h1>About us</h1>
<p>Content</p>
</div>
CSS:
.container { min-height:400px; }
.full { height:100vh; }
Crossbrowser: use % instead of vh and simply add html, body{height:100%;} jsBin demo
I'm not sure what the issue here is, but its frustrating the hell out of me. I have a header div, for the logo and links, a wrapper div for the main section, and then a footer. width is set to 100% for all, but for some reason there is an overflow of white space spilling over on the right side and on the bottom. And it does this funky thing where if I move my mouse to the white space below the footer the contact link in my header is selected!
Theirs a fair bit of html and css so I decided to just link you guys to a jfiddle, it will be easier to just show you the problem in action. notice how you can scroll to the right and there is white space, even though the wrapper has background color set to grey, header has background set to white, and footer has background set to grey. all have 100% widths as well.
There is even white space coming in below the footer for some reason.
I hope all this makes sense and thanks for your help. I'm sure its something silly and obvious but I'm still kind of new to this!
http://jsfiddle.net/46andtool/Q2d4K/2/
heres the main div css
/*body element*/
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; }
/*contains #main and #footer*/
#wrapper { width:100%; background-color:grey; border: none;}
#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/
/*div that contains the banner and navigation*/
.header {width: 100%; margin: 0 auto; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
/*Logo*/
#banner {float: left; max-width: 100%; margin: 0; padding: 0;}
/*navigation*/
#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; }
and the html:
<body>
<div class="header">
<img id="banner" src="img/******.png" alt="*******">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>*****</li>
<li>******</li>
<li>******</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="wrapper">
<div id="main">
<div id="innermain">
<h1>Latest News and Events</h1>
<h2>Welcome to !</h2>
<p>gsfdgdfgsdfgsdfg
</p>
<div id="linebreak"></div>
<p>gfdhgdfhfgh</p>
<br>
<p>hgdhfghgfh</p>
<br>
<p>gdhfgdhfghfgh</p>
<br>
</div>
<div id="rightside">
<h1>Where To Find Us</h1>
<div id="buildingpic"></div>
<div id="map_canvas"></div>
<p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
</div>
</div>
</div>
<div id="footer">
Site design by <a class ="links" href="example#yahoo.com">fsgfdg</a></a> © <?php echo date('Y');?> All Rights Reserved
</div>
</body>
There are a couple things causing issues here.
Your body automatically comes with a margin, so it's going to overflow if you don't specifically set the margin:0px;
Your #footer had a width:100%; but it also had padding:10px. Those are combined, so you had width:100% + 10px of padding. Try to do something like what I provided, which is width:94%; and padding:10px 3%; so your width becomes 94% + 3% + 3% = 100%
Lastly, your #buildingpic element had width:300px which in this case was wider than the container it was in. You would be better off making it width:100% and height:auto; to automatically constraint to the proportions of it's container. In this case I set the max-width:100%;
http://jsfiddle.net/Q2d4K/4/
Also, you're going to have a hell of a time if you always use IDs. Try to use classes for elements so you can re-use them if need be, or at least not have issues with duplication or priority of selection.
With or without a top nav, it is very common for sites to have a sticky footer. Bootstrap has a facility to easily create fixed footers, but no such facility for creating sticky footers - there is a big difference.
Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.
Ironically, the Bootstrap documentation page itself has a sticky footer alongside bootstrap styling and a fixed top navbar. It's all custom css though, and not part of the framework. So an obvious route is to take and refactor their custom styling, since it obviously plays well within the Bootstrap framework, but that seems more painful than it ought to be.
See this plunkr for an example page with a Bootstrap top navbar, and an undesirable, non-sticky footer.
Problem:
(Thanks Softlayer - for the graphics)
Desired Solution:
Of course the footer should be responsive and cross-browser friendly as well...
The answer, as Schmalzy points out, can be found here in the examples section of the getbootstrap site.
But that example does not include a top nav. For fixed top nav with sticky footer, see this plnkr, or code below.
Style CSS:
/* Styles go here */
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Sticky footer solutions that rely upon fixed-height footers are falling out of favour in with responsive approaches (where the height of the footer often changes at different break points). The simplest responsive sticky footer solution I've seen involves using display: table on a top-level container, e.g.:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
The best way is to do the following:
HTML:Sticky Footer
CSS: CSS for Sticky Footer
HTML Code Sample:
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS Code Sample:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Another little tweak might make it more perfect (depends on your project), so it will not affect footer on mobile views.
#media (max-width:768px){ .footer{position:absolute;width:100%;} }
#media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
I've been searching for a simple way to make the sticky footer works.
I just applied a class="navbar-fixed-bottom" and it worked instantly
Only thing to keep in mind it's to adjust the settings of the footer for mobile devices.
Cheers!
For those who are searching for a light answer, you can get a simple working example from here:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px /* Height of the footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* Example value */
}
Just play with the body's margin-bottom for adding space between the content and footer.
I will elaborate on what robodo said in one of the comments above, a really quick and good looking and what is more important, responsive (not fixed height) approach that does not involve any hacks is to use flexbox. If you're not limited by browsers support it's a great solution.
HTML
<body>
<div class="site-content">
Site content
</div>
<footer class="footer">
Footer content
</footer>
</body>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
Browser support can be checked here: http://caniuse.com/#feat=flexbox
More common problem solutions using flexbox: https://github.com/philipwalton/solved-by-flexbox
Not sure what you have tried so far, but its pretty simple. Just do this: http://plnkr.co/edit/kmEWh7?p=preview
html, body {
height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Since it's in bootstrap 3, the site will be using jQuery. So the solution could also be the following, instead of trying to play with complex CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.my-footer {
border-radius : 0px;
margin : 0px; /* pesky margin below .navbar */
position : absolute;
width : 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Content of any length -->
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
</div>
</div>
<div class="navbar navbar-inverse my-footer">
<div class="container-fluid">
<div class="row">
<p class="navbar-text">My footer content goes here...</p>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $docH = $(document).height();
// The document height will grow as the content on the page grows.
$('.my-footer').css({
/*
The default height of .navbar is 50px with a 1px border,
change this 52 if you change the height of your footer.
*/
top: ($docH - 52) + 'px'
});
});
</script>
</body>
</html>
A different take on it, hope it helps.
Kind regards.
easily set
position:absolute;
bottom:0;
width:100%;
to your .footer
just do it
In case your html has the (rough) structure:
<div class="wrapper">
<div>....</div>
...
<div>....</div>
</div>
<div class="footer">
...
</div>
then the simplest css that fixes footer to the bottom of your screen is
html, body {
height: 100%;
}
.wrapper {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
}
... where the height of the footer is 80px. calc calculates the height of the wrapper to be equal to the window's height minus the height of the footer (80px) which is out of the .wrapper
What worked for me was adding the position relative to the html tag.
html {
min-height:100%;
position:relative;
}
body {
margin-bottom:60px;
}
footer {
position:absolute;
bottom:0;
height:60px;
}
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
</style>
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>