I have tried following many articles and used many links in SO but I cannot fix my CSS of my page. The page can be seen here: http://tinyurl.com/d3ru8tf
Screenshot:
My CSS
html, body {
height:100%
}
body{
line-height:1;
color:#454545;
background:url(/assets/imgs/bg.png);
font:11px Tahoma,Arial,sans-serif
}
#soul{
display:block;
margin:0 auto;
width:920px;
background:url(/assets/imgs/back.png) repeat-y right #fff;
padding:0;
position:relative;
height:100%
}
My HMTL5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="soul">
This is my content which does not sit fluid.
</div>
</body>
</html>
Add <hr style="clear:both;" /> right before closing </div> of #soul and remove height:100% from #soul CSS.
Also, use min-height:100%, or better, yet, don't use that attribute at all in this case.
Edit
Read more about floating divs: http://css-tricks.com/all-about-floats/
Also, you seem to want them to be equal in height.
Take a look at this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Related
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
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
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/
I have the following CSS:
html, body {
background-color:black;
font-family:"arial bold";
overflow:auto;
text-align: center;
}
div#content {
width:792px;
height:100%;
padding:0px;
}
div#header {
height:216px;
width:100%;
}
The HTML code I have is:
<html>
<head>
<title>
Think in a NEW BOX.
</title>
<link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body onload="">
<div id="content">
<div id="header">
<img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" />
</div>
</div>
</body>
</html>
Now, this works great in IE. The div centers perfectly (header). In Google Chrome, however, the div is left aligned. Am I missing something?
I had this 'problem' too today. Solved it with using display: inline-block;. Working browsers won't change and if it's already working, this won't mix up IE old.
You are missing:
A doctype (so IE is emulating bugs from the IE 4/5 days to cope with awful, ancient webpages)
That a div element is a block element so text-align does not influence it
auto left and right margins on the div.
See Centring using CSS for a longer explanation with diagrams
Even better solution is to center the block like this:
#content
{
margin:0px auto;
}
This method is used by... well, just about everyone (including SO).
Use
#content {
margin-left: auto;
margin-right: auto;
width: 100px; /* Your width */
}
to center your div. It allows your div to choose a variable margin for left and right, that results in a centered div. This should work for all browser.
Make sure you have a fixed width and use margin: 0 auto;.
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>