I have a wrapper surrounding a header with content inside as well as a container with content inside. The wrapper is really on there to keep everything positioned to each other accordingly within the confines I set, as well as to center everything. I have my container to automatically re-size according to the content that goes inside of it, this works without issue. However, the wrapper around the header and the container won't follow the same rule and ends up taking a height of 1px it seems. Please note: the code below will show the wrapper outlined by a dashed white border up at the top, it should instead wrap around everything it contains.
Here's the code to the website on jsFiddle.
Any help would be greatly appreciated. I feel as though I closed all of my floats, I don't see why the height: auto; on wrapper won't work, but maybe there's something I'm missing.
height: auto on #wrapper isn't working because virtually every element inside it has position: absolute.
What does position: absolute do? http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
In the absolute positioning model, a
box is explicitly offset with respect
to its containing block. It is
removed from the normal flow entirely
(it has no impact on later
siblings). An absolutely positioned
box establishes a new containing block
for normal flow children and
absolutely (but not fixed) positioned
descendants. However, the contents
of an absolutely positioned element do
not flow around any other boxes.
The choices to fix your problem:
Give #wrapper an explicit height - but that won't work if you don't know the height beforehand.
As #jeroen said: use JavaScript to set the height of #wrapper.
What you should really do is completely redo your CSS:
position: absolute is not how you should position every element on the page. You should use floats instead.
For a comparison of using position: absolute vs floats, see:
http://www.htmldog.com/guides/cssadvanced/layout/
You are using absolute positioning for the contents of the wrapper, #container and that takes it completely out of the document flow. The same applies to the contents of your header.
The only way to get your wrapper to wrap, is using javascript to calculate and set the height manually.
Related
I'm building a demo for an app I want to create and I am trying to create buttons on a mobile phone. I brought in an image of a phone and created buttons set to absolute positioning which allows me to layer them over the phone, but when I go to resize the page, the element moves a lot and does not stay in the same place on the phone. How can I fix this? Please see fiddle to see exactly what I mean: http://jsfiddle.net/x313vkup/
I would really appreciate a modification of my fiddle link so I can understand how this works.
This is a snippet of the code that shows the list set to absolute positioning:
#phone_view {
position: absolute;
margin-top: -65%;
margin-left: 15%;
}
The beauty of position:absolute is that you can accomplish a lot without setting margins -- you can go straight to using top, left, etc.
An absolutely-positioned element needs to be positioned relative to a wrapper, however. I would recommend setting your #phone element to position: relative and then setting the position and dimensions of #phone_view "manually" in the CSS.
I would also recommend creating another wrapper element inside of phone to act as the relatively positioned element, since your h4 can wrap onto a second line, drive down the phone image, and get it out of sync with the absolute positioning.
EDIT: link to JSFiddle. Note the relatively-positioned wrapper (.phone-wrap). Child elements with position: absolute will define their position based on this wrapper. Also, no need for margins on #phone_view.
Also, re: #phone_view, background-color is just to make it visible for the demo, and while overflow: auto seemed appropriate for the demo, it doesn't affect the positioning of the object itself.
I've coding for about a week now and I'm learning all by my self (which hopefully explain a lot of my errors in this code).
I've tried dozen of examples to get my footer to stick to the bottom of the page.
When i try to change the "position:absolute" of the wrapper or footer, it either gives a gap between the browser window and header or puts the footer up on the top.
I have no idea how to fix this.
(Some tips for my code is also greatly appreciated!)
HTML
http://pastebin.com/ksgJSUpz
CSS
http://pastebin.com/i9nPtYkU
Thanks!
The problem is that you've been using position:absolute throughout your code. Absolute positioning breaks the flow of the document.
If you use relative positioning or if you don't define positioning at all (static position) the elements will run the one after the other. With your code you have to calculate the height of each element end start the next one where the previous ends by hand. This happens because absolute positioned elements don't push other element down. They are as if they have no height. For example you have your header height at 100px; and then you start your info with absolute positioning and top 100px;
Your footer will go and sit at the absolute position that you will tell him to. Problem is that you don't know what that position is since you have an element with variable height. If you put `bottom:0;' with absolute positioning the header will just go and sit at the bottom of its parent. Its parent in your case is the wrapper which has no specific height defined. So the #wrapper gets the height of its contents but since its contents are all absolute positioned inside it and as I said that breaks the flow it doesn't get any height from them. Instead the #wrapper gets the height of the window and not the whole document.
Best thing to do is redesign your page without absolute positioning.
Some quick fixes would be to give your wrapper a specific height like height: 1200px;
That will force your footer to go and sit at the bottom of those 1200 pixels
Example with height at wrapper
Another solution would be to use fixed positioning for your footer. That would make the footer stick at the bottom of the window even while it scrolls.
Example with fixed positioning
But really what you should do is redesign the page from the start and to avoid absolute positioning where its not needed.
I have two elements (images)
imgA is 2000px high
imgB is 1000px high
I place them one after the other and then move imgB up (I use relative positioning) to overlap the imgA.
Thus, the window in the browser should be 2000px high.
However, it seems, that when placing imgA and then imgB, the browser allocates the place for both of them i.e. 3000px hig, and after I move imgB up to overlap imgA, I have a blank space =1000px left at the bottom of the page.
How can this blank space be prevented?
Thanks
Ignore this
This is because the images are block level elements. To stop the
browser from allocating space you can just add: display:inline-block
to the second image. This will bring the image out of block structure
and so the browser will not allocate it whitespace.
Also have a look at Relatively Absolute positioning, it is very handy for the sort of thing you are doing.
EDITED
As commented below, this does not work. Use instead the Relatively Absolute positioning.
Here is a jsFiddle that shows the code needed to position an image over another
Use display: block on your images, then use position: absolute instead of position: relative to position imgB over imgA.
Don't forget to assign the parent element to anything other than position: static to make the positioning of your image relative to the parent element.
for further clarification you can see the examples of "css block" here
http://www.tutorialswire.com/css/css-display
Absolute positioning is only a specific solution to your case. It may not work in some similar case (For example if you have other elements on top of those two images inside the general containing div).
I believe best solution would be using
margin-top: -1000px;
for the second image.
Please look at this example http://jsfiddle.net/xcYum/1/
I want to know why is the div tag (with class=progress) the content is broken into two lines instead of just one line (i.e. your progress vs your\nprogress). I should NOT need to specify the width for the 'div class=progress'. can you please give me an explanation that has all the css and/or html element types (or boxing whatever reason) this happens? I just want to know exactly how the rules actually work, rather than memorizing cases it works or doesn't work.
it seems if i change the .container css to the following:
.container {
position: relative;
}
then the div tag (with class=progress) now displays in single line, why is relative and absolute make such difference? or is it because it is nested?
how do we avoid nested absolute positioned div tags?? is it wrong or bad practice to have such structure. i am using it in this example is because i want
'100%' and 'your progress' to be positioned based on 'div class=container' tag, then i can just move the 'div class=container' tag around. in other words, doing this way, i can just move one thing ('div class=container' tag) to make 2 things move (100% and 'your progress'), the other way around is more work. What is wrong with my thought process here?
Because an absolutely positioned element shrink-wraps, in other words, it becomes as small as possible. You can force text to never wrap using white-space: nowrap
Not sure why this happens
You don't need absolute positioning for an elements children to move with the parent
Absolute element establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.
Reference: http://reference.sitepoint.com/css/absolutepositioning
Same as first answer
Absolute element is positioned with respect to its containing block. So, you just need a parent 'div class=container' to have relative position and then all its elements with absolute position will move with it.
Reference: http://reference.sitepoint.com/css/absolutepositioning
I am unsure how to position elements using css, as when I use methods like the following, whenever I resize the browser, the elements stay in the same place instead of where I would like them to be on the resized document. Please can you tell me what I am doing wrong?!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
Please, have a fiddle - http://jsfiddle.net/hHGRc/
Within the (X)HTML DOM, CSS recognizes four types of positioning. By default, every element in HTML is positioned Statically. This means that it is positioned according to the place that it appears in the normal flow.
Relative Positioning
When an object is positioned relative, it means that it modifies the position based on the origin, which is where it would have been positioned in the normal flow (static). Relative also does something else special, however, and tells the browser that all of its children will be positioned according to this element, whether using relative or absolute.
Absolute Positioning
When an object is positioned absolute, it is placed according to the position of its nearest non-static positioned ancestor. If there is not one, then it uses the <body> to determine its position. This has the potential to break document flow, if its siblings or ancestors are not positioned absolute. If all are positioned absolute from the outer most top node to current node, then it will maintain the flow.
Fixed Positioning
This takes the element out of the flow and positions the object according to the Window object. This means that no matter the scroll state of the document, its size or any other property, it will always appear in that location. (This is how you get objects that scroll with you).
Multiple solutions to your issue
First, as described by others, you may add position:relative to the #header. It will, like explained above, make your header the nearest non-static ancestor and will use it and the basis for determining position. This is probably not ideal for you because you are an admitted novice and this one absolute could easily break enough flow that you may struggle with sibling elements.
As an alternative, you may change the logo from position:absolute to position:relative. This will keep your logo in the flow, but move the logo according to where it appears naturally in your document flow. Chances are that unless you are using floats in your #header, this is probably the one you want, as it a) keeps flow, b) allows for use of child element floats without losing flow, c) achieves your ideal positioning, d) keeps inheritance from parent elements (when it is important).
Another choice is to change the #header to position:absolute. This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute. Additionally, you may lose access to ancestor defined widths and heights, as they are only inherited if they are in the same flow. This is the 2nd best situation for you as you can simply add the rule body * { position:absolute; } and all will remain in the flow with you. However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch.
Hope this helps,
FuzzicalLogic
Defining position: absolute in CSS takes the element in question out of the flow of the document.
Think of this as layers: the bottom most layer is the document (though not always, depending on z-index!), and the top most layer is your element which you have defined as absolutely positioned.
By setting position: absolute, you have told the browser that you will be responsible for positioning the element relative to the top left corner of the document (screen). Above, you have told the browser to position #logo 20px from the left and 20px from the top of the document. When you resize your browser viewport, that element will remain in that position.
I think what you want is to position your element within the document flow, without using absolute positioning. This can be achieved with a combination of floats, margins, and padding.
CSS positioning can be tricky to understand correctly, but once you do, you'll find it very useful.
Try this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Basically, to position anything that needs to be locked to a parent or a container element, the parent or container element itself needs to be positioned as well (absolute, or relative, doesn't matter) this is called positioning context. If an absolutely positioned element cannot find a parent or container that is positioning itself, it will then use the `body as the positioning context.
So in your example, if i were to to guess without seeing your HTML and more of your CSS,
adding position:relative to #header would then allow .logo to position itself absolutely from the top left of the #header element.
Also important to remember that absolute positioning takes the element out of the normal flow of the document.
I'm going with a wild guess and saying that your logo is inside the header division, but your header is positioned staticly. Therefore, your logo is not being positioned according to the header, but according to the document's window. So it will be going to a position that is 20px right and 20px down from the top left corner of the document in all instances.
Try setting position: relative on your #header element. This will keep the header in the same place as it would always appear, and the logo will use the header box to find it's left and top positions rather than the browser window.