This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
<!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>
#a
{
background:#33F;
width:1000px;
height:1000px;
}
#b
{
width:500px;
height:500px;
background:#F00;
}
#c
{
margin-top:50px;
height:200px;
width:200px;
background:#FF0;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
</body>
</html>
Why div#c get margin-ed from the top of the browser instead of getting distanced from the div#b.
CSS has a concept called margin collapse.
Two margins are adjoining if and only if:
...
both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
top margin of a box and top margin of its first in-flow child
you can add position: relative; to the #b element and position: absolute; to the #c element
You are percieving this incorrectly. It is doing exactly what you want it to -when the divs have contents.
I've inserted non breaking spaces to achieve what you were looking for.
http://jsbin.com/ifofix/2/
Below is the other fellows suggestion
http://jsbin.com/ifofix/3/
Related
why is my form div at bottom of parent div? it wants me to say more, but the question has been asked and it's pretty clear... why is the form div appearing at the bottom of my header div? i know i can hack it and give it a negative top margin, but I KNOW that's not proper form. what gives? thx.
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="style.css"/>
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="login">
<input type="text" placeholder="EMAIL ADDRESS" value="" name="email" id="user">
</div><!-- end login div -->
</div><!--end header div -->
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
body {
margin: 0px;
padding: 0px;
}
input {
float: right;
margin-left:15px;
}
#header {
background-image:url(images/headerGradient.png);
background-repeat: repeat;
margin:0px;
padding:0px;
width:auto;
height:72px;
display:block;
}
#logo {
background-image:url(images/logo.png);
width: 182px;
height: 66px;
vertical-align:middle;
margin-left: 60px;
}
It's because your logo div has no floating style set.
Try to add
float:left
to #logo div
Demo: http://jsfiddle.net/eyMJa/1/
Using float in Css I have found becomes really annoying and makes getting layout how you want it kinda difficult, Unless you can watch a fair few youtube video's until you master it.
I'm trying to use:
position:absolute;
instead, and then setting
top:Number of Pixels or percentage/em;
right:Number of Pixels or percentage/em;
bottom:Number of Pixels or percentage/em;
left:Number of Pixels or percentage/em;
also
position:relative;
Seems to add blank space in the dimensions of the div again messing up the layout, where Absolute acts kind of like float, but without the annoying interactive or page jerking of the other two methods.
If you do use float for whatever reason, remember to add Clear float after each time you use it unless you specifically need to keep it.
Hope this helps
I have a main div in the center of my page with an id of "panel".
I want to position another div, "toolbar" so that it is top aligned and flush against the side of the "panel" div.
Like so
And I want the panel div to remain centered. (Currently doing this by setting margin-left/margin-right to auto)
Absolute positioning on the toolbar breaks when I resize the window.
I've also tried floating them inside a wrapper, but invariably this moves the panel from the center...
This feels like it should simple, am I overlooking something? What is the best way to accomplish this?
Current live example here:
Example
Thanks for any advice..
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toolbar">
Toolbar
</div>
<div id="panel">
Panel
</div>
</body>
</html>
CSS:
#toolbar{
border:1px solid black;
color:red;
width:100px;
height:200px;
}
#panel{
border:1px solid black;
color: blue;
margin-left:auto;
margin-right:auto;
width:500px;
height:500px;
}
See: http://jsfiddle.net/thirtydot/ywc5f/
In the HTML, you can move #toolbar inside #panel, then use absolute positioning.
CSS:
#panel {
position: relative;
}
#toolbar {
position: absolute;
left: -102px; /* width of #toolbar + border */
top: -1px; /* border */
}
HTML:
<div id="panel">
Panel
<div id="toolbar">
Toolbar
</div>
</div>
User floats. See this fiddle.
you're using an absolute width for both of those so put them in another div as a wrapper and give it the width of the the middle one + (the narrow one x 2)
then use auto on the new wrapper div and use float left on both the interior divs
Here is my CSS:
.header
{
background-image:url(Images/head.png);
background-position: center top;
background-repeat:no-repeat;
width:1010px;
height:269px;
}
This is my 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>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"></div>
</div>
</body>
</html>
I am trying to get my image centered on the X-axis, and top'ed on the Y-axis. However my CSS class .header wont do that. Can you see what I am doing wrong?
EDIT: Turning the top center around does not work either
Your background-position values are around the wrong way. It should be:
background-position: 50% 0; /* Short values FTW! */
Don't forget if you want it to stay centered, you'll also need to do something like wrap the content in a container and use margin:0 auto on it to keep everything centered.
HTML:
<div class="wrap">
<div class="header"></div>
</div>
CSS:
.wrap {
width:1010px;
margin:0 auto;
}
.header {
width:1010px;
height:265px;
background:transparent url('//placehold.it/1010x265') no-repeat;
}
Demo: jsfiddle.net/UGDxU/show (or edit it)
The order of background-position is left top. Try flipping the values.
You'll also need background-repeat: no-repeat.
jsFiddle.
I want to have a web page that contains 3 parts: A header at the top of the page , a footer (both of which having specific height in px)and the main part of the page which should be a div or table cell with the appropriate height attribute in order to take all the available space between them. I want the page to take 100% of the browser window height, trying to avoid scrollbars. The problems I have are the following:
USING DIVs
a) If I set the maindiv height to 100%, the page overflows and I get a vertical scrolbar. (the maindiv's height is set to the 100% of the browser window)
<!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>
</head>
<style type="text/css">
<!--
body, html{
height: 100%;
max-height:100%;
width: 100%;
margin:0;
padding:0;
}
div{padding:0;margin:0;}
#containerdiv{height:100%;width:100%;background-color:#FF9;border:0;}
#headerdiv{height:150px;width:100%;background-color:#0F0;border:0;}
#footerdiv{height:50px;width:100%;background-color:#00F;border:0; }
#maindiv{
background-color:#F00;
height:100%;
}
div{border:#000 medium solid;border:0;}
</style>
<body>
<div id="containerdiv">
<div id="headerdiv">headerdiv</div>
<div id="maindiv">maindiv</div>
<div id="footerdiv">footerdiv</div>
</div>
</body>
</html>
b) If I set the maindiv height to auto, the maindiv height is depending on it's content, which is not what I want.
USING tables
a) If I set the main cell height to 100% it works fine with Firefox but in Internet Explorer 8 I get a vertical scrollbar (you can use the next code block using th style="height:100%"
instead of "auto" to see this.)
b) If I set the main cell to auto it seems to be working both in IE and FF but then I have the problem that anything I put inside the maincell (table or div) cannot get maincell's full height in IE.
<!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>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr><th style="height:150px;background-color:#FF0"></th></tr>
<tr>
<th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table>
</th>
</tr>
<tr><th style="height:50px;background-color:#FF0"></th></tr>
</table>
</body>
</html>
</html>
Any ideas? Maybe there is an easier way to define the size of the main part of the page in px using javascript? (my javascript skills are pretty poor so any help with this is welcome!)
Rather than using percentages, you can define the #centerdiv using top and bottom properties, for example:
#centerdiv {
position:absolute;
top: 160px; /*10px between header and this div at top*/
bottom: 60px; /*10px between footer and this div at bottom*/
width:100%;
background-color:#FF9;
border:0;
}
Mark Up
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Zuhaib.test" %>
<!-- Put IE into quirks mode -->
<!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" xml:lang="en">
<head runat="server">
<title></title>
<link href="css/general.css" rel="stylesheet" type="text/css" />
<link href="css/outbound.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" class="wrapper">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="left">
</div>
<div id="right">
</div>
</form>
</body>
</html>
CSS
html, body
{
margin:0;
padding:0;
border:0;
overflow:hidden;
width:100%;
height:100%;
}
* html body
{
height:100%;
width:100%;
}
*{
margin:0;
padding:0;
}
.wrapper
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
height:100%;
width:100%;
}
* html .wrapper
{
width:100%;
height:100%;
}
#left{
float:left;
height:100%;
width:100px;
overflow:hidden;
background-color:Blue;
}
* html #left{
height:100%;
width:100px;
}
#right{
margin-left:100px;
height:100%;
background-color:Red;
}
* html #right{
height:100%;
}
Result in IE && FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
The result is same with both IE 6 & 7. How can I remove the gap between the divs?
Udate
I have two divs each with 100% height. the left div is a fixed width floating div. Even after giving correct margin-left to the right div, there remains a gap (3px) between the two divs. Where as in firefox it renders correctly.
The reason I have used quirk mode is to able to get 100% height for the divs
Can this gap be eliminated? Or is there a better way to do two column 100% height layout with pure css?
As already said, your code is full of hacks. Please remove especially the unnecessary definitions. If a browser does not support cascading style sheets, it will not support CSS anyway.
That being said, why not use position: absolute; for #right?
As in
#right{
position: absolute;
left: 100px;
padding-left: -100px;
width: 100%;
...
}
Remove the comment on top of the page
The "Put IE into quirks mode" thing
You are using a lot of 'hacks'. By that I mean the CSS selectors that begin with * html
I'm not saying that is the cause of the problem, but it is not good practice and is error prone.
1) try using conditional comments for the browser that has the gap problem instead of using those hacks
2) try editing your question by providing information about the version of IE you're testing against (my guess is IE 6 or even lower).
To be honest, if you're filling up the whole body with these divs, then you're better off giving one of them a transparent background and setting the background color of the body to the desired color, masking the problem.
Especially if, in trying to solve the IE issue, you're introducing a plague of CSS hacks into what should be nice and clean code considering the simple layout you're shooting for.
The actual problem is the whitespace between the closing div tag and the next opening div tag. If you put them together on the same line with no space between them, or fill in the white space with a comment, the whitespace will be gone.
<div id="left">
</div><div id="right">
</div>
or
<div id="left">
</div><!-- IE doesn't ignore whitespace between divs
--><div id="right">
</div>