I have a div element that is defined on the top of the page and I have this another div element that is defined at the bottom of the page.... is there any way that I can define the first div element (at the top) as a child of the div element that is at the bottom.
The problem is I need a div in header in the header file (header.php) this div acts as a container for an JS, but once the data is loaded I want it to be displayed inside another div.
Would postponing the loading of JS till the middle section of page is advisable...
Yes: make the top div a child of the bottom div by placing the child within the markup of the parent, and use absolute positioning to move the child to the top.
No, because it's not a child of that DIV. If you want it to be a child, make it a child, and then alter it's position with CSS to be on the top of the page.
No, though you can move it with JavaScript after the second element loads.
By "child" do you mean simply appears inside, yet the HTML is defined at the top? If so, you could also possibly simply change the positioning via CSS.
Are you constrained to output the HTML for the first div at the top of the page for any reason? The real solution here is to simply output elements where you actually want them.
No idea why you would want to do that but this markup should suffice:
<div id="wrap">
<div id="main">
<!-- Insert content, push off the top with "margin-top:150px", etc. -->
</div>
<div id="foot">
<div id="head">
<!-- Insert header stuff, position with "positon:absolute", etc. -->
</div>
</div>
</div>
Tweak width, height, margin and padding of elements to taste.
Related
I have trouble to add properties like position, margins etc to <div> element which is part of another <div> that have style that I want to keep.
Here is the link to screenshot of web page
I have problems with this gray transparent area, it is formatted to have re-sizable height, depend on elements in it and when I add positioning of another div ("customProperties") in CSS, original CSS is not applying (on screenshot you can see element above and belove the bottom line of gray area).
Here is the code:
<div id="wrap">
(...)
<div id="customProperties">
<ul>el1</ul>
<ul>el2</ul>
</div>
</div>
I'm sorry if there is similar question, but I just can't find solution...
You've applied position:absolute for #customProperties which takes the element out of normal flow. Hence it's parents size won't grow automatically.
side note:
<ul>el1</ul>
<ul>el2</ul>
is not semantically correct, it should be
<ul>
<li>el1</li>
</ul>
<ul>
<li>el2</li>
</ul>
I'm in the process of setting up a proxy site and I'm trying to add a small header to the top of each page (about 40px, just enough for a text box to allow the user to change the website they are browsing through the proxy). Unfortunately everything I've tried so far places the header on top of the existing page covering the top part of the page. I'm trying to figure out a way to place the header above the page, moving all the contents of the page down 40px. Any help is highly appreciated.
Thanks.
P.S. I figured out that the content that seems to be causing the most issues is content that is absolutely positioned to the top of the page.
<br clear="all" />
Place that underneath the new div and above all the content you want the site topbar to sit above
This should show a header of 40 px in your page:
<div style="height:40px;width:100%;display:block">My small header</div>
without seeing the HTML, we're flying blind, but based on your description, I think you've got a site where direct children of the body element are absolutely positioned at the top. The solutions I would pursue involves a wrapping those direct children in a relatively positioned div (or section) and then just insert your new content above that div.
Your structure should go from
<body>
<div>this is absolutely positioned</div>
</body>
to
<body>
<div>this is your new header</div>
<div class="relatively position wrapped">
<div>this is absolutely positioned</div>
</div>
</body>
This will allow your new content to affect the positioning of the stuff that comes after.
The problem you're looking at is based on the fact that absolutely positioned elements have no place in the document flow, so for best control, you place them in a relatively positioned element that does effect the document flow, and is effected by surrounding elements.
If all of the offending elements are positioned at the top, you could just give each of the a style attribute like style="top: 40px" (better yet, do that in the css).
If you want to wrap the offending elements but don't want to mess with the html, you could use jquery:
jQuery(body).innerWrap('<div style="position: relative;"></div>');
jQuery(body).prepend('<div>your new content</div>');
I have following code:
<div>
<div id="dynamic" style="float:left;height:50px;background-color:#aaa;">
floated block which will be dynamically increase
</div>
<div id="static" style="height:50px;background-color:#FC3;">
Hello guys
</div>
</div>
I want to move static div as dynamic div width changes. Above code works as I want but I don't know whether the above way is the right to do that?
Is floated div inside inline text the right way? Is that cross-browser?
Will this code affect anything else, like the content below it or moving below static div?
And why does floated div not move below inline content, rather aligns it with inline text?
You can use float:left for the <div id="static"> too. I don't see any issues until your dynamic div width + static div width reach the window width.
This >> http://jsfiddle.net/gxpBL/ is what I'm telling.
I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I have an element nested inside another element (i.e. parent element). The thing is, I want to make the child element wider than the parent element — as I am unable to find the PHP code that I need to move it outside its current parent element.
This is how the page looks (click image to enlarge):
THE PLOT: You are seeing two content blocks in the page — <div id="Content">...</div> is one block floating left and <div id="Panel">...</div> is another that's floating right.
See the blue color block of text? It's the title of a discussion thread in my forum and is represented by <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> in the code. As shown by the arrows, I would like to extend it to full width of the page using css width:980px;.
The thing is, <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> is a child element whose parent element is <div id="Content">...</div>. The width of the parent element is 700px, but I need the width of the child element to be 980px.
So what I am doing is this:
set the child element's width to 980px. (width:980px;)
Now the child element overflows the parent element and on top of the the right-floating block as well. (i.e., <div id="Panel">...</div>)
So, I gave the right-floating block some margin-top so that it comes out from hiding below the extended element.
The following image represents just that (click image to enlarge):
So my question is — is what I am doing okay or is it a bad thing to do? Is this cross-browser compatible? (i.e., does it appear the same across all browsers?)
Hope someone can clarify on this. Thanks.
Just move the heading outside of <div class="Content">.
<div class="Tabs HeadingTabs DiscussionTabs FirstPage">
</div>
<div class="Content">
...
</div>
Don't use JavaScript just for this, that would be a mistake.
I also feel compelled to mention that I don't think that heading should be full width anyway, it doesn't represent a heading for the sidepanel, it's for the thread (which is only in the left column).
I wouldn't. As a general rule of thumb, I keep the parents bigger than the children. See this and this. I'm sure you would see differences from browser to browser if you implement this using HTML and CSS.
Have you thought about using JavaScript to accomplish what you want to do?