I just need a little help with some CSS layout if you don't mind.
I've got three things I'm trying to play around with and I need some help making this work the way I was hoping.
I've got the <body> element of a page, which I'd like to be 100% of the browser window, obviously.
Then I've got two <div> elements which I'd like to stack on top of each other, but the trick is this, I'd like the bottom <div>, (a menu which should really be a fixed height) to determine the height of the top <div>.
Is there a way to lay this out in CSS?
I'm assuming you want the height of the first <div> to have a height of <body> minus second <div>.
If you're using percentages in your layouts, then you can make one have a height of 90% and the other 10%.
But if you're using pixel sizes, you'll need to use javascript. There's no way to determine height by subtraction in CSS 2. You can use offsetHeight to get the pixel height of an element and style.height to set the height of the other.
If you want the bottom <div> to be fixed to the bottom of the viewport all the time regardless of the height of the top <div>, then set its position to fixed. E.g.
#menu {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
}
Else if you want to expand the top <div> to the bottom of the page if its content is smaller than the total height of the viewport, i.e. the "sticky footer" technique, then have a look here or here.
Related
I have implemented a sticky footer on my wordpress website with this HTML code:
<style>
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;}
</style>
But when viewing the post, the footer goes beyond a section on the website (attaching the image below) and screws up the carousal too. Ho do i fix this?
footer going beyond the carousal section
I was trying to implement a sticky footer on my website. I was expecting it to get fixed at the bottom of the screen and not change anything else.
Try to apply z-index property.
z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Make sure to give a z-index property to your .footer styles. An element with a larger z-index is always stacked on top of an element with a lower z-index. Elements with the same z-index are stacked in the order they appear in the document. By default, elements have a z-index of 0. However if your footer will always be visible, better go with 100 and sure it will come on top.
Also on the picture it looks like it doesn't take the 100% width. Maybe you have margin or padding set on the parent element. But also can try to use 100vw which is gonna be the view width of the screen.
I am trying to create a navigation element (nav) that spans the full width of the page, but when the windows shrinks enough where the text overflows, the text wraps. As this is the navigation bar for the page, I'd prefer it didn't wrap and the page just scrolls when the nav's content overflows it. I was thinking giving it a width in pixels instead of just 100% would work, but I don't know how to make it the full width on every screen using pixels. Any idea how to do this? I am using SASS too if that could help with a solution.
Basically, I need a solution that makes a element act as though its width were set to 100%, but it can't wrap the text if there's overflow. The window should scroll if there's overflow.
Put in the css style white-space:nowrap;
If you want a scroll bar in the div, go for overflow:scroll; and set a height of one line, and don't use nowrap.
Full width should be easy: width: 100%
If you want specifics, show us your code.
I think your best bet would be to set a minimum width on your nav element. This way, it will only scale your div to a certain point so it doesn't wrap. The only downside of this is that you need to specify a width, but the upside is it works without any of the div being cut off.
http://jsfiddle.net/piedoom/Km4Xa/1/
You can see in my CSS I have the following:
div
{
width: 100%;
background: red;
min-width: 250px;
}
The min width specifies how small the div can get before it just stays at that value instead of taking the window as it's width.
You can also apply this to the body so it works on all elements.
I've looked for an answer and found some but they look to only be for divs with background colours, not background images with corners etc. My example is at (removed)
I want the menu and the "page" to be the same height 100% of the time. No matter which one is larger ie if the page has more content the menu has to stretch and vice versa.
As you can see, the shadows etc for the background images are divs absolutely positioned within the respective divs and then z-indexed lower than the container...
Am I going about this the wrong way? Insight would be very helpful, thanks in advance!
Set the div's height property to 100% of it's parent, which will be the body of the document or a containing div. Then simply set margins for the top and bottom.
#menuDiv {
height: 100%;
margin: 100px 0 25px 0;
}
Same for the content div. The div's size properties won't change for the background image. Although it might be better for you to put both divs in a containing div with both children (menu and content) set to 100% of it's parent, then set a minimum height on the containing div which is equal to the height of the menu. If you don't do this and the content div is smaller it'd look ugly.
simple question
if I make a div with border all way round with some text in, the div box will only be as wide as the content.
how do I make it that the div always stretches 100% of the screen across, even if nothing inside it.
I understand min-width doesnt work with IE, is there a safe, stable way to do this?
No, a <div> will always take up the 100% of width unless a style(css) alters it.
Keep in mind that a <div> is a block element.
If you set the display value of <div> to be inline, for example, it would only take up the width of its content.
Example:
.myDiv
{
display: inline;
}
<div class="myDiv">I will take up width of my content only</div>
On the otherhand,
A <span> will only take up as much width as the context because its an inline element.
Here is an example.
jsFiddle
I'm having some trouble with my web page. A picture probably descibes it best so here it is:
http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png
The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:
#mainContainer {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 800px;
min-height: 700px;
height: 100%;
}
I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to auto:
http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png
This is how it should look (and how it does look using height: 100%):
http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png
The full page can be found here (click on "Om oss" to see the page with the misplaced text)
I would really appreciate it if someone could figure out what the problem is! :-)
(Hopefully the CSS and HTML is easy to understand)
Edit: I just noticed that it renders properly in Safari, but not in Firefox.
You have given html and body a height of 100%. (Many child divs also have height:100%.)
What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.
Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.
You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!
Stian,
For the div #mainContainer, set the height to auto.
For the div #mainContainer-middle, set the height to 550px.
That should fix your layout issues.