On my site, I have a fixed-width central wrapper, which I don't want to change in size, but I do want to margins to be resized depending on the size of the user's screen. I tried wrapping everything in one div called wrapper-outer and then centering it by margin: 0 auto but it doesn't seem to work.
Site: http://antonpug.com/mainepark/
CSS:
body {
font-family: "Nobile", sans-serif;
font-size:0.75em;
text-align:center;
min-width:1550px;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
h3 {
font-size:1.25em;
}
header h1, header h2 {
font-family: "Ubuntu", sans-serif;
}
header h1 {
font-size:3em;
margin:25px 0 0 0;
}
header h2 {
font-size:2em;
margin:0 0 25px 0;
}
#wrapper-inner {
margin:25px 100px 25px 100px;
padding:15px 0 15px 0;
background-color:rgba(255,255,255,0.75);
moz-border-radius: 10px;
webkit-border-radius: 10px;
border-radius: 10px;
}
#wrapper-outer {
width:1500px; -- that didn't work either!!!
margin: 0px auto;
}
#feature {
display:inline-block;
width:80%;
margin:15px;
}
.column {
display: inline-block;
vertical-align:top;
width:600px;
margin:15px;
}
#col-1 {
text-align:right;
}
#col-2 {
text-align:left;
}
.section {
margin:0 0 25px 0;
height:450px;
}
footer {
color:#909090;
}
footer a {
margin: 0 0 25px 0;
text-decoration:none;
color:#909090;
}
Remove min-width on the body. If the minimum width for the body is greater than your content wrapper, scrollbars will show before the fluid margins can do their thing.
Change the margins on div#wrapper-inner to:
margin: 25px 0; //previous values had 100px margins for left/right which add to width per box model
Finally, adjust div#wrapper-outer to the width of your content like SLaks suggested.
You need to add a fixed width to the centered wrapper.
Just add a percentage margin to your col-1 div so your margins adapt fluidly.
Something like 8% looks good.
CSS
#col-1 {
margin-right: 8%;
}
Also, remove the margin declaration on your col-2 div so your margins adapt proportionally.
Related
So here's my code:
#logo {
position:fixed;
color: white;
width: 100%;
padding: 5px;
left:0px;
top:0px;
height:50px;
width:100%;
background:#ffffff;
z-index: 1;
}
#page-container {
margin: auto;
width: 960px;
height: 100%!important;
background: #ffffff;
border-style: solid;
border-color: red;
}
html, body {
padding: 0;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #000000;
background-color: #eef3f7;
}
#footer {
position:fixed!important;
position:absolute;
color: white;
clear: both;
width: 100%;
padding: 0;
left:0px;
bottom:0px;
height:30px;
background:#272695;
text-align:center;
}
I want to be able to set the page container height so that the footer over laps it all the way through. The issue I am getting is this:
What I want is to have my page-content rule to cover the whole top and bottom with no overlapping. I'm looking for something along the lines of this:
I honestly have tried everything I just don't know what the issue is.
Add this to your CSS.
body, html {
height: 100%;
}
The CSS height property is relative to it's parent and height defaults to auto. So to get your #page-container to be 100% you have to set the parent height.
I have a simple template where I show header, content and footer section in the centre, Header has background color and all the contents should have 30px padding on left & right.
I dint it following way but it increases the width.
http://codepen.io/anon/pen/xZapEE?editors=1100
html, body, form {
height: 100%;
background-color: #fff;
height:100%;
}
body {
font-family: "Open Sans","Trebuchet MS",Verdana,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 13px;
line-height: 18px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
color: #687074;
height:100%;
background-color: #fff;
}
.main-wrapper{
width:1000px;
margin:0 auto;
position:relative;
height:100% !important;
padding:0 30px;
}
.header-wrapper{
width:100%;
min-height:200px;
background-color:#f5f5f5;
margin:0 auto;
position:relative;
padding:0 30px;
}
.content-main{
width:1000px;
min-height:400px;
margin:0 auto;
position:relative;
height:auto;
background-color:#ccc;
}
.footer-wrapper{
width:1000px;
min-height:200px;
background-color:#f5f5f5;
margin:0 auto;
position:relative;
}
.header-row1{
float:left;
width:100%;
height:150px;
margin-bottom:15px;
}
.header-col1
{
float:left;
width:132px;
width:50%;
}
.header-col2
{
float:right;
width:50%;
}
.header-col2 > h1{
font-size:60px;
text-align:right;
}
.header-logo{
}
.header-row2{
float:left;
width:100%;
height:30px;
margin-bottom:15px;
padding:0 30px;
}
You can use box-sizing to fit it in:
box-sizing: border-box;
Box-sizing values:
content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box: The width and height properties include the padding and border, but not the margin.
Is there a way to have two divs in one row or have a two columns of divs. It appears as one div under the other instead of a div next to a div.
CSS
#tacoh {
margin: 200px 20% 40px 0;
float:right;
}
#hamburgerh {
margin: 200px 40px 0 20% ;
float:left;
}
HTML
<div id="hamburgerh" style="width:300px;height:350px;"></div>
<div id="tacoh" style="width:300px;height:350px;"></div>
You can either set a float left for both divs :
#tacoh {
margin: 200px 20% 40px 0;
float:left;
}
#hamburgerh {
margin: 200px 40px 0 20% ;
float:left;
}
or wrap them into a container as Marius Balaj suggested :
.container {
width:100%;
margin: 200px 0 40px;
}
#tacoh {
margin: 200px 20% 40px 0;
float:left;
}
#hamburgerh {
margin: 200px 40px 0 20% ;
float:left;
}
with the following html :
<div class="container">
<div id="hamburgerh" style="width:300px;height:350px;"></div>
<div id="tacoh" style="width:300px;height:350px;"></div>
</div>
Also since your style is the same for both divs, you could also create a class for them like below :
.w_300_h_350{
width:300px;
height:350px;
}
and apply it to you html like this :
<div id="hamburgerh" class="w_300h_350"></div>
<div id="tacoh" class="w_300h_350"></div>
Wrapit inside a container.
http://jsbin.com/qediqoxiwo/edit?css,output
.container {
width:100%;
margin: 200px 0 40px;
}
.col {
float:left;
width: 300px;
height: 350px;
background:blue;
}
.col:last-child {
float:right;
background: red;
}
i'm having trouble giving a footer 100% width it causes a horizontal scroll can u see something ? When i lower the 100% it makes a orange bar at the side because that's the background, i read that having a padding on the element could cause it but i'm pretty sure there isn't any padding present on the content of my footer bar so could anyone help out?
/* CSS Document */
/*-- RESET | Based on Eric Meyer --*/
ol, ul {
list-style: none;
padding:0px;
}
li {
line-height:25px;
}
/*-- BODY BORDER --*/
.bt, .br, .bb, .bl {
background: white; position: fixed; z-index: 99999;
}
.bl, .br {
top: 0; bottom: 0; width: 5px;
}
.bt, .bb {
left: 0; right: 0; height: 5px;
}
.bt {
top: 0;
}
.br {
right: 0;
}
.bb {
bottom: 0;
}
.bl {
left: 0;
}
/*-- MAIN --*/
html, body {
height: 100%;
}
body {
text-transform: uppercase;
background: #FCD9CA;
}
.clear {
clear: both; overflow: hidden;
}
.sidebar {
padding: 15px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.sb-slider {
padding-top:0px;
margin-top:0px;
}
.container {
padding-bottom:100px;
}
.logo {
padding-left:15%;
position:relative;
top:125px;
margin: 0 auto;
}
.top {
padding-left:5%;
position:relative;
top:200px;
margin: 0 auto;
}
.footercontact {
padding: 15px 0;
}
.footer {
padding-left:5%
}
footer {
border-top: 1px solid black;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
background:#fff;
}
i've made a fiddle to show you the problem
http://jsfiddle.net/9gh3ht48/2/
As #Lal mentioned the problem is caused by the left padding on .footer.
I'm assuming this padding is a necessary part of your design so a better solution would be to set the box-sizing property of your footer to border-box:
.footer {
padding-left:5%
box-sizing: border-box;
}
DEMO
Edit
Ok try this:
DEMO
.footer {
padding-left:5%;
margin: 0;
}
Just remove the 100% width from your footer and add right:0; instead.
That rule combined with left:0 will ensure the element spans the full width and any padding and borders will not cause a scroll.
(The box-sizing rule should have worked also assuming you had the vendor prefixes for older browsers and weren't supporting less than IE8)
See this fiddle
Remove padding-left:5% from
.footer {
padding-left:5%
}
When you add 15% for left padding, the remaining width available is only 85%.But you are setting width as 100% which causes an Horizontal scroll to your page..
So, if you want that 15% padding set your width as 85% only..
I added:
display: inline;
to .footer, and it fixed the problem, although you will need to change the padding.
Add a width of 100% to the class footer: .footer. This will resolve your issue.
.footer {
padding-left: 5%;
box-sizing: border-box;
width: 100%;
}
I set my div to be fixed position and when I scroll page to very bottom or if I use smaller screen like smartphone or tablet my fixed div float over my footer. How can I fix this?
This is my fixed div:
.infoItem{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px #e4e4e4 solid;
width: 227px;
background:#f8f6f7;
position: fixed;
}
and this is my wrapper:
.wrapper {
min-width:954px;
}
I also try to wrap my infoteam div in another div and set new div to be position: absolute but that also didn't work.
Fixed div html
<div class="box-collateral box-up-sell">
<div class="infoItem">
<p class="heading">Add to your </p>
<p class="content">
<div class='upsellContainer'>
<div>
</div>
</div>
</p>
</div>
</div>
footer css
.footer { background:url(../images/footer-top-border.png) repeat-x;}
/* .footer-container { border-top:15px solid #b6d1e2; }*/
.footer { width:904px; margin:0 auto; padding:30px 10px 50px; }
.footer .store-switcher { display:inline; margin:0 5px 0 0; color:#fff; }
.footer .store-switcher label { font-weight:bold; vertical-align:middle; }
.footer .store-switcher select { padding:0; vertical-align:middle; }
.footer a {text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer .bugs { margin:13px 0 0; }
.footer .bugs a { text-decoration:underline; }
.footer .bugs a:hover { text-decoration:none; }
.footer address { margin:0 0 20px; }
.footer address a {text-decoration:underline; }
.footer address a:hover { text-decoration:none; }
.footer ul { display:inline; }
.footer ul.links { display:block; }
.footer li { background:url(../images/bkg_pipe2.gif) 100% 60% no-repeat; padding:0 7px 0 4px; }
.footer li.last { background:none !important; padding-right:0 !important; }
.footer-container .bottom-container { margin:0 0 5px; }
Use clear:both inside the footer div or apply clear:both in css like:
#footer{
clear: both;
}
Add another div right after your div and before your footer like this:
<div style="clear:both"></div>
This will force any element below it down. You also want to make sure that the footer has clear:both as well (this should always be true of footers)