basicaly I have the following HTML/CSS Layout
HTML:
<div id="container">
<div id="main">
<h1>TEST</h1>
</div>
</div>
CSS:
#cont {
width: 100%;
background: #ddd;
}
#main {
width: 900px;
background: #fff;
margin-left: auto;
margin-right: auto;
}
This works fine in FF, safari, Chrome and Opera but IE8 still aligns the "main" div to the left.
Does anyone know what the problem might be? Thanks in advance.
You just need to change either the css #cont to #container or the id of the div to cont.
Works fine for me in IE8. http://jsfiddle.net/5M6X9/
did you define a doc type?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Futhermore get rid of the width: 100% on the first div and body must have padding: 0 and margin: 0
IE needs a correct DOC Type!
I always use
#main{
margin:0 auto;
}
and the width:100% is not necessary.
replace 0 for top and bottom margins or
#main{
margin:30px auto 0;
}
for just top-margin
Related
The body of my code takes extra space from the top, the code written below shows that i have already assigned the body's margin as zero, but if you run it, the code will take about 20px from the top, can you please explain why is it happening.
I'm talking about this thing in internet explorer and in google chrome:
<!DOCTYPE html>
<html>
<head>
<title>Gmail</title>
<style>
body{
margin:0;}
.head{
height:83px; margin:0; width:100%;}
.logodiv{
margin:0; padding:0 44px; width:auto; height:83px;}
.logo{
margin:20px auto 25px auto; height:auto; width:115px;}
.body1{
padding:0px 44px 100px; height:685px;}
</style>
</head>
<body>
<div class="head">
<div class="logodiv">
<div class="logo">
<img height="38px" src="https://ssl.gstatic.com/accounts/ui/logo_2x.png">
</div>
</div>
</div>
<div class="body1">
Hello
</div>
</body>
</html>
Please correct your top margin for logo .logo{margin:0px auto 25px auto; height:auto; width:115px;}
Go for further reading on css margin properties here here
Browsers have default styles by default. Use a CSS reset these and standardize CSS behavior. Use: Meyer's or Normalize
For this specific example, try using this CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
height: 100%;
width: 100%;
}
The body doesn't take extra space from the top. It shows that way because the logo is the first element to render in the DOM and has 20px top margin.
See this example as it proves this point.
Change the logo class as shown below
.logo{
margin:0px auto 25px auto; height:auto; width:115px;}
I'm trying to align a div horizontally, but for some reason it's not working in IE... What am I doing wrong?
HTML
<body>
<div id="container">
<div id="header">
<img src="logo.png">
</div>
<div id="top-nav">
<ul class="menu">
<li class="first leaf menu-mlid-471">Home</li>
</ul>
</div>
</div>
</body>
CSS
body{
background-color: #fff;
margin: 0;
padding: 0;
}
ul.menu{
width: 500px;
margin: auto;
}
#header{
height: 150px;
}
For Firefox, Chrome, Safari,... no problem. It all comes exactly in the middle. But IE refuses to align it properly...
Do you have a doctype? Without it, IE reverts to Quirks Mode, which does not support margin: auto; centering.
Also, IE < 6 does not support margin: auto; centering at all (in case ancient IE browser compliance is particularly important you).
Use below CSS
.ie ul.menu{
width: 500px;
margin: auto;
display:block;
}
Try this .ie ul.menu{
width: 500px;
margin-left: auto;
margin-right:auto;
display:block;}
Actually, if you place a border around your menu div, you will see in IE that the DIV is aligned in the center, however, your ul content is not. Please pop this into your CSS and see what results you get:
ul.menu{
width: 500px;
margin: auto;
border:solid black thin;
text-align:center;
}
Should work in IE.
Just need help as I have been trying sort this out for ages now. What I need:
I've got a 2 column layout, where the left column has a fixed width 220px and the right column has a fluid width.
Code is:
<!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>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,
.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
</div>
</body>
</html>
There's no problem at all. When I use a css syntax clear: both in the right column, all content after gets moved under the left column. This is a right behaviour and nothing against it.
But I relly need to use clear: both in the way, that it stays just in context of the right column (doesn't get affected by the left column at all, and doesn't move underneath)
Is there any simple get around with retaining a basic float concept of page design?
UPDATE: Please see this link to know what I'm on about as it may be a bit confusing from my description.
Link: http://jsfiddle.net/k4L5K/1/
Here's your altered CSS:
html, body {
background: #ccc;
}
.wrap {
margin: 20px;
padding: 20px;
padding-right:240px;
background: #fff;
overflow:hidden;
}
.main {
margin: 0 -220px 0 auto;
width: 100%;
float:right;
}
.sidebar {
width: 200px;
float: left;
height: 200px;
}
.main, .sidebar {
background: #eee; min-height: 100px;
}
.clear { clear:both; }
span { background: yellow }
Basically what I've done is change the way your layout is done, so that .main div is floated on the right. To do this, we had to add 2 things:
A padding of 240px on the .wrap div, and
A right margin on the .main div of -220px to properly align the fluid part of the page.
Because we've floated the .main div on the right, the clear: both; now only affects content inside the .main div, as you want.
You can see a demonstration here: http://jsfiddle.net/6d2qF/1/
The question is quite old but here is the another solution which I've found recently.
We just need to do 2 things:
Add overflow: auto; to the .main div
Make sure wrapper preserves document flow by adding overflow: hidden; to the .wrap div, or adding .clear div as the last child of .wrap element
Here is the updated fiddle: http://jsfiddle.net/k4L5K/89/
Try 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>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; }
.main,
.sidebar { background: #eee; min-height: 100px; float: left; }
.clear {clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
<div class="clear"></div>
</div>
</body>
</html>
I have two parts to my site. The main body and the sidebar. The body is 6in and sidebar will probably be 200px. How do i center my page? So there is equal space on the left and right side? It should center no matter the resolution.
Using XHTML 1.0 Strict. Should work on all major browsers or at least Firefox and chrome.
You can set margin to auto for left and right margins:
<div id="wrapper">
<div id="sidebar"></div>
<div id="main"></div>
</div>
#sidebar {
float:left;
width: 50px;
}
#main {
width: 150px;
float:left;
background-color: yellow;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 200px;
}
This is pretty portable too, even works on older IE versions.
Update wrapper, sidebar and main need to have widths. Google two column layout, that's a pretty standard way to do it.
http://jsfiddle.net/aXLVv/1/ - see it in action.
What about setting
margin: 0px auto;
to the outermost container.
<div id="wrapper">
<div id="side"></div>
<div id="main"></div>
</div>
#wrapper { margin: 0 auto; width: 800px; }
I dont think margin-left: auto; and margin-right: auto; will work. You need to have a global wrapper.
body {
margin-left: auto;
margin-right: auto;
}
I have the following defined in my css file:
body {
text-align: center;
float: right;
position: fixed;
}
.twoColFixRtHdr #container {
width: 780px;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
and I have my HTML defined as follows:
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
The problem is, in IE (all versions I've been able to check) center the content of the page, but in Firefox, it's left-aligned. I know that text-align:center will center the content of the element, but not the element itself, so you have to nest your content, which is what the extra div is for. But I must be missing something about the differences between IE and Firefox in terms of how it renders this tag.
Any ideas? You can look at the site: http://www.solar-fit.ca
these two cause the problem
body ->
float: right;
position: fixed;
remove those
You tried this yet?
#container{
width: 780px ;
margin-left: auto ;
margin-right: auto ;
}
You shouldn't need the nested div with this approach. According to the source ...
"The code above has been tested with
IE 6, 7, Firefox, Opera and Safari."
How about putting margin: 0px auto; in body ?
Not sure about the cause, but a fix is putting IE into standards mode via a DOCTYPE, e.g.
<!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">
body {
text-align: center;
float: right;
position: fixed;
}
.twoColFixRtHdr #container {
width: 780px;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
</style>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
Some text goes here
</div>
</div>
</body>
</html>
Remove the float and position properties from the body rule and add 100% width.
body { text-align: center; width: 100% }