In HTML, how do you make it so that the site is ~60-80% of the screen wide, and if the window is bigger than that it centers, otherwise there's a scroll bar? I'm talking about the way it is for the content here at StackOverflow.
I tried this, but failed:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<center>
<div style="width: 60em; align: center;">kdsjlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkhlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkkjdghkdsfjgksdjfhg</div>
</center>
</body>
</html>
Here's the one I always follow:
<body>
<div class="wrapper">
your content
</div>
</body>
And then in CSS,
body{text-align:center;}
.wrapper{width:80%;margin:0 auto;text-align:left;}
You want auto margins...
<body>
<div id="content">
Your page content here...
</div>
</body>
Your CSS should have something like this...
#content { width: 60%; margin: 0 auto 0 auto; }
The ordering for margins (and padding is the same) is top right bottom left. Or you can shortcut with.
#content { width: 60%; margin: 0 auto; }
This means that top and bottom will have 0 margin; left and right will have auto margin.
Do Set left and right margins to auto.
Don't use the deprecated <center> element
Don't use the non-existent align property
Stick your content in a div and set the right and left margin to "auto", like so:
CSS:
#content {
width: 960px;
margin-left: auto;
margin-right: auto;
}
HTML:
<body>
<div id="content">
fjkgjkg etc.
</div>
</body>
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 1 year ago.
Please see the HTML below:
#container
{
height: 60%;
width: 100%;
background-color:green;
}
#floatElement
{
top:0px;
height: 60%;
width: 50%;
background-color:red;
float:right;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
Here is the result.
Why is there extra space above the first line of text inside the float i.e. why is the word "text" and the words: "this is a test inside a float element" not in line?
I have looked here: https://developer.mozilla.org/en-US/docs/Web/CSS/float. The first image indicates that they should be in line. I have also Googled it and this is the closest I got: How to remove space at top of page when using float?. However, it does not answer my question.
This is because the browser default user agent stylesheet adds style for some elements, in that case I'd recommend using a reset css.
Now back to the question, the space appears because you're using float so it will contain the default margin of the h1. According to https://developer.mozilla.org/
The float CSS property places an element on the left or right side of
its container, allowing text and inline elements to wrap around it.
The element is removed from the normal flow of the page, though still
remaining a part of the flow.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Whereas background color of div elements doesn't respect to the margin of its child, you have to use padding for that. Because margin applies outside of the border of the element and padding happens inside the borders.
Here's an example:
#container { height: 60%; width: 100%; background-color:green; }
#container h1 {margin: 100px 0;}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
As you can see the margin is omitted by the background color of the parent, but still takes place.
Here's another scenario.
#container { height: 60%; width: 100%; background-color:green; }
#container h1 {margin: 0; padding: 100px 0;}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
You can see what happens when padding is added to the h1
Here's the answer for your question, to make them both fly on the same line remove the margin for the h1
#container
{
height: 60%;
width: 100%;
background-color:green;
}
#floatElement
{
top:0px;
height: 60%;
width: 50%;
background-color:red;
float:right;
}
#floatElement h1, #container h1{
margin-block-start: 0;
/*you can also use margin: 0 in short */
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>
</html>
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/
I want to add outer shadow to my page body, for example:
<html>
<head>
<title>Shadow</title>
<style>
html{height:100%;}
body{height:100%;}
#shadow{width:1200px;background:url('http://i.stack.imgur.com/w3fOE.png');height:100%;margin: 0 auto;}
#theMainContainer{width:900px;margin:0 auto;background-color:red;height:100%;text-align:center; color:white;}
</style>
</head>
<body>
<div id="shadow">
<div id="theMainContainer">
i have <font color="black">shadow</font> in the left side and the right side of the page ,<br>But i have space in the top and in the bottom of the page(what is the best way to fix it?).
</div>
</div>
</body>
</html>
I have space in the top and in the bottom of the page. How can I remove the space and make the shadow to a 100% height?
Add margin: 0 to body:
body {
height: 100%;
margin: 0;
}
You need to add the following css rule to reset the browser's default styling.
body, html {
margin: 0;
padding: 0;
}
So, the problem is about collapsed margin.
Follow this example : http://jsfiddle.net/2ausj/
code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Page</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" media="screen, tv, projection" href="css/style.css" />
</head>
<body>
<div id="main">
<div id="home" class="main"></div>
<div class="main"></div>
<p></p>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
</div>
</body>
</html>
And Css
html { overflow: hidden;}
body {
background: transparent url('../images/background.jpg') repeat;
}
#main { background: blue; padding: 1px; border: 1px;}
.main {
max-width: 1000px;
height: 200px;
background: red;
margin: 50px auto;
position: relative;
position: absolute;
}
p { height: 1px; }
I have some div. Each have a margin top and bottom of 50px in this case but betwen the divs, there is only 50 px margin instead of 100px
I read lot of articles about collapsing margin, all of them say to set padding or border to the parent. I tried to put div directly in body and set padding to the body, i tried to set padding on my div, i tried to puts my div in a container div and set him padding or border, nothing seem to work.
Only solution i found but it's dirty, as you can see in my example, is put an element betwen div with a 1px height. And then, there is finally 100px betwen divs, even 101 because of 1px .
I wish a greater solution, and also understand why nothing i've tried is working.
Please excuse my bad english (Not my fault, i'm french) and thanks in advance :)
Since your first div has an ID as well as a class you could do this:
Change your .main margin to: margin:0 auto 100px auto;
And add the #home ID with a style of margin-top:100px;
I fiddled with the Fiddle for a few and don't understand why the top and bottom margin of 50px isn't working, but what I have provided above will fix your issue. If this works for you please accept it as answered.
I want to "centerize" the text and contents of my webpage. Now I don't want to align the text to center, I still want a left alignment but I want significant margins on the left and right so that everything looks relatively center-ish. Can you show me the HTML/CSS to achieve this? THanks.
<html>
<head>
<style type="text/css">
body {
text-align: center; /* Center in IE */
}
#content {
text-align: left; /* reset text-align for IE */
margin: 0 auto; /* Center in other browsers */
width: 800px;
}
html {
overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}
</head>
<body>
<div id="content">
content here
</div>
</body>
</html>
*UPDATE: I added some CSS that forces a vertical scrollbar in FF as per some comments below.
Create 3 columns on your page. All your text goes in the center column and can be left alligned.
Have a look here for examples http://matthewjamestaylor.com/blog/perfect-3-column.htm
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
I believe this might help you.
try
#div {
margin:0 auto
};
Have a container div within which you put all your content:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
Then add some css specifying the width and margins of your container div:
#container {
width: 750px;
margin: 0 auto;
}
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
And in the HTML, wrap everything in:
<div id='container'>
...
</div>
(Note that this answer differs from meep's in that I'm using max-width to give a fluid layout below 800 pixels, whereas he's using width to give a fixed layout.)