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.
Related
Fiddle: http://jsfiddle.net/rg3w8kxc/2/
I have a fixed bar on top and an element below it. Since the top bar is fixed, I need to add some padding to the top of the element below it so that the whole height of that element shows. However, when I add something like padding-top:40px for example, it doesn't move the element down; rather it creates space below the element. Same goes with margin.
I feel like I'm missing something obvious. What's the issue here?
Here's my HTML:
<div id="top-bar">
<div class="section-wrap">
Win a [name of phone]!
</div><!-- .section-wrap -->
</div>
<div id="top-section-page">
<div class="section-wrap">
<span>⇦</span> Back to the mix
</div>
</div>
<p>Some text here</p>
Here's my CSS:
#top-bar {
background: #FAFAFA;
height: 60px;
line-height: 60px;
padding: 0 20px;
position: fixed;
width: 100%;
z-index: 999;
}
#top-section-page {
background: url("http://i.imgur.com/KNYV8j2.jpg") repeat center top #69C9CA;
border-bottom: 10px solid #FFF;
line-height: 185px;
margin-bottom: 100px;
}
You can add add the padding-top on the body and then you need a top 0px on the #top-bar
Add this to your css code:
body{
padding-top: 40px;
}
#top-bar {
top: 0px;
}
I'm trying to center two divs that are using "display: inline-block;" but whenever I try to, it's not working. If I remove the inline-block class. It gets centered but displayed down the page instead of across. Example of code:
#news {
background-image: url('../img/news.png');
background-repeat: no-repeat;
height: 152px;
width: 320px;
display: inline-block;
}
#conBody {
background-image: url('../img/conBody.png');
background-repeat: no-repeat;
height: 260px;
width: 321px;
margin: 0px auto 0px auto;
text-align: right;
display: inline-block;
padding: 0px;
}
HTML :
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="news">
</div>
<div id="news">
</div>
<div id="news">
</div>
Looks like this:
You could contain everything within a wrapper. If you set the wrapper to display: table; then you can canter it even if you do not have a set width.
DEMO http://jsfiddle.net/kevinPHPkevin/nXj7c/
You need to use text-align property.
<div class="news-parent">
<div class="news">
a
</div>
<div class="news">
b
</div>
<div class="news">
c
</div>
</div>
.news-parent{
background: #ccc;
text-align: center;
}
.news {
width: 20%;
display: inline-block;
background: #666;
text-align: left;
}
Live example here: http://jsfiddle.net/7KFNR/
Advice: do not use IDs (#news) - ID is a unique identifier. Simply said: one ID can be found only once on single page. Use classes for rules that apply for multiple elements.
Remember: you need to specify width for div.news elements
You should wrap everything in a div and display it in the centre rather than trying to display each div in the centre individually.
You can centre a block element using CSS:
margin:0 auto;
Here is a fiddle with a barebones demo: http://jsfiddle.net/nRAyQ/3/
I have two divs: floated left and floated right. The margin on the right div is breaking the left div, making it appear lower on the page than it should be. I want both divs to touching the top.
HTML:
<div class="right_div">
This div is in the right place.
</div>
<div class="clear"> </div>
<div class="left_div">
This div should be at the top</div>
CSS:
.right_div {
float: right;
margin-right:20px;
margin-top: 20px;
font-weight: 600;
background-color:blue;
}
.left_div{
margin-left: 20px;
margin: 0 0 0 20px;
padding: 0;
background-color: tomato;
text-align: left;
max-width: 10em;
}
.clear {
clear:both;
}
Here is the JSFIDDLE: http://jsfiddle.net/eLSc8/
remove
<div class="clear"> </div>
try this
<div class="right_div">
This div is in the right place.
</div>
<div class="left_div">
remove the
<div class="clear"> </div>
and the red element will stay on top.
As a sidenote, empty markup placed for styling purpose only should be avoided. If you need to apply a float clearing somewhere you should use non-structural approach like easyclearing and modern variants (e.g. see the .clearfix class of html5 boilerplate)
try this
http://jsfiddle.net/eLSc8/1/
please remove this clearboth
<div class="clear"> </div>
As everyone is saying; you can lose the clearing div.
Then simply add a float left to your other div to align it.
Depending on your structure and how you want it positioned, you might need to contain them or add margin. check jsfiddle.net/RSy6F/2/
Is this the desired effect:
http://jsfiddle.net/eLSc8/4/ ?
HTML:
<div class="left_div">This div should be at the top</div>
<div class="right_div">This div is in the right place.</div>
CSS:
.right_div {
font-weight: 600;
background-color:blue;
position: absolute;
top: 20px;
right: 20px;
height: 2.2em;
}
.left_div {
position:absolute;
top: 20px;
left: 20px;
background-color: tomato;
height: 2.2em;
}
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.