I have a header that should always be displayed on top of the page about 20px from the top.
Right now it is defined with two divs and working the way it's supposed to.
http://jsfiddle.net/nBgj4/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
.subheader-left {
position: absolute;
top: 20px;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
position: absolute;
font-family: sans-serif;
font-size: 12px;
top: 20px;
right: 20px;}
</style>
<title>XYZ</title>
</head>
<body>
<div class="subheader-left">XYZ<br /></div>
<div class="subheader-right">LOREM</div>
</body>
</html>
As soon as I try to encapsulate the two DIV tags with a "header" DIV tag and assign it the elements that both encapsulated divs have in common (top: 20px) it breaks the design.
I always assumed that nested divs inherit from their parent divs and want to understand why this is not working in this case. I assum it is because of the "position: absolute" tag, but "position: relative" breaks the design.
thanks
http://jsbin.com/emulel/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
.header {top:20px;}
.subheader-left {
position: relative;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
position: relative;
font-family: sans-serif;
font-size: 12px;
right: 20px;}
</style>
<title>XYZ</title>
</head>
<body>
<div class="header">
<div class="subheader-left">XYZ<br /></div>
<div class="subheader-right">LOREM</div>
</div>
</body>
</html>
you mix a few things up:
header has no position assigned, so top: 20px; is useless. If you position elements, absolute will always positioned against a relative positioned element.
You should go for float:
keep your html like it is and add this CSS:
.header {
overflow: hidden;/* to contain the floated elements */
}
.subheader-left {
float: left;
}.subheader-right {
float: left;
}
Something like this should see you on the right path:
http://fiddle.jshell.net/3gZNM/3/
No need for absolute positioning.
You need
.subheader-left {
float:left;
}
.subheader-right{
float:right;
}
That's because in the first example, the divs have position:absolute, so their width is minimal.
But on the second one they have position:relative and its display is block, so they expand and their width is maximal. Then the second div goes to the second line.
But if you add floating, their width will be minimal and they will stay at the same line. Moreover, the second div will go to the right.
But then remember to change header's overflow into hidden, auto or scroll, or add <div style="clear:both"></div> at the end of the header.
Related
I’m trying to drift away from using tables and I'm now trying to create a simple div-based layout - header, content, footer divs with 100% width and no parent div. But I'm having a little problem with it. My content and footer divs overlap header div if I ever insert anything there. They appear right in the middle of the header div. If they are empty they appear normally. But the moment I insert header image in it the problem starts.
I tried to change float and display properties, but it gives me strange output. Can anyone help me position them vertically one after another?
Here is the HTML code:
<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>
And here are the css styles:
div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}
div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
}
div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
}
div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}
.innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
}
You are using absolute and relative positioning a lot
and they are making your layout look Bad and elements are over lapping.
Also you don't need to define margin and every other properties many times
html, body{
width 100%;
height:100%;
margin:0px;
padding:0px;
}
div{
display:block;
margin:auto;
}
Horizontal Layout
CSS-Reset
Vertical Layout
Just remove all position:absolute from CSS rules and you are done.
Here is a solution for you. You don't need to specify width=100 Without defining a width, it is 100% by default. Simply specify the width you want for the body and every other container will be that width. float: left; will prevent containers from stacking vertically. They will actually stack horizontally.
Rather than using many Ids for Div, you can simplify the tags with HTML5 tags in such a way as below.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style type="text/css">
body {
margin: 0 auto;
}
menu {
height: 20px;
background-color: #800000;
text-align: center;
margin: 0px;
}
header {
background-color: #0FF;
text-align: center;
margin: 0px;
}
article {
margin: 0px;
text-align: center;
background-color: #0CC;
}
footer {
margin: 0px;
text-align: center;
background-color: #CF3;
}
section {
height: 100px;
margin: auto;
background-color: #C30;
}
</style>
</head>
<body>
<menu>topmenu</menu>
<header>Header
<article>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/04/1-google-logo-tutorial.gif" />
</article>
</header>
<section>content</section>
<footer>footer </footer>
</body>
</html>
I know that we normally use margin:auto however I am using the code below.
HTML :
<article>
<header></header>
</article>
CSS:
article{
max-width: 500px;
margin: auto; /* goes in the middle - great */
}
header{
width: 130%;
margin-left: -30%;
}
Demo
At this point I am placing the article in the center. However, as the browser/window size gets smaller, I would like to center the article as if its width was as wide as the header. Basically, at some point (as you shrink the browser window) the header will be at the edge on the left, whilst not taking advantage of the blank space on the right.
I don't want to have an extra div, but if I did, I would wrap the article in a div and give it an auto margin.
screenshot http://i3.minus.com/i2yPFqNDgeBbS.png
Maybe I'm misunderstanding something, but don't you just want:
margin-left: 15%;
on the header?
This code does what is described, but if you want to keep the two edges aligned you would need to get into some javascript, I recommend jquery for this kind of thing.
<html>
<head>
<title></title>
<style>
html, body {
width: 100%;
text-align: center;
}
.header {
width: 960px;
margin-left: auto;
margin-right: auto;
position: relative;
left: -100px;
background-color: blue;
}
.article {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="article">TODO write content</div>
</body>
</html>
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.
I have some problem about css layout.
I wrote the code like below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<style>
html { height:100%; margin: 0px; padding: 0px; }
body {
height: 100%;
padding: 0px;
margin: 0px;
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
background: #fff;
color: #333;
}
#header {
position: absolute;
width:100%;
background: #c0c0c0;
height: 100px;
}
#wrapper {
height: 100%;
width: 100%;
}
#content {
position: relative;
margin-left: 370px;
background: #ffdab9;
height: 100%;
}
#sidebar {
position: absolute;
background: #eee8aa;
width: 370px;
height: 100%;
}
</style>
<body>
<div id="header">header</div>
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
</body>
</html>
then, the thing what I want to do is
"header"'s height is 100 pixel.
"sidebar(left side)"'s width id 370 pixel.
"content(right side)"'s width is relative.
When I control the browser smaller, I do not want browser to make "scroll bar".
like http://maps.google.com. google maps never make scroll bar when any resizing browser.
num.4 is most important that I told.
If the goal is made it, my code can be fixed all. Please give me any help.
I think you need two css changes (also see my jsfiddle):
add overflow: hidden to body
body {
...
overflow: hidden;
}
change position to relative in #header:
#header {
position: relative;
...
}
=== UPDATE ===
There are (at least) three possible solutions, but none is perfect:
1.) Your example site from google calculates the (content) height at the beginning and after each resize with javascript.
Negative: not css only, you need a script.
2.) Add the height of the header (here 100px) to the css bottom definition of all elements in the sidebar and content (see demo2).
Negative: if the header height changes, you have to update all bottom definitions too.
#words {
bottom: 102px;
...
}
3.) Use the css function calc for the #wrapper to calculate the real height (see demo3).
Negative: at the moment it works only with firefox4 (and above) and IE9.
#wrapper {
...
height: calc(100% - 100px);
height: -moz-calc(100% - 100px);
}
I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Then using
<div id="container>
<!-- Centered Content Goes here-->
</div>
But it just wont go to the center. It stays at the left side of the page.
An example of the CSS for the element that I want to be centered is this:
#topHeader
{
background:url(images/top_header.jpg);
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
So, my HTML would look like this:
<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>
But as I mentioned before, the element stays put.
Thanks!
Eric
Try with this
dead centre
The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.
Start off by removing the absolute positioning from the #topHeader element.
Try adding this to the top of your css file:
// Wipes out any preexisting padding and margin.
html, body {
padding: 0;
margin: 0;
}
Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.
You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.
absolute
The box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left'
properties. These properties specify
offsets with respect to the box's
containing block. Absolutely
positioned boxes are taken out of the
normal flow. This means they have no
impact on the layout of later
siblings. Also, though absolutely
positioned boxes have margins, they do
not collapse with any other margins.
- 9.3.1 Choosing a positioning scheme: 'position' property
Absolute:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
Relative:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:relative;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
One thing to check when trying out all of these methods of centering is to make sure that your doctype is correct for the method that is being used.
Hope this helps for you.
As far as I know it simply doesn't work. text-align centers text or inline content, not block elements.
Edit: On the other hand The Disintegrator's link makes sense. Unfortunately, only for fixed-sized blocks.