I'm trying to center a div at the bottom of the page and having no luck. I've scoured the web, but keep turning up nothing when attempting to apply their solutions.
Any chance anyone out there might have a solution? See code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
background-color: aqua;
height:100%;
min-height:100%;
}
.centerDiv {
display: table;
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
text-align: center;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="box box1" style="background-color:#585858;"> </div>
<div class="box box2" style="background-color:#118C4E;"> </div>
<div class="box box3" style="background-color:#C1E1A6;"> </div>
<div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body>
</html>
I think you mean, that your div will be at the bottom of page. This would help you:
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
Setting position to fixed and div will stay at a place anytime (also when you scroll down).
The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window. If you want the box to always be at the bottom of the window, then you need to use position: fixed, and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is.
See the demo here for the result with the fixed position.
.centerDiv {
width:100%;
text-align: center;
position: fixed;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
}
Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. That's a bit tougher to do with CSS. However, it's easy with jQuery, if you don't mind using scripting:
See the demo here for the result using jQuery.
var minheight = $(window).height();
$("body").css("min-height", minheight);
and
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
.centerDiv {
width:100%;
text-align: center;
position: absolute;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
div element has an align attribute so it can help:
<div align="center"></div>
Related
I'm new at coding and I've managed to figure out some things, but this one is bugging me deeply as I can't seem to find a solution.
I have an horizontal & vertically centered div on a page. I want to place a header on top of it, without decentering the main div.
How it looks like now (both are centered as a whole):
How I want it to look (yellow is centered, blue header on top):
..
Basic code:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.main {
width: 1000px;
height: 500px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
This is most likely not the best answer, but it's a start.
Baisically I centered the container using this method. Then I added the -50px to the top attribute of the container (half of the header height), moving the container 50px upwards, making the content div totally centered again. This solution should work on most newer browsers, but has some "limits" more here.
HTML
<div class="centered-container">
<div class="header">
header stuff
</div>
<div class="content">
Content stuff here.
</div>
</div>
CSS
body {
background: #600;
}
.centered-container {
position: absolute;
left: 50%;
top: 50%;
top: calc(50% - 50px);
transform: translate(-50%, -50%);
width: 600px;
background: red;
color: white;
text-align: center;
}
.header {
height:100px;
background:blue;
}
.content {
height:300px;
background:teal;
}
fiddle here.
I made the content 600px wide and 300px high and header 100px high, just so it is easier to see.
The negative margin
<!DOCTYPE html>
<html>
<!-- Handles the init code(javascript,css,links) and style references -->
<!-- Also, use body and head tags (THEY ARE IMPORTANT) -->
<head>
<style>
/** Web browsers load whatever is in the <head> tag FIRST
*/
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
/* You can use "margin: 0 auto;" to center this object.
* No need for left and right margin centering.
*
* Also, set the position to be relative then try adding your heading object
*/
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin: 0 auto;
position: relative;
}
/* You don't need the margin to be 0 auto on both right and left
* if you have the width 100%
*/
.main {
width: 100%;
height: 500px;
background-color: yellow;
margin: 0;
}
</style>
</head>
<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)-->
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the
header. -->
<body>
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
</body>
I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
How would one attack such a layout?
Thank You.
Could not post code before - let me try again:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:
My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
Thanks again.
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
Fiddle
http://jsfiddle.net/moby7000/tWb3e/
Its not very hard to create a layout like this.
I created one for you, see that Working Fiddle
HTML:
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:
with a little change in the CSS, you can create a beautiful scrolling.
See that Fiddle
Edit:
If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it that way.
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
you need to add overflow:auto; to the area you want to scroll.
Have you tried
overflow-y: scroll;
in body?
Right now I have...
<header id="background-color">
<img src="header_image.gif" alt="header">
<h1>Header</h1>
</header>
and the relevant CSS is...
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
This puts the image above the h1 obviously. What I'd like to do is left-justify the image and have the h1 centered relative to the whole page (not just the remaining space).
And when I say left-justify, I mean relative to the body and header which are set to be 70% with auto margins. I've got no idea how to do this, I'm totally new to web design.
Thanks.
You can add margin-right: -100%; to image, so header text will not touch the right edge of image. and will align center in header. check this fiddle
header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}
Look at the jsfiddle
http://jsfiddle.net/EScBs/
A quick Answer.. May need to fine tune...
Add wrapping div...
<header id="background-color">
<div id="container">
<img src="Beach_Party.jpg" alt="header">
<h1>Header</h1>
</div>
</header>
Try to use relative positioning and absolute positioning of the child elements
<style>
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
img {
float:left;
text-align:left;
position: absolute;
top:0;
left:0;
}
h1 {
z-index:10;
}
#container {
position: relative;
}
</style>
It worked for me.. Adjust it to suit your case.. Hope it helps!
I'm trying to create a page that takes 100% of the height of the page, without displaying a scroll bar. However, I wanted to add a header above this, and when I do, a scroll bar appears due to extra height. I've tried compensating with a negative bottom margin to compensate for the extra length, but this doesn't seem to change the length. How can I prevent a scroll bar from appearing with this layout?
Here is the code I have:
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
div#header {
background-color: red;
height: 50px;
}
div#content {
background-color: yellow;
height: 100%;
margin-bottom: -50px;
}
</style>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="content">
Test Content
</div>
</body>
</html>
Edit: I did try a margin-top: -50px with a padding-top: 50px on the content div before. However it doesn't behave as I expected, as the content will overlap the header even if I set a z-index.
Here's another way
http://jsfiddle.net/b27e8/
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
div#header {
background-color: red;
height: 50px;
}
div#content {
background-color: yellow;
top:50px;
bottom:0px;
width:100%;
position:absolute;
}
I fixed your problem using:
div#header {
background-color: red;
height: 10%; }
div#content {
background-color: yellow;
height: 90%;
margin-bottom: -50px; }
You might have to play with the %'s to fix that...
Edit: I used Firefox 6 to test that, BTW. You can get exact percentages too, using decimals (eg, 95.6%
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>