Given the following HTML:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
I would like #copyright to stick to the bottom of #container. Can I achieve this without using absolute positioning?
Likely not.
Assign position:relative to #container, and then position:absolute; bottom:0; to #copyright.
#container {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Actually, the accepted answer by #User will only work if the window is tall and the content is short. But if the content is tall and the window is short, it will put the copyright info over the page content, and then scrolling down to see the content will leave you with a floating copyright notice. That makes this solution useless for most pages (like this page, actually).
The most common way of doing this is the "CSS sticky footer" approach demonstrated, or a slightly slimmer variation. This approach works great -- IF you have a fixed height footer.
If you need a variable height footer that will appear at the bottom of the window if the content is too short, and at the bottom of the content if the window is too short, what do you do?
Swallow your pride and use a table.
For example:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#container {
height: 100%;
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
<table id="container">
<tr>
<td valign="top">
<div id="main">Lorem ipsum, etc.</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="footer">Copyright some evil company...</div>
</td>
</tr>
</table>
</body>
</html>
Try it out. This will work for any window size, for any amount of content, for any size footer, on every browser... even IE6.
If you're cringing at the thought of using a table for layout, take a second to ask yourself why. CSS was supposed to make our lives easier -- and it has, overall -- but the fact is that even after all these years, it's still a broken, counter-intuitive mess. It can't solve every problem. It's incomplete.
Tables aren't cool, but at least for now, they are sometimes the best way to solve a design problem.
The flexbox approach!
In supported browsers, you can use the following:
Example Here
.parent {
display: flex;
flex-direction: column;
}
.child {
margin-top: auto;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
flex-direction: column;
}
.child {
height: 40px;
width: 100%;
background: #f00;
margin-top: auto;
}
<div class="parent">
<div class="child">Align to the bottom</div>
</div>
The solution above is probably more flexible, however, here is an alternative solution:
Example Here
.parent {
display: flex;
}
.child {
align-self: flex-end;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
}
.child {
height: 40px;
width: 100%;
background: #f00;
align-self: flex-end;
}
<div class="parent">
<div class="child">Align to the bottom</div>
</div>
As a side note, you may want to add vendor prefixes for additional support.
Yes you can do this without absolute positioning and without using tables (which screw with markup and such).
DEMO
This is tested to work on IE>7, chrome, FF & is a really easy thing to add to your existing layout.
<div id="container">
Some content you don't want affected by the "bottom floating" div
<div>supports not just text</div>
<div class="foot">
Some other content you want kept to the bottom
<div>this is in a div</div>
</div>
</div>
#container {
height:100%;
border-collapse:collapse;
display : table;
}
.foot {
display : table-row;
vertical-align : bottom;
height : 1px;
}
It effectively does what float:bottom would, even accounting for the issue pointed out in #Rick Reilly's answer!
Pure CSS, without absolute positioning, without fixing any height, cross-browser (IE9+)
check out that Working Fiddle
Because normal flow is 'top-to-bottom' we can't simply ask the #copyright div to stick to the bottom of his parent without absolutely positioning of some sort, But if we wanted the #copyright div to stick to the top of his parent, it will be very simple - because this is the normal flow way.
So we will use this in our advantage.
we will change the order of the divs in the HTML, now the #copyright div is at the top, and the content follow it right away.
we also make the content div stretch all the way (using pseudo elements and clearing techniques)
now it's just a matter of inverting that order back in the view. that can be easily done with CSS transform.
We rotate the container by 180deg, and now: up-is-down. (and we inverse back the content to look normal again)
If we want to have a scroolbar within the content area, we need to apply a little bit more of CSS magic. as can be showed Here [in that example, the content is below a header - but its the same idea]
* {
margin: 0;
padding: 0;
}
html,
body,
#Container {
height: 100%;
color: white;
}
#Container:before {
content: '';
height: 100%;
float: left;
}
#Copyright {
background-color: green;
}
#Stretch {
background-color: blue;
}
#Stretch:after {
content: '';
display: block;
clear: both;
}
#Container,
#Container>div {
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
<div id="Container">
<div id="Copyright">
Copyright Foo web designs
</div>
<div id="Stretch">
<!-- Other elements here -->
<div>Element 1</div>
<div>Element 2</div>
</div>
</div>
CSS Grid
Since the usage of CSS Grid is increasing, I would like to suggest align-self to the element that is inside a grid container.
align-self can contain any of the values: end, self-end, flex-end for the following example.
#parent {
display: grid;
}
#child1 {
align-self: end;
}
/* Extra Styling for Snippet */
#parent {
height: 150px;
background: #5548B0;
color: #fff;
padding: 10px;
font-family: sans-serif;
}
#child1 {
height: 50px;
width: 50px;
background: #6A67CE;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
<div id="parent">
<!-- Other elements here -->
<div id="child1">
1
</div>
</div>
Create another container div for the elements above #copyright. Just above copyright add a new div:
<div style="clear:both;"></div>
It will force the footer to be under everything else, just like in the case of using relative positioning (bottom:0px;).
Try this;
<div id="container">
<div style="height: 100%; border:1px solid #ff0000;">
<!-- Other elements here -->
</div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
Copyright Foo web designs
</div>
While none of the answers provided here seemed to apply or work in my particular case, I came across this article which provides this neat solution :
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
I find it very useful for applying responsive design for mobile display without having to reorder all the html code of a website, setting body itself as a table.
Note that only the first table-footer-group or table-header-group will be rendered as such : if there are more than one, the others will be rendered as table-row-group.
You can indeed align the box to the bottom without using position:absolute if you know the height of the #container using the text alignment feature of inline-block elements.
Here you can see it in action.
This is the code:
#container {
/* So the #container most have a fixed height */
height: 300px;
line-height: 300px;
background:Red;
}
#container > * {
/* Restore Line height to Normal */
line-height: 1.2em;
}
#copyright {
display:inline-block;
vertical-align:bottom;
width:100%; /* Let it be a block */
background:green;
}
Using the translateY and top property
Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).
BenefitS
you do not take the element from the page flow
it is dynamic
But still just workaround :(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
Don't forget prefixes for the older browser.
CodePen link here.
html, body {
width: 100%;
height: 100%;
}
.overlay {
min-height: 100%;
position: relative;
}
.container {
width: 900px;
position: relative;
padding-bottom: 50px;
}
.height {
width: 900px;
height: 50px;
}
.footer {
width: 900px;
height: 50px;
position: absolute;
bottom: 0;
}
<div class="overlay">
<div class="container">
<div class="height">
content
</div>
</div>
<div class="footer">
footer
</div>
</div>
If you want it to "stick" to the bottom, regardless of the height of container, then absolute positioning is the way to go. Of course, if the copyright element is the last in the container it'll always be at the bottom anyway.
Can you expand on your question? Explain exactly what you're trying to do (and why you don't want to use absolute positioning)?
If you do not know the height of child block:
#parent {
background:green;
width:200px;
height:200px;
display:table-cell;
vertical-align:bottom;
}
.child {
background:red;
vertical-align:bottom;
}
<div id="parent">
<div class="child">child
</div>
</div>
http://jsbin.com/ULUXIFon/3/edit
If you know the height of the child block add the child block then add padding-top/margin-top:
#parent {
background:green;
width:200px;
height:130px;
padding-top:70px;
}
.child {
background:red;
vertical-align:
bottom;
height:130px;
}
<div id="parent">
<div class="child">child
</div>
</div>
You can use grid by assigning the available space to the content at the top:
#container {
display: grid;
grid-template-rows: 1fr auto;
height: 10rem; /* or 100% or anything */
}
<div id="container">
This is random content.
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Also, if there's stipulations with using position:absolute; or position:relative;, you can always try padding parent div or putting a margin-top:x;. Not a very good method in most cases, but it may come in handy in some cases.
Solution for this specific scenario:
Place inner at the bottom of parent . The height of the parent is set by the height of its "tallest" sibling
The set up:
I have a row with multiple <div class="container">
These <div class="container"> are next to each other inside another <div class="supercontainer">
Each <div class="container"> has 3 inner divs on top of each other: <div class="title">, <div class="content">, <div class="footer">
The desired result:
All <div class="container"> have the same height. The height is not defined in px, it will be the height of the "tallest" among them.
<div class="title"> should be at the top of <div class="container">
<div class="content"> should be placed below <div class="title">
<div class="footer"> should be placed at the bottom of <div class="container"> without overlapping with the previous content
This is the current state: https://codepen.io/xavier-atero/pen/ExvWQww
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
}
<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>
__________ Solution with FLEXBOX __________
This is the outcome: https://codepen.io/xavier-atero/pen/MWvpBMz
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
display: flex;
flex-direction: column;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
margin-top: auto;
border: solid 1px fuchsia;
}
<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>
__________ Solution with TABLE-ROW __________
This is the outcome: https://codepen.io/xavier-atero/pen/rNzyKJm
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
border-collapse:collapse;
display : table;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
border: solid 1px fuchsia;
display: table-row;
vertical-align: bottom;
height: 1px;
}
<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>
#container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Don't wanna use "position:absolute" for sticky footer at bottom. Then you can do this way:
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer{
background: #000;
text-align: center;
color: #fff;
}
.footer,
.push {
height: 50px;
}
<html>
<body>
<!--HTML Code-->
<div class="wrapper">
<div class="content">content</div>
<div class="push"></div>
</div>
<footer class="footer">test</footer>
</body>
</html>
Here is an approach targeted at making an element with a known height and width (at least approximately) float to the right and stay at the bottom, while behaving as an inline element to the other elements. It is focused at the bottom-right because you can place it easily in any other corner through other methods.
I needed to make a navigation bar which would have the actual links at the bottom right, and random sibling elements, while ensuring that the bar itself stretched properly, without disrupting the layout. I used a "shadow" element to occupy the navigation bar's links' space and added it at the end of the container's child nodes.
<!DOCTYPE html>
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
<span id="copyright-s">filler</span>
</div>
<style>
#copyright {
display:inline-block;
position:absolute;
bottom:0;
right:0;
}
#copyright-s {
float:right;
visibility:hidden;
width:20em; /* ~ #copyright.style.width */
height:3em; /* ~ #copyright.style.height */
}
</style>
Maybe this helps someone: You can always place the div outside the other div and then push it upwards using negative margin:
<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
Copyright Foo web designs
</div>
Just because this hasn't been mentioned at all, what usually works well in situations like yours:
Placing the copyright-div after the container-div
You would only have to format the copyright-div in a similar way to the other container (same overall width, centering, etc.), and all is fine.
CSS:
#container, #copyright {
width: 1000px;
margin:0 auto;
}
HTML:
<div id="container">
<!-- Other elements here -->
</div>
<div id="copyright">
Copyright Foo web designs
</div>
The only time this might not be ideal is when your container-div is declared with height:100%, and the user would need to scroll down to see the copyright. But even still you could work around (e.g. margin-top:-20px - when the height of your copyright element is 20px).
No absolute positioning
No table layout
No crazy css, that looks different in every other browser (well IE at least, you know)
Simple and clear formatting
Aside: I know the OP asked for a solution that "... sticks to the bottom of the 'container' div ...", and not something under it, but come on, people are looking for good solutions here, and this is one!
There is nothing called float:bottom in CSS. The best way is using positioning in such cases:
position:absolute;
bottom:0;
For those only have one child in the container, you can use the table-cell and vertical-align approach which worked reliably for positioning a single div at the bottom of its parent.
Note that using table-footer-group as other answers mentioned will break the height calculation of parent table.
#container {
display: table;
width: 100%;
height: 200px;
}
#item {
display: table-cell;
vertical-align: bottom;
}
<div id="container">
<div id="item">Single bottom item</div>
</div>
According: w3schools.com
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
So you need to position the parent element with something either relative or absolute, etc and position the desired element to absolute and latter set bottom to 0.
Please, i need some help here. 2 days i can't solve this elementary task. I'm new to the web design and may be this is easy but i just can't understand, why when i use align:left/right or position:absolute for the child divs – main div just disapaer... I want aside bar to the left, tabs under it, and the main content on the right. Please give me some advise, when i do wrong?
Here's a sample:
<div id="main_container">
<aside id="aside1">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
</div>
And the CSS:
#main_container {
background: #fff;
border-radius: 5px;
box-shadow: 1px 2px 5px 0px #606060;
-moz-box-shadow: 1px 2px 5px 0px #606060;
-webkit-box-shadow: 1px 2px 5px 0px #606060;
position: relative;
}
#aside1 {
margin: 10px 10px;
background: #c0c0c0;
width: 250px;
}
#container {
width: 680px;
}
.tabs {
}
I know that my Css is not finished but i just confused what should i do or use.. position, float, display...
I appriciate any advices!
position: absolute takes an element out of document flow. So, as far as that container is concerned, that child element no longer exists (at least in the sense it doesn't need to reserve space for its layout).
So if all the child elements of a container are positioned as absolute, then that container has no space which it needs to reserve, and collapses.
One solution would be to give the container a defined height, such as #container { height: 100vh; } which will set the height of the container to 100% of the viewport height.
Another solution would be to use something like the flexbox model.
Floated/absolutely positioned containers are removed from the "flow" of a document. This means that any containers around them don't think they exist anymore and the parent containers won't expand to fit around them. If you're using floats, the way to fix this is to put an element underneath the floated elements that uses clear: both like this:
<div id="main_container">
<aside id="aside1" style="float: left">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
<div style="clear: both"></div>
</div>
for example the CSS in a other way
#main_container {
width: 500px;
}
#main {
display:table;
}
#aside1 {
display:table-cell;
width: 40%;
background-color:#faf;
}
#container {
display: table-cell;
background-color:#555;
}
first you have to modify the structure:
<div id="main_container">
<div id="main">
<aside id="aside1">
<ul>...</ul>
</aside>
<div id="container">
<p>...</p>
</div>
</div>
<div id="bottom">
<div class="tabs">
<img src="images/tab1.png"/>
</div>
</div>
Then the css. The divs have to be defined with display:inline;
Mike
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I am relatively new to StackOverflow and am experiencing some difficulties while making a webpage
So what I require is a one page website divided into different sections, which are full-width divs (i.e 100% width of the screen)and are consecutive with different background colors.
The problem I am facing is that the divs do not take up the full width of the screen and have white space not only on the sides, but also between 2 divs
Also, when the window size reduces, the gap between divs increases
The desired result is as observed in the following websites:
http://classrebels.com/
http://startbootstrap.com/templates/freelancer/
The code I am using is as follows:
i) HTML:
<html>
<body>
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
</body>
</html>
ii) The CSS:
.full{
width= 100%;
}
#one{
background-color: #fff;
}
#two{
background-color: #f13;
}
Please do tell me where I am going wrong
Demo
html
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
css
body, html {
width: 100%;
height: 100%;
margin:0; /* default margin set to 0 */
padding:0; /* default padding set to 0 */
}
.full {
width: 100%;
}
#one {
background-color: gray;
height: 50%; /* whatever you want to give height */
}
#two {
background-color: #f13;
height: 50%; /* whatever you want to give height */
}
.full h1 {
margin:0; /* default margin of h1 tag set to 0 */
padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
Demo Fiddle
To remove the default margin/padding on the viewport (which is giving you the whitespace), you need to add the following CSS:
html, body{
width:100%; /* <-- also a good idea to add */
margin:0;
padding:0;
}
and change:
.full{
width= 100%;
}
to:
.full{
width:100%;
}
CSS style property/value pairs are seperated with a colon : and not an equals =
have you tried setting margin and padding 0 in full and in body tag too
like
.full
{
width :100%;
margin:0px;
padding:0px;
}
similarly your heading also takes some margin so set the margin of heading as required.
for better please consult this link w3schools
You have to change the body and h1 margins, since they have default values in the browser.
I've fixed it for you in this fiddle:
h1{
margin: 0px;
}
body{
border: 0px;
padding: 0px;
margin: 0px;
}
http://jsfiddle.net/pWLgb/
the problem is that you dont give the whole div a background color but only the text.
if you ad a border you can see the real size of the div and it will fill the whole div with color.
check out the fiddle i made for that
border: 1px solid black;
http://jsfiddle.net/2h4kQ/
you can set the border to 0px so it is not shown and it will give you the right result
The demo's that you linking to aren't using full width divs. They actually use a full width <section> element which has the background color set on it.
Then, they have an inner row <div> which then has a container and column <div>. So in the Freelancer example it looks like this:
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="#" class="btn btn-lg btn-outline">
<i class="fa fa-download"></i> Download Theme
</a>
</div>
</div>
</div>
</section>
Sample of the CSS:
section.success {
color: #fff;
background: #18bc9c;
}
.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Download that template, it uses Bootstrap, and play around with it to get the look you want.
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)