Hello I am writing a site using Aptana Studio 3 I at this stage have 1 <div> for content one <nav> for site navigation and one <footer> containing a simple copyright.
I am currently experimenting with
float:left;
float:right;
This has caused my <footer> to jump to the very top of the page and it won't leave, please help me find a solution which doesn't involve position:absolute; or failing that a way for the absolute position to be centred.
You have to wrap your <nav> and content <div> in a wrapper and add a CSS rule to wrapper overflow: hidden - http://jsfiddle.net/7kpuH/
UPDATE: for the footer that sticks to the very bottom of the page you might want to loo here - Problems with CSS sticky footer
<section>
<div id="content">
content
</div>
<nav>
navigation
</nav>
</section>
<footer>
footer
</footer>
CSS
section, footer { width: 500px; margin: 0 auto; background: #eee; }
section { overflow: hidden }
#content { background: orange; width: 250px; float: left; padding: 20px; }
nav { background: beige; width: 150px; float: right; padding: 20px; }
footer { padding: 20px 0; border-top: 5px solid #fff }
Related
I'm trying to move the footer down 50px to go outta screen,
but the negative margin doesn't work (nothing is moving) and I'm not quite sure why...
footer {
background: #111;
padding: 50px 0 100px;
text-align: center;
margin-bottom: -50px;
}
Here's an example
body {
background: white;
margin: 0;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<body>
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
</body>
Negative margin is working fine but it's not doing what you are expecting. negative margin-bottom will not make the element to move outside. It will make the parent element to shrink instead.
Here is a simplifed example:
.box {
border:5px solid #000;
}
.box div{
background:red;
height:200px;
margin-bottom:-50px;
}
<div class="box">
<div></div>
</div>
As you can see the parent element has a height less than its child due to negative margin and we are having an overflow.
This is what is happening in your case, and since the overflow is by default scroll you will keep seeing the footer. Add some border and you will better see:
body {
background: white;
margin: 0;
border:2px solid;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
In order to hide the overflowing part, simply adjust the overflow property and you will have what you want:
html {
overflow:auto;
}
body {
background: white;
margin: 0;
border:2px solid;
overflow:hidden;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -200px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
As you can see, I have added a bigger negative margin to shrink more the body element and to make all the footer outside then I hide it using overflow:hidden
use transform instead of margin
footer {transform: translateY(-50px);}
If I understood your question right, you want a footer to be half hidden from the view.
If so, try to use fixed position, add this to your css:
position: fixed;
bottom: -50px;
If you are using Firefox, try hitting the F12 button for the Web Developer tool.
In the inspector tab you can inspect the element and set the css rules for that element.
Probably you have some kind of conflict with rules declared somewhere else.
You can change live the css for testing in the Web Developer -> Inspector -> Stiles.
For positioning use position and top/bottom/left/right. For example
position: relative;
bottom:50px;
I'm trying to have a fixed header on my webpage, i.e. it should always remain visible, even when scrolling. Note that my page is fixed width (800px) and horizontally centered on the screen.
What I've tried:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
</header>
<div class="separator clearfloat" style="position:fixed; top:71px; height:1px;">
</div>
The separator is a horizontal line which should go all the width of the screen, see the footer.
Problems with this:
1. using the position:fixed also places it at left=0, instead of centered.
2. the separator doesn't show.
I can make the separator visible by placing it inside the header, but then the width is limited to 800px:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
<div class="separator clearfloat"></div>
</header>
The testpage is here.
How do I fix this?
I would position parent element as fixed and center header with margin: 0 auto;
jsFiddle Demo
Html:
<div id="top">
<header>Header</header>
</div>
<main>
<!-- Lots of content here. -->
</main>
Css:
#top {
position: fixed;
left: 0; top: 0px; right: 0;
z-index: 1;
/* The below styling is here for illustrative purpose only. */
border-bottom: 1px solid #c1c1c1;
background: #fff;
opacity: 0.9;
}
#top header,
main {
width: 500px;
margin: 0px auto;
}
#top header {
height: 100px;
/* Border styling is here for illustrative purpose only. */
border-left: 1px dashed #c1c1c1;
border-right: 1px dashed #c1c1c1;
}
main { margin-top: 100px; /* Should be the same as '#top header' height. */ }
Ok, a working solution.
In <header> wrap all the content (except separating line) with a <div>.
To that <div> you should add
overflow: hidden; //optional clearfix
width: 800px;
margin: 0 auto;
And also you should add width: 100%; to <header>
Just make your header the full width of the page and make that position: fixed;
Then wrap your header content in a div tag and set that to width: 800px; margin: auto;
This makes your header stay on a fixed position on top of your page.
And uses the div to set your menu/header data in the middle of the page.
I have googled and tried every code I have found and it hasnt work. The only thing that separated the footer from the content is the <div id="spacer">
I need space between my content and footer. Im working with a wordpress localhost so cant give a fiddle link. But this is a picture how it looks now:
http://tinypic.com/r/rcsi10/8
I need it to look like this:
http://tinypic.com/r/hriwic/8
CSS
#page {
background: white;
width: 1020px;
margin: 10px auto;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
.site-footer {
clear: both;
padding: 40px 40px;
color: #000;
text-align: center;
background: #fff;
padding: 10px;
font-size: 11px;
margin-top: 15px;
}
#spacer {
height: 20px;
width: 1020px;
margin-top: 15px;
}
HTML
<div id="main" class="site-main">
<div id="spacer">
<footer id="colophon" class="site-footer" role="contentinfo">
</div>
try add these two css property in .site-footer, try changing top size in pixel to desired gap
.site-footer{
position:relative;
top:-20px;
}
suppose you have 2 div wrap like Div 1 is the top white area and the is the bottom footer. some thing like this.
//just an imaginary div
<div class="contentarea">
...............
</div>
<div style="clear:both"></div>
<div id="spacer" style="margin-top:10px;">
<footer id="colophon" class="site-footer" role="contentinfo"></footer>
</div>
normal case this is enough to make a space between the two div content area and the spacer. make sure you don't give bg color for the wrapper.
I'm trying to create a web page with a two column layout. One aspect of it, is that images can be resized to take up half the column width. I use some CSS as follows
.columnWrapper {
float: left;
width: auto;
}
.sidebar1 {
float: right;
width: 33%;
padding: 0 20px 0 10px;
}
.main {
float: left;
width: 66%;
padding: 0 20px;
border-left: none;
border-right: solid 1px rgb(153,153,153);
}
footer {
clear: both;
}
nav ul, header h1, footer p, .contentWrapper {
max-width: 1200px;
margin: 0 auto;
}
img {
max-width: 100%;
}
img.half {
max-width: 50%;
}
img.left {
float: left;
margin: 0 10px 10px 0;
}
img.right {
float: right;
margin: 0 0 10px 10px;
}
When I try to resize the images in the html using markup like the following
<div class="contentWrapper">
<div class="columnWrapper">
<!-- main content goes here -->
<article class="main">
<img src="images/synergy2.jpg" alt="Synergy" class="half right">
<h3>About us</h3>
<p>blah blah blah</p>
</article>
<!-- first sidebar goes here -->
<aside class="sidebar1">
</aside>
<!-- end column wrapper -->
</div>
<!-- end content wrapper -->
</div>
It works as I expected on Chrome, but Firefox has a problem, in that the image isn't resized. Is there a problem with the CSS or is it a browser issue? Thanks.
Another thing I was wondering, is there a simple way to make sure that the columns have a minimum height. If there isn't much content the footer ends up too high and looks strange. Thanks.
I put up a sample web page with the html / css in question
http://adjk3543.appspot.com/aboutus.html
Apply a width to your columnWrapper:
.columnWrapper {
float: left;
width: 100%;
min-height: 600px;
}
I too found the same solution as #3dgoo has given. So Adding footer solution here too. You have to do some CSS hack to align footer at bottom always irrespective of content on page.
Check this out CSS Stick Footer
This definitely works. I have used many times.
Make sure you understand the logic here.
Basically I'm laying out a website and I'm using DIV's to have a header, left-column, right-column and footer. I want to have the content section of the website expandable to the html/text inserted into it so i have been using height: auto.
I'm using background images for the top of the header, bottom of the footer and a 1px high filler for the body of the website.
My problem is everything I have tried essentially eliminates the middle background image if I try to have the right-col to the right of the left-col and not under it.
I'm sure this is probably something pretty easy but I have been on it since last night and I'm about up done trying to figure it out.
it's valid XHTML and CSS (except for jQuery UI stuff that is CSS3, though that shouldn't matter structurally).
Any ideas or could someone point me to a tutorial on how to get a two column layout using background images?
<body>
<div id="top">
THE TOP IMAGE GOES HERE IN CSS
</div>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
<div id="left-col">
</div>
<div id="right-col">
</div>
</div>
</div>
<div id="bottom">
THE BOTTOM IMAGE GOES HERE IN CSS
</div>
<div id="footer">
</div>
</body>
#wrapper {
margin: 0 auto;
width: 838px;
background-image:url('../images/wrapper_bg.gif');
background-repeat:repeat-y;
}
#header {
width: 818px;
color: #333;
padding: 10px;
height: 100px;
}
#navigation {
width: 838px;
}
#content {
width: 838px;
color: #333;
margin: 0px 0px 0px 0px;
/*min-height: 800px;*/
height: auto;
}
#footer {
width: 838px;
color: #333;
text-align: center;
}
#top{
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_top.gif');
}
#bottom{
clear: both;
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_bottom.gif');
}
#left-col{
margin-left: 20px;
width: 590px;
float:left;
height: auto;
}
#right-col{
width: 170px;
display: inline;
height: auto;
margin-right: 25px;
color: #777777;
font-size: 15px;
padding: 5px;
font-weight: bold;
}
http://www.wholehealthconnect.org/home.php is the website.
Can anyone help me get the middle div to expand to content as well as have the right col next to the left col and still have the background image behind them?
I am not sure I understood your problem correctly, so do not hesitate to point me in the right direction.
Basically you want the links: FAQ, Professional ... Facebook to show up on the right ?
Why not use a classic:
#right-col {
float: left;
margin-left: 610px; /* or perhaps higher */
}
Am I right on track or did I not understood the problem you were stating ?
Add overflow:hidden to #content. Should do it.