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.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I have a parent element (div) with a fixed width of 1200px. There are no borders or padding on this element.
I have three inline child elements (divs) with fixed widths of 400px. Again, no borders, padding or margins.
I want my three child elements to sit on the same line but instead the third one gets pushed down. If I reduce their widths to 397px they all sit on the same line.
Why can't I divide the width of a parent container exactly by the number of children I want to sit abreast within that container? Much the same way that I can't define those child elements as percentage widths that add up to 100% (ie four children of all 25% width)?
This happens due to the extra spacing cause by the white space in the code itself. You can fix it by either writing the markup in a way that makes sure there are no white space or you can set the parent div's font-size to 0 so no white space is visible (make sure you then set the children div font's size back to normal)
In this example I've used the first method as it is cleaner
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div><div class="child"></div><div class="child"></div>
</div>
style
.parent {
width: 1200px;
background-color: #333;
margin: 20px 0; /* outer margin doesn't matter */
}
.parent .child {
width: 400px;
height: 300px;
display: inline-block;
background-color: #ccc;
}
The first box doesn't work, the second does as I've left no space between the closing and opening tags of the child elements
http://jsbin.com/cifedis/edit?output
You need to use float:left to your children in order to achieve this
.parent {
width: 1200px;
height: 200px;
background: pink;
}
.child {
float: left;
width: 400px;
display: inline-block;
background: red;
}
<div class="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
</div>
You can add css like this=>
.parent_container{
width:1200px;
float:left;
}
.child1,
.child2,
.child3{
float:left;
width:400px;
display: inline-block;
}
inline-block elements (which I'm guessing you are using), by default, have a white space after them, which might cause the issue you are seeing.
There are a number of ways to remove this in the html itself, one of them being adding a comment between the two inline-block elements. I prefer this approach, as its more readable.
.parent {
width: 600px;
height: 50px;
background: grey;
}
.child {
display: inline-block;
width: 200px;
height: 50px;
background: pink;
}
<div class="parent">
<div class="child">1</div><!--
--><div class="child">2</div><!--
--><div class="child">3</div>
</div>
You can also start the divs in the same line, like below, forgoing the comment
<div>content</div><div>
content</div
There is lots of solution I prefer flexbox
.parent {
display: flex;
}
.child {
flex:1 1 400px;
background-color:red;
max-width: 400px;
height: 400px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
If you really want to use with inline-block either make font-size:0; to the parent or do not change the line while creating children element
.parent{
width:1200px;
}
.child {
background-color:red;
width: 400px;
height: 400px;
display: inline-block;
}
<div class="parent">
<!-- Do Not change line of children-->
<div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>
please read details https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Just Give Parent Div Font Size 0px Below is the Code,
You Can Also do the same by float Left But This is the Best Way :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pratice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.contaniner {
width:1200px;
font-size: 0px;
}
.threelock {
background: #000;
width: 400px;
height: 400px;
display: inline-block;
}
.yllow {
background: yellow;
}
.red {
background: red;
}
</style>
<body>
<div class="contaniner">
<div class="threelock"></div>
<div class="threelock red"></div>
<div class="threelock yllow"></div>
</div>
</body>
</html>
What is the easiest way to align a div to center widthout using position. i have 3 div and i want to set center of page with using CSS
<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
float:right;
}
</style>
<body>
<div id="content">
content 1
</div>
<div id="content">
content 2
</div>
<div id="content">
content 3
</div>
</body>
</html>
You are using same ids multiple time. ids must be unique.
Use class instead.
Wrap all content divs in an element:
HTML:
<div class="container">
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
</div>
CSS:
.container {
width:606px; /* (200*3) = 600 + (6px for borders) */
margin:0 auto;
}
.content {
width: 200px;
height: 200px;
border: 1px solid #000;
float:left;
}
DEMO here.
First of all, don't use ID like class, you can repeat ID so many times but it's a bad practice.
And I'm not sure if I understood it right, but remove float:right from your css which will get your div's one below another. You can see output fiddle
Here is the css with few line of code
.container{width:100%;}
.container div{border:1px solid red;margin:0 auto;width:200px;}
Give it a width and do margin: 0 auto;
Ow, and use an unique id.
first of all you are using "id" selector for 3 elements/containers which is wrong.
replace the style with below snippet
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
}
</style>
i just have removed the floating (which forcing your containers to be on right)
Wrap divs with a parent div and add margin:0 auto
.wrapper{
width:200px;
margin:0 auto;
border:solid 2px red
}
.content{
background:grey;
}
DEMO
You want to modify your code as less as possible?
Then you might want to delete your floating:
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
/*float:right;*/
}
Because you are using a margin to center the element, a float is not neccesary. A float will only put the element out of the flow(so basically the <body> doesn't see these elements as his content, which results that the elements cannot center them selves from their parent. There is no parent of the same flow!)
jsFiddle
It is also a good call to not use the same IDs. IDs should always be unique
However same IDs are supported by CSS, but it is a good practice to use unique IDs from now on.
You can use the margin: 0 auto; on the element which has to be placed in the center. However in order to do this the element must have some sort of a wrapper(not "body") to be able to use the auto setting.
<html>
<head>
</head>
<body>
<div id="page_wrapper">
<div id="div_1" class="centered_div">foo</div>
<div id="div_2" class="centered_div">foo</div>
<div id="div_3" class="centered_div">foo</div>
</div>
</body>
</html>
CSS:
#page_wrapper{
width:100%;
}
.centered_div{
margin: 0 auto;
}
This centers all elements which have the class centered_div to the middle of their parent.
Other option is to used fixed canter position. For example if you're creating a popup notification message, this might be a way to go.
.notification_window{
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
But if it's just a regular page element like a div with some content use the first example.
If you need any further explanations please comment.
I am attempting to create a webpage layout template my aim is header, footer and 2 column between, the 2 columns are what are giving me the biggest headache, I want the left column to be a fixed width, and the right column to fill the remaining area, I have successfully completed this also. But I also want both columns’ to fill the raining space vertically also and when the content fills more than the space I am looking each column to be scolded separately and not use the normal Brower scroll bar
My current html code is as follows
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style/default/style.css" />
</head>
<body>
<div class="container">
<div class="header">
HEADER
</div>
<div class="content">
<div class="content-contain">
<div id="content-col1">
COLUMN 1
</div>
<div id="content-col2">
COLUMN 2
</div>
</div>
</div>
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>
CSS
* {
margin: auto;
}
html, body {
height: 99%;
background-color: #FFFFFF;
font-family:sans-serif;
}
.container {
min-height: 100%;
height: auto !important;
height: 99%;
margin: 0 auto -1em;
}
.header {
color:#FFFFFF;
background-color:blue;
border-bottom:3px solid blue;
}
div#content-col1{
float:left;
width:220px;
padding:3px;
display:block;
padding-left:5px;
overflow-y: auto;
background-color: red;
}
div#content-col2{
margin-left: 230px;
margin-bottom:40px;
padding: 3px;
overflow-y: auto;
background-color: green;
}
.footer {
background-color:yellow;
clear:both;
}
If anyone has a better or know what I can do to make this work sucessfully please let me know
Vip32
To fill the entire width with two columns where one has a fixed with, please refer to this question.
Vertical filling is a little different. On default, the body and block elements have a dynamic height. Because the body is dynamic too, you have to set it an height in order to make the content full vertically as well.
body, div#container, ... { height: 100%; }
Some people think it's best to apply an height to the html element as well. I have my doubts, because that tag is not visible.
If you have an element that requires some height as well, like an header, or footer, please refer to the same solution for fixed width's but apply it on the height instead.
I am creating a sample website which has three divisions horizontally.
I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype
Here's a better way to format your document:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Here's a jsFiddle for good measure.
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}
<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>
Just had to add display:flex to the container! No floats required.
You can use floating elements like so:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Note the overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future
It's not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Here in your question
I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.
I want to point few things here
Do not use inline css ( it is very bad practise )
Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.
Codepen link for my answer
https://codepen.io/feizel/pen/JELGyB
.wrapper {
width: 100%;
}
.box {
float: left;
height: 100px;
}
.box:nth-child(1) {
width: 25%;
background-color: red;
}
.box:nth-child(2) {
width: 50%;
background-color: green;
}
.box:nth-child(3) {
width: 25%;
background-color: yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
You add a
float: left;
to the style of the 3 elements and make sure the parent container has
overflow: hidden; position: relative;
this makes sure the floats take up actual space.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.
Get rid of the position:relative; and replace it with float:left; and float:right;.
Example in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>