I have three divs with the following css:
div#container {
width: 780px;
}
div#photos {
width: 780px;
height: 300px;
}
div#content {
position: relative;
top: -106px;
width: 780px;
}
<div id="container">
<div id="photos">photos are here</div>
<div id="content">content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer</div>
</div>
My problem is that because I've set the content layer to be top:-106px there's a big gap underneith, when I wanted the "container" div to end immediately after the "content" div. I tried setting margin-bottom: -106px on the "container" div but that didn't change the height of the "container" div..
The "content" div will have varied height as it's obviously for text, etc. Is there any way of making this work?
Thanks in advance :)
I suggest different approach, absolutly position your image and then push the content down with top margin (or padding if you need the background) on container.
div#container {
width: 780px;
margin-top:106px;
}
div#photos {
width: 780px;
height: 300px;
position:absolute;
top:0;
z-index:50;
}
div#content {
position: relative;
width: 780px;
z-index:100;
}
Set your height on your container div to 100% might help. The other thing you can try is setting the overflow property on your container div. Overflow: hidden or overflow: auto both will make your container div 'wrap' your other divs better at times.
Keep in mind your mileage will vary between browsers.
The reason for the gap is relative positioning does not remove the space originally created for that element even though you move it. Try changing it to 'absolute' and see if that does what you want.
Try changing your CSS to
div#container {
width: 780px;
position:relative; <---------------
}
div#photos {
width: 780px;
height: 300px;
background: #aaaaaa;
}
div#content {
position:absolute; <------------
top: 106px; <------------
width: 780px;
}
Instead of using position: relative and setting top, you can achieve the same effect without the space by setting a negative margin-top:
div#content {
margin-top: -106px;
width: 780px;
}
Related
I'm trying to move a div from the top of the page down to the bottom, but it's not working.
Here's the div and its CSS:
<div class="slides">
<?php include 'slides.php'; ?>
</div>
.slides {
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I've got the code (some of it, anyway) over on jfiddle:
http://jsfiddle.net/jerU7/
You can see the original page here:
http://www.autotrafficinfo.com/
I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.
In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.
How do I scoot the div (class="slides") down so that it's just above the footer?
Your code needs a bit of restructuring.
Wrap all the divs from #greenSmall to #green in a new .content div.
Remove the css property float:left from #green
Move the .slides div to below the .content div and above the footer div.
css:
.slides{
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become
.slides{
position: absolute;
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I have an outer div, called #wrap, and two inner divs: #container and #footer. Content is inside #container, and is dynamic. There may be a little, there may be a lot.
When content is minimal, the footer div may appear half-way up the page. However, this changes depending on the monitor/resolution. What is 50% from bottom on a large monitor may only be 10% from bottom on a small/cluttered viewport.
If I use this css method:
body,html { height: 100%; }
#wrap { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer { position:absolute; bottom:0px; }
then the page will always extend to use 100% of the viewport and the footer will be at bottom of the viewport - exactly as required.
However, if the content increases (or if a small viewport), the footer may overwrite any content extending into its 130px height -- the footer will not bump down.
Is there a way to remedy this?
Note: I don't wish to use percentages for the footer height as it is fixed at 130px and cannot squish.
Here is a fiddle I've been using to experiment
This is the best example of sticky footer I've seen: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
UPDATE (April 2017): As the above link has become inoperable (and much time has passed since the original post) I'd like to offer the following solution to this problem:
Permanently fixed:
#container {
padding-bottom: 130px; // ...or more
}
#footer {
bottom: 0;
height: 130px;
position: fixed;
width: 100%;
}
For a dynamically fixed element, check out this jQuery plugin: https://libraries.io/bower/jquery-sticky-header-footer
I am building a blog and have a large header image with the goal of filling the top of the screen (unless on monitor larger than 1500px)- however the scroll bar goes far beyond the header content and displays white space.
When viewed on an Ipad it zooms out and shows the extra space on the side of the content. Why is the width significantly larger than the image?
Here is the site: http://beautyintheweeds.com/
Here is the HTML and CSS:
<?php wp_head(); ?>
</head>
<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp- content/themes/journalist/images/longtop.jpg"/></div></div>
div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}
This code worked to center the header beyond the container and my hope was that it would always fill the top of the screen unless the monitor was too large. Any ideas why it is creating extra scroll space beyond the image?
Thanks.
It's the element with class="inner" that takes up the space. It gets its size from the image inside it, but then you use relative positioning to display the image to the left of the element.
If you want to use that method to center the elements, put a div around it all, that has overflow: hidden; and no width set so that it uses the default width: auto which will make it take up all the available width.
Try this
#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}
I would pull them out of the container. Move div.outer above div.container in the markup, remove all css for div.outer, div.inner then add a text-align: center; to div.outer and remove div.inner completely.
http://jsfiddle.net/pWDrD/
You will see if you increase the width of the fiddle box then the image automatically increases width without having any scroll bar. Do you understand how i did that? Let me know. If not i will explain. Simply put, when you want an image to go to 100% of the monitor then you need to put it into a container with width as 100% and margin auto, not fixed width and no position at all.
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
I am trying to make a pinned down style menu like this:
http://www.w3.org/Style/Examples/007/menus
Except I want the horizontal positioning to be more flexible.
I know that I can do that having a percentage value in "right:" instead of a constant, but i want the menu to fit snugly in a centered blog layout as the sidebar, which means when the page is resized, the sidebar shouldn't cover the content. Similarly, the box shouldn't spread away from the content if i make the page bigger.
Any way to do this with only css? If not, perhaps an easy javascript solution?
Here's one way to do this with some generic code:
HTML:
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
CSS:
Set an explicit width on the container and the content, leaving room for the sidebar in the container. Horizontally center the container.
#container {
width: 200px;
margin: 0 auto;
}
#content {
width: 150px;
}
Now we're going to position: fix the sidebar relative to the center of the page instead of relative to the right edge of the page. Make it the width of the left over space in the container and give it a margin-left (or padding-left, depending on other things you may want to do with it) equal to the width of the content. Then set right: 50% (for a right sidebar, switch these values to left for left sidebar) and margin-right to negative one half the container width:
#sidebar {
width: 50px;
margin-left: 150px;
position: fixed;
right: 50%;
margin-right: -100px;
/* other styles such as "top", etc. */
}
Resize the window and it stays snug to the content and vertically positioned wherever you place it.
Here's a fiddle (with some extra styles for visual clarity): http://jsfiddle.net/blineberry/UkEkS/