I have a container div. Width: 80%, margin-left: 10% and margin-right 10%. The problem is, the container is displaying to the left in all the browsers I check. If I change the value of margin-left to 20%, it looks ok.
I will supply code if necessary but is there anything obviously wrong here? Isn't 80 with a margin of 10 on each side correct to center a div?
GF
I tried your setup, and it works just fine.
You should check the spelling and syntax of your CSS, there is probably some error that keeps it from working. In Firefox you can open up the error console and reload your page, and it will tell you about any CSS errors.
You can also use margin-left: auto; margin-right: auto; to center the element.
Here is the code of the page that I used to test the CSS:
<!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" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<style type="text/css">
div { width: 80%; margin-left: 10%; margin-right: 10%; background: #ccc; }
</style>
</head>
<body>
<div>asdf</div>
</body>
</html>
has the parent element of the div a specified witdh?
Try
width: 100%;
for the parent Element
try set theese:
<html>
<head>
<style>
.container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
Testing page
</div>
</body>
</html>
Related
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the code:
<!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 type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
I want the background image of one of my divs to overflow into the body section. I've tried overflow:visible without any luck.
Check the pic:
See how the gold bits get cut off on the edge of the div? Suggestions please?
Here's my set up:
in the HTML:
<body>
<div id="container">
in the CSS:
body{
background-color: #0e0a04;
}
#container{
max-width: 960px;
margin: 0px auto;
padding: 0px;
margin-top:60px;
background-color: #0e0a04;
background-image: url(/bundles/tabredirector/images/background-image.png);
background-repeat:no-repeat;
background-position: -70px -20px; /*x,y*/
overflow:visible;
}
Thanks!
WHAT I ENDED UP IMPLEMENTING:
Thanks for all of your suggestions, they inspired my solution. My final solution was to use a master div (position:relative with z-index:-1) and my container (position:absolute z-index:1) and stick an image in the master div that can be positioned absolutely. This way the content always sits on top and the background isn't clipped.
first post your markup and css. Also give the div a width:100%.
You need to make sure there is a div outside your containing div. You can have a container above and below it which will hold all your other content.
Then you need to have a 100% width div with the full bg image centered.
Then within that div add another div for your content which can be 960 wide with an auto left and right margin to center it to the page.
Paste your HTML in your post as well the css is not enough as you need to add to your html!
Thanks
Background images on an element only appear within that element.
If you want your <div>’s background image to appear outside the boundaries of the <div>, you need to assign the background image to another element instead, e.g. the <body> element.
Heres a quick example:
<!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 type="text/css">
.container {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#fullWidthImage {
background-color: #0F9;
height: 200px;
width: 100%;
}
#centeredContent {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 200px;
background-color: #09C;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<p>top site content </p>
<p> </p>
</div><!--container-->
<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->
<div class="container">
<p> </p>
<p> </p>
<p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
So I am experimenting with pure css layouts, and immediately I have become stuck. I have the following html and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout</title>
<link type="text/css" href="site.css" rel="stylesheet" >
</head>
<body>
<div id="header">
My Site
<div id="search-area">
<form>
<input type="text" id="search-box" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<div id="sidebar">
Account Name <br>
Edit My Account
</div>
</body>
</html>
#header {
background-color: #151B54;
height: 30px;
width: 100%;
}
#logo {
position: relative;
left: 10px;
color: white;
font-size: x-large;
font-weight: bold;
text-decoration: none;
float: left;
margin-top: 3px;
}
#search-area {
position: absolute;
left: 200px;
margin-top: 3px;
}
#sidebar {
float: left;
width: 100px;
border-right: double;
}
When I view this in Chrome I get the rendering that I was expecting:
However, in IE I get the following:
Notice how there is a massive blank area to the left of the sidebar. Why is that showing in IE?
I get the same problem in Safari and for the same reason: you're not clearing your floats in #header and #header isn't quite tall enough to contain all of its floated children.
If you increase the height of the header to 31px, you should (but maybe not) get the desired layout. A better approach is you add overflow: hidden as a clear fix, that will make all of the children of #header fully contained with #header and that will stop them from interfering with the layout of the next piece:
#header {
background-color: #151B54;
height: 30px;
width: 100%;
overflow: hidden;
}
Live example: http://jsfiddle.net/ambiguous/EUmyN/
A rule of thumb with floated elements is to always make sure they're cleared either with overflow: hidden on their container or, if necessary, with an explicit <div style="clear: both;"></div> at the bottom of the container.
Also, while we're here, you rarely need width: 100% on a block element such as a <div>. If you're positioning it or floating then maybe you'll need something like that but not for a plain <div>; block elements are full width by default.
Try clearing your online cache. Oftentimes the css file is cached and using an older version causing this type of behavior.
May not be the problem, but the first action you should take when trying to troubleshoot unexpected results on style.
Im working with a XHTML 1.0 Transitional doctype html file, and I want to have a main div with 800px width and make it appears centered (not the div content, but the div itself).
I've used this on the past:
<!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></title>
<style>
<!--
html, body { margin:0; padding:0; }
#main-container { background:black; width:800px; }
-->
</style>
</head>
<body>
<center>
<div id="main-container">
Content
</div>
</center>
</body>
</html>
But I am not sure if this is cross-browser compatible, or if its valid xhtml.
The center tag is deprecated since 1998. You need to apply CSS margin 0 auto; on the div. This will set top and bottom margin to 0 and left and right margin to auto which will let the div "auto-center" itself when its width is known/fixed.
See also:
Center a div in CSS, (text-align is not the answer)
remove the center tags, and set this css declaration
#main-container { margin: auto; width:800px }
You can use
#container{
position:relative;
margin: auto;
}
or, if you have a fixed width for your container, lets say 800px you can do something like
#container{
position:relative;
left: -400px;
margin-left: 50%;
}
Use margin: 0 auto;, as stated above:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#main-container {
background: black;
width: 800px;
margin: 0 auto;
}
</style>
And by the way, if you wish to validate as proper XHTML, you need to add type="text/css" to your style elements. In addition, there is almost no need to hide your CSS from old browsers, because almost all browsers nowadays supports CSS.
I practiced to center a div without a width and found a solution that works in every common browser. But when I put this solution into real page style, it wont work in IE.
The practice solution, that works perfectly in IE, Chrome and Firefox, looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centerbox</title>
<link type="text/css" rel="stylesheet" href="centerbox.css" media="all" />
</head>
<body>
<div class="centerbox-outer">
<div class="centerbox-inner">
<p>Sample content that is not fixed width</p>
<p>Some more content</p>
<form>
<input type="text" name="sampleinput" />
<input type="submit" name="go" />
</form>
</div>
</div>
</body>
</html>
centerbox.css
div.centerbox-outer{
text-align: center;
margin: 0 auto;
}
div.centerbox-inner{
text-align: justify;
background-color: gray;
display: inline-block;
}
The page where it is not working with IE is here: [link removed]
Do someone have any idea, what I'm missing there?
Made some research and found a suitable solution using relative positions. This seem to work perfectly in commonly used browsers.
The style would be following:
div.centerbox-outer{
margin: 0 auto;
float: left;
left: 50%;
position: relative;
}
div.centerbox-inner{
text-align: justify;
background-color: gray;
float: left;
position: relative;
right: 50%;
}
To center a div, use:
margin-left: auto;
margin-right: auto;
in the css for the div. Also, I've found for IE, you may need to alter your DocType to an HTML 4 specification. Something like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I do these in my pages, and they center perfectly in IE.
div.centerbox-outer is 100% width, so putting margin: 0 auto; on it does not make any sense. If anything, you should put margin: 0 auto; on div.centerbox-inner.