Actually I don't know how to find solution to this problem and how to name it.
Here's the link to my site:
http://www.portalpraktyk.pl/podstrona_itp
The problem is that I have page divided into 3 standard parts: top, content, footer. Between content and footer there's also facebook div to put social plug-in. What happens is that content of both divs (facebook and footer) stays under content div, but both divs actually goes up to content area (you can see dark background div right under header and behind content div).
I won't show you a code, because I don't know where the problem is. The best way is to check how this is written with web developer and firebug browser plugins.
Does anybody know solution to this problem?
Your problem is a classic problem of floats not clearing.
Look for information on .clearfix.
Basically the div#contents, has a height of 0, because #box_left and #box_right are floated, so div#contents is not containing them, and because of this your page gets all messed up.
Another tip is that instead of using position:relative and asigning a top:30px value, use margin-top:30px.
You need to clear your floats right after your #content div closes.
Related
Not sure if this is the appropriate place to ask this, if not, where? It is a code question, but the code is on a website and hard to paste here.
I'm looking at M&S's mobile site, and their slide in menu system to be specific. If you go to http://www.marksandspencer.com in Chrome, open the dev tools and use the device toolbar, it should display as if on a mobile device.
The menu is series of div's inside a nav. The div's are position: absolute;, but somehow the content doesn't get cut off at the bottom, the page expands to the height of the menu, even when it's way past the bottom of the footer.
Obviously positioning an element absolutely takes it out of the normal flow, and so would be cut off at the bottom of the footer.
Can anyone see how they've managed to achieve this..? That is, having their absolutely positioned div's not cut off. I can't see any manual setting of a height property anywhere.
Update
To see the effect, go to the home page, set the viewport width to about 500px, then open the menu, clicking on 'Men' then 'Clothing'. This leads to the menu being higher than the content of the page.
Looking at the div with classes mcp-nav-primary__submenu-container is-active you can see it's position: absolute;.
I'm not asking for someone to write code for me.
I'm asking if anyone can see how M&S have achieved this effect..?
You learn something new every day. Apparently nothing has to be done to achieve this. The window expands by itself. Note however that the height of the body and html does not expand. And if you set overflow: hidden on the body it is cut off as you expected.
See this fiddle: https://jsfiddle.net/uhqtk13a/
I have been looking for tutorials on this for a while now and am coming across a problem. I have a layout with a fixed header at 100px in height and a fixed footer at 50px in height. In my content, I have a menu on the left at 200px wide and content on the right that fills the rest of the screen. My header, footer and menu all have styles applied for background colours and borders.
What I want is for my footer to remain at the bottom of the window, or at the bottom of my content, if the content is longer. I want for the menu to be the same height as the content, so that the styles I have applied will remain intact. What I get is either the footer sticks to the bottom of the content because the content is shorter than the menu, or there is a gap between the bottom of the menu and the top of the footer.
Every tutorial I have found fixes this, but requires the menu to have no background (it takes the background styles from the <body> tag. As I said, the styles I have applied are attached to the menu. Is there a way to fix this?
UPDATE: My source can be found at http://jsfiddle.net/53SZd/3/. That is what I have now (apologies if the floats cause all manner of headaches), but if there are ways to have it looking how I want, I am very open to suggestions.
UPDATE 2: I think my way of explaining this is wrong. I have uploaded some images of what I want to my Google Drive that should explain what I want.
Whilst I do sincerely appreciate the help that I am getting here, there is always one caveat that appears. Many thanks to Waz for his help, I do really appreciate it, but I am coming across one issue or another with each answer. I never realised that getting the effect I want could be so hard -_-"
seems that u might be using float property on the menu, if that is the case you would have to clear float with the footer or a div, but seeing the codes would be great help for your answer
one way to do it is to put a margin-left on your content of 220px (200 for the menu +20 for it not to be just aside the menu)
had the same problem, this solved it.
for the footer, the solution of james is the best ( put clear : both on your footer)
here is how it works : http://jsfiddle.net/53SZd/19/
EDIT : I understood the prolem was for the content.
give your menu top= 111px(100 size of header, 11 for padding) and bottom=51px (50 height footer,1 border) and your footer bottom=0px;
I wasnt to make something like this site where I can scroll up and down and my menu goes with me, but the logo remains at the top. How did they do this? I tried some CSS, but was not able to get the logo to stay in his place.
it's called a persistent header, it's too long to explain on here so you can use this tutorial: http://css-tricks.com/persistent-headers/
You can start with position:fixed and defining either top and left properties or bottom and left properties.
This web can help you too : CSS Sticky Footer
I had posted a similar question previously, when I was looking for help in doing the javascript portion.
I now have figured out how to get the javascript working to reproduce this affect in the images below, I need help getting my "MIDDLE" clickable div into place though.... scroll down to see the question portion
Ok here is a page with the code I have this far on jsfiddle.
Mu updated attempt, got it mostly working but it seems kind of hacky the way I had to do it
http://jsfiddle.net/jasondavis/HRq6G/5/embedded/result/
I have a container div with header, content, sidebar, footer areas. Right now when you click on the header div it will toggle the sidebar and content areas.
I would really like to figure out how I can get a middle DIV in between the article content and the sidebar, I will then make that div be the trigger to toggle it all.
In the image you can see that the new center div should always stay attached to the right side of the article div
If you are good with this kind of stuff I would greatly appreciate any help I can get with it, I have spent hours trying to get a div to position like I am describing with no luck. The div should also be the height of the article div
-----UPDATE-----
http://jsfiddle.net/jasondavis/HRq6G/6/embedded/result/
I have it working now. It can most likely be improved, I had to do some hacks like setting some negative margins, I would imagine someone with better knowledge could do it without that
Your explanation was a little hard to understand, but I think this is what you want. Basically there is a thin div between the sidebar and the main content area. Clicking on it causes the sidebar to relocate. Clicking it again restores the sidebar.
http://jsfiddle.net/HRq6G/4/
To accomplish this I chose to absolutely position the middle div along the right edge of the article div. I called the middle div 'trigger.'
the layout of my html page has a fixed div on top of the page. the content div then has a margin-top to compensate for the fixed div.
However, when the content gets scrolled down, if I do a search on page, the browser would sometimes show matches that would be underneath the fixed div, i.e. invisible.
For example, go to http://mincovlaw.com/services/worldwide_enforcement_checkup, scroll down a little bit, and do several searches for "know". You will see that the one closer to the top of the page will be found but will be hidden underneath the fixed div.
Is there a better way to achieve the same looks, while retaining the functionality of a search that does not get hidden?
Simple answer: no, because that's exactly what you're doing: hiding content. Think of it as if content ceased to exist, that's exactly what you're doing and what you're looking for. Anyway, I doubt many people will search in the page, it's not THAT common