Struggling a bit with HTML positioning. I'm sure it's a pretty simple problem, but just can't crack it.
Please see fiddle: http://jsfiddle.net/HMyXW/2/
Basically, I am trying to position the yellow div (#logo) above everything else, so it will push any other content on the page down, even if the screen is resized vertically.
I've tried messing with z-positions, etc. but am not having much luck.
I suggest remove all the fixed positions if it is not necessary and add a outer div to wrap all the child divs.
Check this DEMO
If it is necessary to use the position:fixed to the #logo then you need to check the height of the #logo and give the same value as margin-top to the content div.
Your #logo has position: fixed; which means the element is removed from the normal page flow.
Related
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
I know this is very simple, but i've been struggling for a while and I just can't make it work. I thought someone here might be able to give me a quick answer.
I'm trying to make a div float and align with another div. I'm trying by changing the float and display css attributes but with no luck.
I've set up a jsFiddle: jsFiddle
Thanks in advance
Here: jsfiddle
I just changed the height of the div for the example to appear better but you can set it back to your heights for your site.
I'd set the margin-top on the whole container div so that you only define that property once instead of setting it for both the menu and the content separately: anytime you're defining a value twice, you should try to put a wrapper and define it only once.
Your code works well if the screen is wide enough. Only if it's not the #content gets pushed under the submenu. To fix that give your #container a width that can accomodate both - http://jsfiddle.net/zaRqz/11/
#container {
width: 1040px;
overflow: hidden;
}
I have the following code: http://jsfiddle.net/pefGx/1/ and for some reason the nav area hides content as opposed to just making it go to the next line. What kind of code do I need to put in there to make the words move around it. I have tried putting the ul in a div but to no avail.
Remove position: absolute;.
Content won't flow around things that are taken out of normal flow (which is what absolute positioning does).
All you need is to remove position:absolute; from your nav class. And all will be ok.
This is your updated jsfiddle http://jsfiddle.net/pefGx/4/
As the others said, remove the position absolute. You can then use the margin properties to move it upward if needed.
Here's your JS Fiddle with the nav moved 40px upward
http://jsfiddle.net/pefGx/5/
The key line is margin-top in the css.
please see the test page on www.derekho.co.uk
I'm wanting to 'empty' the container labelled with 'D' so that the body background tiles show through.
Container D needs a set width and needs to be centered. Any ideas?
As solved by asker:
http://www.derekho.co.uk/test.html
I suggest to use floats instead of absolute positioning. With absolute positioning you will have troubles when adding content on top and at bottom of the whole structure. For example, if you add a footer and side columns are bigger than the center one, footer will be positioned under these columns, they will cover it! Using floats, you can avoid this setting clear: both; for the footer element.
Float example:
http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm
What's the recommended & most elegant way of getting rid of the gap caused by position:relative?
I have a front page and want to put a banner that will be partially above the header and content section, but using position:relative produces an empty area...
See example (I want the text to be just below the red box):
http://jsfiddle.net/Ru2CT/
I know I could create another relative positioned div as a parent of my text, but then I'll still have the gap but between content section & footer...
Any ideas? :)
Take the entire contents of the grey box, and place it within a div (stretched to be the same size). Then move that box up with position:relative. This will have the effect of moving the text with the red "slider"/banner thing, without moving the gray background.
Here we go:
http://jsfiddle.net/4BLFJ/ [animated and annotated]
This is not what you asked, but is one of the two ways I would do it:
The main idea here is to make the banner an absolutely-positioned div (not absolutely-positioned on the page, though you can do that too; it may in fact be better).
First set the #content area to be position:relative, but NOT change anything else. This creates a new stacking context (child elements use top/right/bottom/left and percentages relative to it).
Then put the banner-thing as a child element of the #content area, and set it as follows:
position:absolute;
width:80%; height:100px; /*there are other ways to set the height and width*/
bottom:100%; /*this puts it at the top*/
/*you can also use bottom:105% or bottom:90% or other things, or if you really
want to use non-relative units like px, you can create a third nested div that is
relatively positioned by whatever px amount*/
Negative margin would be a much more elegant solution in this situation (revised jsFiddle). Note that I've had to move the #eee background to div#main, as it would otherwise overlay on the background of div#top.
As a general rule of thumb, I'd also recommend avoiding relative positioning unless absolutely necessary - can often lead to z-index headaches in older versions of IE.
I've finally resolved this issue, simple:
position: relative;
bottom: 200px;
margin-bottom: -200px;
Does the magic! :)