I have a fixed position element. I want it position on the bottom and to take up 100% of the screen width. It keeps taking the width of it's parent from the center. The blue container starts from the locatino of the red instead of the view port.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="width: 800px; background-color: red; height: 1500px; margin: 0 auto; position: relative; z-index: 999">
<div style="background-color: blue; width: 100%; height: 350px; position: fixed; bottom: 0; z-index: 9999">
</div>
</div>
</body>
</html>
I didn't understand exactly what you mean.
But you can located the blue element in abetter way.
.blue{
position:fixed;
height:350px;
/*make 100% width*/
left:0;
right:0;
bottom:0;
}
Related
I started writing my first website, and tried to center the container id in CSS using various methods found on the web (the most common of which being margin-left:auto; margin-right:auto;) but it simply won't work, and I have no idea why, or what could I do about it (I know, I could make a table with three columns in the html file, but I don't want to mix and match tables and divs)
My code so far looks like this:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="content">
hello world!
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
Solution #1:
Replace position: absolute; with position: relative; in #content(CSS).
JSFiddle - DEMO and Full Screen View
body, html {
background-color:#FFF;
height:100%;
}
#content {
width:980px;
height: 100%;
background-color:#FCC;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
text-align:center;
}
<div id="content">hello world!</div>
More Info about margin: 0 auto; center to work:
What, exactly, is needed for margin: 0 auto; to work?
Solution #2:
Add left: 50%; and margin-left: -490px; (half width of #content div) to #content
JSFiddle - DEMO and Full Screen View
#content {
width: 980px;
background-color: #FCC;
position: absolute;
display: block;
top: 0px;
bottom: 0px;
margin-left: -490px;
left: 50%;
text-align: center;
}
Container is in center you need to align text in the center if you want,
align:center
should be
text-align:center;
Demo
Are you trying to center the "Hello world" text?? If add
text-align: center;
Instead of
align:center;
You can't center something with position: absolute; on it, as far as I know. position: absolute; means, that the div has an absolute positioning to something.
If you want to center it, then you could wrap the container, in a div, with position: relative; on it, and then center that one.
Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<div id="content">
hello world!
</div>
</div>
</body>
</html>
With this CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#wrapper {
position: relative; /* Needs to be there, for the #content-container to know,
what it's relative to. */
width: 100px; /* Needed as well */
display: block; /* For older browsers */
overflow: hidden; /* For older browsers */
margin: 0 auto 0; /* Adds the margin that centers it. */
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
The other way is just to replace this from your code:
position: absolute;
top: 0px;
bottom:0px;
With this:
position: relative;
Then your code should work as well...
Why do you want to center it, with position: absolute; ? Perhaps you want to achieve something, that there is another way of doing...
I've used the search function and it just will not center as I cannot make sense of some suggestions and those I can do not work. Google leaves me no results either.
I want to use 1 div as a 'background as such' so that the first 150px of the screen down are blue.
Then I want the logo in a centered box 950px wide by 150px down.
The 'logo div' (I've called it headercontent) needs to be 'on top' of the headerbackgroundblue div, which I have managed.
However it will not center the box within that div (950px wide centered will store all content so that it looks good on all screens, however the blue is 1920px wide to make the website look better on larger resolutions.
CSS
body {
padding: 0;
margin: 0;
}
.headercontent {
z-index: 2;
position: absolute;
height: 150px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin-right: auto;
margin-left: auto;
background-color: #3c56a6;
z-index: 1;
position: absolute;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kleenzone - Commercial Cleaning Services</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="bluebackgroundtop"></div>
<div class="headercontent">
<H1> KLEENZONE </H1>
</div>
</body>
</html>
You need to have the .headerContent inside of the .bluebackgroundtop div, and then style like this:
* {
padding: 0;
margin: 0;
}
.headercontent {
height: 150px;
width: 950px;
margin:0 auto;
text-align:center;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin:0 auto;
background-color: #3c56a6;
}
DEMO
I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer.
Now I have so far done this:
<!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>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
Now if we check the CSS:
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#navbar{
height:100%
// rest of your code
}
Same to your content
call it something like content, because body is already used.
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
EDIT: your full code would look like this:
<!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>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
More detail here
...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).
I have the following simple html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#page {
position: relative;
width: 1000px;
min-height: 300px;
margin: 0 auto;
border: 1px solid red;
background-color: green;
}
#allcontent {
position: static;
top: 225px;
margin: 225px auto 0px auto;
width: 850px;
background-color: blue;
}
#content {
border: 1px solid white;
}
</style>
</head>
<body>
<div id="page">
<div id="allcontent">
<div id="content">
<p>This is content</p>
</div>
</div>
</div>
</body>
</html>
It looks exactly like I want it to look like, but if I remove the border from #page it totally screws up the layout. I can't figure out why. I know, I could have a transparent border as a workaround, but it seems odd...
Because you have margin:225px auto 0px auto in your <div id="allcontent"> that pushes the whole content down.
Instead of using margin, use position:absolute/relative to position your element in your <div id="page">.
The margin for #allcontent is pushing it down.
http://jsfiddle.net/2QjYG/
I am trying to build a two column header with minimum width of 1024px. I would like the window to cut of the right side of the site when a viewer's screen is smaller than 1024px, but I keep getting weird results, like the left side moving in. Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
<style type="text/css">
body{
margin:0;
padding:0;
background-image:url(images/bground.jpg);
background-repeat:repeat-x;
}
#contentwrapper{
float: left;
width: 100%;
min-width:1024px;
background-image:url(images/header_middle.jpg);
background-repeat:no-repeat;
background-position:center top;
}
#contentcolumn{
margin-left: 351px; /*Set left margin to LeftColumnWidth*/
background-image:url(images/header_right.png);
background-repeat:no-repeat;
height:318px;
background-position:right;
}
#leftcolumn{
float: left;
width: 351px; /*Width of left column*/
margin-left: -100%;
background-image:url(images/header_left.png);
background-repeat:no-repeat;
height:300px;
}
</style>
</head>
<body>
<div id="contentwrapper">
<div id="contentcolumn"></div>
</div>
<div id="leftcolumn">
</div>
</body>
</html>
Try this
CSS
div.wrapper {
width: 100%;
min-width: 1024px;
}
div.one {
width: 300px;
float: left;
height: 300px;
}
div.two {
height: 300px;
}
HTML
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
Live Example
http://jsfiddle.net/HKrbn/