While, trying to create a body border around the website, I am having troubles creating margin between the website and the border.
I want to have a margin of 20px around the border, but I can't seem to figure out how to do this, can anybody help me?
My final goal is for the border to look close to this.
Just make a wrapping div around the content with proper media queries, something like this
Demo
#wrapper {
max-width: 1100px;
margin: 20px auto;
border:1px solid #333;
padding:20px;
background:#eee;
}
#media screen and (max-width: 1260px) {
#wrapper {
margin: 20px;
}
}
#content {
background:#ccc;
}
Have you tried css margin property?
body
{
margin: 20px;
}
You should create two divs that surround everything in your body, like that :
<html>
<head>
[...]
</head>
<body>
<div id="global">
<div id="global-inner">
[Your original code ...]
</div>
</div>
</body>
</html>
Then you just have to do some css
#global {
border: 1px solid #CCCCCC;
margin: 40px auto;
width: 90%;
}
#global-inner {
margin: 7% 7%;
}
See the JSFiddle : https://jsfiddle.net/9usf2hmh/
Hope I helped you :)
What you should do is just use padding on your body, or main container.
Keep in mind that in that particular page design, the padding is on left/right and top, the bottom padding is part of the footer element and that's how he achieve the top-border on the bottom elements
Here a working example
Related
I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:
#page{
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right:auto;
border-color: black;
border-style: solid;
border-width: thin;
overflow:auto;
padding-bottom: 10px;
padding-top: 0px;
width:1200px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:12px;
height:700px;
}
and the 'html', 'body' CSS code is the following:
html,body {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}
Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.
I haven't coded anything in awhile, however normally when I am creating a centered page:
html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }
Then for the div:
#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }
That may or may not work, like I said, it has been awhile.
In order to margin:auto works in your case is required to have a defined width/height for your main containers which are HTML and BODY
IMPORTANT:Both HTML and BODY elements must be ruled with the width/height properties
Do as follows
html,body {
background-color:#FFFFFF;
width:100%;
height:100%;
}
and watch this fiddle
It seems your div is filling full screen width. So center alignment will not have any visible effect on the div. Try to use a span instead.
Following will NOT work
<body style="text-align:center">
<div>Foo</div>
</body>
Following should work
<div style="text-align:center">
<span>Foo</span>
</body>
<div style="margin:0px auto;">sfsfsafafas</div>
Use this code surely it will make the div to center.
Simple:
HTML
<div id="page"></div>
CSS
#page {
width: 350px; height: 400px; border: 1px solid #000; margin: auto
}
jsFiddle example
You might also look at the "left" and "right" attributes for centering a if you are trying to center horizontally.
For instance, if your width was 60% of the page (width:60%), you could set (left:20%) and (right:20%) which MAY center it, however that depends on how your div is positioned. (position:absolute) or (position:relative).
(position:absolute) with the above width, left, and right should center horizontally.
There is also <center> enter code </center> within HTML that has worked for me in the past.
I'm not a guru with this though, so I don't know what "best practice" to use in your case.
I would like to make the html, body and wrapper elements all have a minimum height of 100% in order to cover the whole viewing window, but I have found that I can only make html obey this declaration.
html, body, #wrapper {
min-height:100%;
}
html {
border: 2px red solid;
}
body{
border: 2px blue solid;
}
#wrapper {
border: 2px pink dotted;
}
Create a simple html document with only a #wrapper div which can either have content in it or not. If a min-height of pixels is used, the elements obey it, but when I use percentages only html will work. Why is this?
Use height instead of min-height.
body,html{
height: 100%;
}
#wrapper {
height: 100%;
}
This will definitely help you...
http://www.cssstickyfooter.com/using-sticky-footer-code.html
My problem is that ratio of width/height (for div with id="wrapper", different is huge) isn't the same on Chrome, Mozilla and IE (IE looks like refuse attribute for heigt at all). Any help, I need two divs fixed size, one beside other .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
div#wrapper {
width: 1000px;
width:700px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
div#left {
width: 80%;
height: 80%;
min-height: 80%;
float: left;
background-color: #DFDFDF;
border-left-width:2px;
border-left-style:solid;
border-left-color:#606060;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#606060;
border-top-width:2px;
border-top-style:solid;
border-top-color:#606060;
}
div#right_up {
width: 19%;
height: 80%;
min-height: 80%;
float: left;
background-color: whitesmoke;
border-top-width:2px;
border-top-style:dashed;
border-top-color:#FF2A2A;
border-right-width:2px;
border-right-style:dashed;
border-right-color:#FF2A2A;
border-left-width:2px;
border-left-style:solid;
border-left-color:whitesmoke;
}
</style>
</head>
<body id="body"">
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
</div>
</body>
</html>
First of all you cannot use percentage heights on floated elements.
Second, I see no height set on the wrapper div
Make sure that your code validates: http://validator.w3.org/ . Fixing the little errors it find will remove a lot of variance between browsers.
For instance, you've specified the width attribute twice for #wrapper, which doesn't make any sense.
Hey Rebecca and welcome to SO! :)
First of all, I don't think you could ever get mixed measurements units act the way you want. You have divs width in percentages and border width in pixels, basically you're hoping that 1% will never mean more than 2px for the wrapper width.
Let's take it step by step. First of all, you have 2 widths for the wrapper div. The second will overwrite the first and you'll end up with a width of 700px. That's very little, you should reconsider to a width of 960px or a max. of 990px (which assures you won't have an horizontal scrollbar on 99.9% of the screen resolutions today.
Let's rewrite that to:
div#wrapper {
width: 700px; /* 700 to stick to your design */
margin: 0 auto; /* which is basically the same as you have, but in one property, not two */
overflow: hidden;
}
div#left {
width: 558px; /* 80% of 700px (wrapper div) minus the border width. It will never change so there's no need to set it in percentages */
height: 80%; /* height will overwrite min-height on FF for example. Also, min-height doesn't work in IE, setting a fixed height might be the best way to go */
min-height: 80%;
float: left;
background-color: #DFDFDF;
border: 2px solid #606060; /*set a border all over the div */
border-right: 0; /* and remove the right border */
}
div#right_up {
width: 140px; /* 20% of 700px */
height: 80%; /* same height problem as you have for the other div here */
min-height: 80%;
float: right; /* float right, not left like the other one */
background-color: whitesmoke; /* please set colors in hex, not like this */
border: 2px dashed #FF2A2A;
border-left: 2px solid whitesmoke; /* again, colors in hex please */
border-bottom: 0;
}
Also, add a div with class clear in the markup like this:
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
<div class="clear"></div>
</div>
And add a class definition in the css like this:
.clear {
clear: both;
}
The last advice is to allways put your CSS in an external stylesheet and reference it in your page in the head section of the HTML like this:
<link rel="stylesheet" type="text/css" href="path/to/style.css">
Good luck!
My css looks like this
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
}
div#header {
background-color: #969696;
height: 80px;
}
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 10px 20px 10px 350px;
}
and my html
<div id="header">
</div>
<div id="mid-bar">
<div id="searchbox">
</div>
</div>
you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div... and not from header div.
I's a known bug: would use padding instead of margin. so:
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
padding-top: 10px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 0px 20px 10px 350px;
}
Give padding to #mid-bar instead of searchbox margin
I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.
See your example here with paddings: http://jsbin.com/ememi3
If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.
Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.
trying to implement a dialog-box style behaviour using a separate div section with all the stuff inside it.
When the "dialog box" needs to be shown, it has to display at the center of the WINDOW, not in the center of the page, that is, REGARDLESS of the scroling position. Furthermore, the correct solution will not move the "dialog box" if the user scrolls the page.
In Chrome and FF this works using position='fixed' and centering the div in the intuitive way.
This does not seem to work in IE6 (apparently fixed is not supported there).
Any ideas?
If I were you I would do it using jQuery and I would suggest you try it out too. This should fit perfectly for jQuery based solution [jQuery Version][1] or try out
body {
font: 80% verdana, arial, helvetica, sans-serif;
text-align: center; /* for IE */
}
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
border: 2px solid #000;
width: 80%;
}
Try the method outlined here.
Use overflow-y and absolute positioning to emulate fixed positioning in IE6 using the following steps:
Create an absolutely positioned div and give it the desired top and left coordinates on the page
Set html {overflow-y: } to be hidden or visible instead of the default auto or scroll to eliminate the scrollbar for the absolutely positioned div
Set body{overflow-y: } to be auto or scroll to insert a new scrollbar for the body content
Set body { margin:0; height:100% } to make sure the content scrollbar goes the length of the page
Set top and left margins on the body to separate the content from the absolutely positioned div
Make sure the doctype is set to trigger Standards Mode in IE
Set the absolutely positioned div to top:50%; left:50%;
Add position:relative and the desired opacity to the container div
If the doctype is not set, move the html rules to the body tag, and the body rules to a wrapper div
<!DOCTYPE html>
<html>
<head>
<style>
body { margin:0; margin-left: 14em; }
#fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; }
#fixedbox { padding: 0.5em; border: 1px solid #000; }
#container { height: 2000px; }
#media,
{
html { _overflow-y: visible; *overflow-y: auto; }
body { _overflow-y: auto; _height: 100%; }
#container { _position: relative; }
#fixedbox { _position: absolute; _top:50%; _left: 50%; }
}
</style>
</head>
<body>
<div id="container">
Fixed box
</div>
<div id="fixedbox">
Homer
</div>
</body>
</html>