This is my css code:
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
JSfiddle:
http://jsfiddle.net/yb2sLhox/
I need page like same margin such as header, content and footer. left and right side margin should be same space.. like this http://postimg.org/image/ojhkt7bg3/a099ed23/
When resizing the window is working correctly. I think in content part need to change it.
Can anybody help me?
You can try adding padding to your section
section{
padding: 0px 30px;
}
OR
Try adding some width to your section like this
section{
width:90%;
margin:auto;
}
DEMO
Related
I have gotten frustrated enough trying to finish this mock up website that I have come crawling to you guys for help. I am having 2 issues at the moment. First my content wrapper background which is all white keeps getting pushed up whenever I open Firebug to examine my code. Second my content wrapper white background is not including my footer in Firefox. In IE it includes it most of the way but not 100%. Cuts off a line of text. Any help would greatly be appreciated.
html,body {height:100%;width:100%;}
html,body,#End {margin:0;padding:0;}
body {
text-align: center;
position:absolute;
}
Content_Wrap {
text-align: left;
width: 864px;
margin: 0 auto;
height:100%;
background-color:#FFF;
}
address{
font-family:'Advent Pro', sans-serif;
font-size:14px;
float:left;
color:#195a80;
height:100px;
width:auto;
}
copyright{
font-family:'Advent Pro', sans-serif;
font-size:14px;
float:right;
color:#195a80;
height:40px;
width:auto;
}
footer{
height:300px;
width:inherit;
float:left;
}
Address and copyright sit inside the footer while everything except for my end div sits inside the content wrap. When I check with Firebug it shows the footer within the wrapper.
Link to mockup I am working on. http://ninjasquared.com/LWM/
Remove height:100% from #Content_Wrap and let wrapper to fill around it. Adding overflow: hidden; to #Content_Wrap will do trick for you!
Just replace your #Content_Wrap with this:
CSS:
#Content_Wrap {
background-color: #FFFFFF;
margin: 0 auto;
overflow: hidden;
text-align: left;
width: 864px;
}
Hope it helps you!
Are you targeting IDs, classes?
body and html are elements
but Content_Wrap and copyright are probably IDs or classes and should be referenced like #copyright or .copyright respectively.
Here's a w3schools link for ID/class references.
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
.DOC {
display:block;
margin-left:auto;
margin-right:auto;
width:1265px;
}
.DOC is a div inside the body tag, but it's not centering. Why is this?
Your width is potentially the problem. Try setting it to something small for development purposes such as 100px.
See here, http://jsfiddle.net/tJd5M/
.DOC {
display:block;
margin: 0 auto;
width:100px;
background:orange;
}
That should work
see http://jsfiddle.net/yWkyE/
.DOC
{
width:100px;
height:100px;
margin:0 auto;
background-color:#000000;
}
Is there any other CSS in play on the page that might be affecting this DIV? What's your HTML like, could you provide a sample?
Your Style works fine for me...
Adding Border will show is the Div in Center of the page or Not...
.DOC {
display:block;
margin-left:auto;
margin-right:auto;
width:1265px;
border:1px solid red;
}
and if you want to align the Content of Div to Center then try the below style
.DOC {
display:block;
margin-left:auto;
margin-right:auto;
width:1265px;
border:1px solid red;
text-align: center;
}
HTML
<div class="DOC">Sample Text</div>
Better you decrease your width and try.... it will show the Accuracy
I am using this site.
Aim :
I want to move my footer based on the content of every page.
1)If there is more content then i want to put my footer after the content.
2)I want to fix the footer to the bottom of the window screen, if there is no content like this in the following picturealt text http://www.freeimagehosting.net/uploads/e893eac88b.png
My existing CSS :
I am currently using min-height property in #content to keep the footer at the bottom.
#footer_outer{
width:100%;
background:#444;
padding:10px 0 0 0;
margin-top:50px;
height: 130px;
}
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
}
#content {
padding:5px;
margin:0 auto;
width:890px;
height:auto;
min-height:450px;
}
body {
font-family:'Helvetica Neue', helvetica, arial, sans-serif;
color:#757575;
font-size:14px;
padding:0;
margin:0;
background:#FAFAFA;
}
Please help me in achieving my aim. Thanks a lot in advance.
regards,
vaths
1. Use fixed position divs
http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx
Change CSS to
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
position: fixed;
bottom: 0px;
}
2. How to keep footers at the bottom of the page
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. I have added them to all of the DIVs, including height: 100%; and min-height: 100%; but nothing works. What would I do to make it extend all the way? It just cuts off the background of the sidebar and the background color of the content area.
(Forgot to label a part. The content area with the white background is .col1)
CSS:
#charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML
<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1" id="contentDIV">
Content
</div>
</div>
<div class="col2">
Sidebar Content
</div>
</div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Fixed.
It was the container div right after the body tag. Even with height CSS, it created problems. I removed it and changed a script I had from rendering in that div to the document.body and everything works now.
If you are trying to make your content and sidebar stretch the entire height of the page, then no amount of setting a height is really going to help. If you use 100%, your going to push your fotter off the bottom of the page so you have to scroll to see it. There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer
Check the following site for details: http://www.cssstickyfooter.com/
Another trick you will probably need. It is near impossible to get two columns to have equal height and support all browsers. The simplest way to get your gray column to the left and white center body to stretch all the way to the footer is to use a 1-pixel hight image that has gray and white in the proper proportions, which is background-repeated along the y axis.
Another great site for CSS knowledge is A List Apart.
It is hard to get a consistant layout using floats and positioning on the same elements. In particular float and position:fixed (or absolute) are incompatible and each browser handles the situation differently.
IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).