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>
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 plans to create carousel with a background that spans the width of the browser.
To do this I set margin:0; padding:0; in the body and set my div that spans the background to width:100%. I chose this because it contains another div that has a left, and right margin:auto; making the second div centred within the div spanning the browser.
I encountered a problem trying to add the background image to the div that spans the width of the browser. When I use background-repeat:repeat-x; it is still just a 550x1 px sliver on the far left of the browser. It does not repeat. I have figured this is due to the 100% width. If I let go of the 100% width I encounter a problem of the inner div being forced to the right or left, depending on the resolution of the monitor being used. I do not want this to happen.
Does anyone know of a way I can achieve/simulate 100% width and still use background-repeat:repeat-x;?
EDIT, i use 2 divs because i am applying silverlight, and would like to place it kindof artistically on the screen. here is my code, it might make more sence what i am doing then. and if you still believe 1 div is better than 2, tell me that im wrong, but here is the code. it is very simple because much will be done in silverlight, or at least i thought it would be somewhat simple, but that's how it goes.
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>
<!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 runat="server">
<title>Home</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
<img src="img_data/dem_Logo.png" id="Logo"/>
</div>
</div>
<div id="Carousel">
<div id="SilverlightContainer">
</div>
</div>
</body>
</html>
CSS
body
{
margin:0;
padding:0;
background-color:#000061;
}
#NavContainer
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#Navigation
{
height:75px;
width:100%;
}
#Logo
{
float:left;
}
#Carousel
{
height:550px;
width:100%;
background-image:url('img_data/carousel_bar_01.png');
background-repeat:repeat-x;
}
#SilverlightContainer
{
height:550px;
width:900px;
margin-left:auto;
margin-right:auto;
}
You don't have to take two div's to achieve what you want.
Just take your background image in the body like
body{ background:url(image path here) repeat-x}
and give your div
certain width and give it a style like
div#yourID{margin:auto}
This will work for you just fine.
You simply need only one div, the one you want in the middle.
<div class="centered"></div>
You set the background on the body:
body {
min-height: 550px;
background: url(path/image.png) repeat-x;
background-size: 1px 550px;
}
And then you have the centered div:
.centered {
min-height: 150px; /* whatever values you wish for height and width */
width: 300px;
margin: 75px auto; /* whatever values you wish for top/ bottom margin */
}
You can see it live at http://dabblet.com/gist/2774626
Try this:
body {
width:100%;
height:100%;
background:url(your-image.jpg) repeat-x;
position:absolute;
}
Solved! The problem was that I was not putting in the right location for the image carousel_bar_01.png.
I have the following HTML code with CSS:
<!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>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
position:absolute;
top:0%;
left:0%;
width:10%;
height:100%;
}
div.hidden
{
background-color:#00FF00;
position:absolute;
top:0%;
left:50%;
width:20%;
height:100%;
}
div.menu
{
position:absolute;
top:70%;
left:20%;
width:80%;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<div class="menu">
<div class="scroll">Scroll: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<div class="hidden">Hidden: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</div>
</body>
As you can see I want two of the divisions to have color - they don't and I can't figure out why. The file has an html extension and I have used both IE7 and FF 3.0.3 to test.
What perplexes me the most is that it is almost a verbatim copy of an example from W3C schools that does show color! Link to example: W3C example.
The problem is height:100%; . It means that the element use all the height of its parent, in this case the <div class="menu">, which is 0px because all its content is positioned with absolute.
You can either remove it if you want each div of have the size of its text, or set a height in pixel if you want to apply the same height to the both divs.
Remove height: 100%; from your div.scroll and div.hidden CSS classes.
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/
Okay, so I've got a problem - and I'd love to have it fixed.
I am using my favourite way of setting up a simple header/content/footer layout.
The problem is that any elements I add to the 'content' div of my layout can not be expanded to 100% in Internet Explorer (as far as I know, IE only).
I understand there is no height declared to the 'content' element, but because of the style of its positioning (declaring an absolute top AND bottom), the element fills the desired area. (The content element has a background color defined so you can see that the div is in fact filling between both the header and the footer.)
So my problem is, since the div is clearly expanded between the two, why can't a child be set to 100% to fill that area?
If anyone has any solutions, I'd love to hear them. (I'm looking for a solution that won't involve designing by an entire different layout.. or at least perhaps an explanation of why this is happening. I'm assuming at this point it's because of the lack of a height declaration -- but the div is expanded, so I don't get it!)
Here is the code as used on the page:
<!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 name="robots" content="noindex" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No 100% height on 'content' child div in IE</title>
</head>
<style>
html, body {
width:100%;
height:100%;
margin:0px;
padding:0px;
}
body {
position:relative;
}
#wrapper {
position:absolute;
top:0px;
width:960px;
height:100%;
left:50%;
margin-left:-480px;
}
#header{
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
background-color:#999;
}
#content{
position:absolute;
top:100px;
bottom:50px;
left:0px;
width:100%;
background-color:#F7F7F7;
}
#content_1{
width:200px;
background-color:black;
height:100%;
float:left;
}
#footer{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50px;
background-color:#999;
}
</style>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="content_1">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Try this:
#content_1{
width:200px;
background-color:black;
height:100%;
position: absolute;
}
IE 7 and below assign a value called "hasLayout" to elements that need positioning. Sometimes to work out little quirks like this you have to force an item to have a layout which in this case means setting its position to absolute.