I have two stacked divs contains child elements and what i want is if I set visibility to hidden to the first div it should disppear and second div under the first one should take the place of first div by maintaining the position of child elements inside the second div.
here is the code.
<div id="wrapper">
<div id="first" style="top:10px; width:400px; border-style:solid;border-width:1px;">
A quick brown fox jumps over the lazy dog..................
</div>
<div id="second" style="top:100px;width:400px; border-style:solid; border-width:1px;">
<div id="child1" style="margin-left:250px">
21st, October 2011
</div>
</div>
<div>
Use display:none instead of visibility:hidden
The CSS visibility: hidden; will only hide the element, it will still reserve space for it in the document flow.
What you want is display: none; which will remove the element entirely.
Example coded here. (click the #second div to activate.
If you do something like this:
<div id="wrapper" style="width:400px;">
<div id="first" style="display:none;top:10px; border-style:solid;border-width:1px;">
A quick brown fox jumps over the lazy dog..................
</div>
<div id="second" style="border-style:solid; border-width:1px;">
<div id="child1" style="margin-left:250px">
21st, October 2011
</div>
</div>
</div>
putting the wrapper around both objects, then the second div will jump up to the first div's position if the first div is hidden.
Related
This is the code:
http://jsfiddle.net/noamway/r8vMp/8/
<div id="website" style="width:100%;">
<div id="layoutAll" style="width:200px;margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
Hello world
</div>
</div>
</div>
</div>
And I like that "full_strip" will be 100% from all the page width.
Because of the relative of is parent I can't do that.
I can't remove any setting from the is parents so I need a commend or something else on him that will tell him to ignore is relative parent.
Thanks,
Noam
Remove width:200px for div with id #layout. Important thing is dont use same id for two elements. Duplicate id's are dangerous.
CODE:
<div id="website" style="width:100%;">
<div id="layout" style="margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
Hello world
</div>
</div>
</div>
</div>
DEMO FIDDLE
You basically ask for relating an absolute position Div which is dynamically generated inside a relative position Div to the body instead of to its relative parent Div.
Position relative and absolute are always related to the first root parent element that has a absolute or relative position. This why it is impossible to do what you ask for.
The only solution for you its to place the “full_strip” Div outside of its position relative parent element and into body tag.
To build on Unknown's answer, if you want the text to remain centered you can add text-align: center; to the deepest nested div.
The Code:
<div id="website" style="width:100%;">
<div id="layoutAll" style="margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-
color:black;color:white;height:100px;position:absolute;left:0; text-align:
center;">
Hello world
</div>
</div>
</div>
</div>
JSfiddle
What is the correct way to make the total area of a div a link?
I have multiple div's that are small tiles and I want the total area of the div to be a link.
Should the Anchor tag wrap a span on the inside or what is the best way to do this?
<div class="l-box">
<h3>Service 1</h3>
<p>Service description</p>
</div>
<div class="l-box">
<h3>Service 2</h3>
<p>Service description<</p>
</div>
Wrap your div with and give display: block; to a
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
I want to use span inside div
div is used to put a red horizontal line
<div style="background-color:red;">
</div>
span is used inside div to put elements to right
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>
But the horizontal line do not get red color, only ABC is shown in right, infact there is no effect of div style like width:900px......why?
I'd suggest:
<div style="background-color:red; text-align:right;">ABC</div>
Otherwise, you need to add overflow:auto to your div's style definition if you do want to leverage the <span> as in your original example.
Cheers
Add overflow:auto to the div:
<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>
jsFiddle example
Floating the inner span causes the div to essentially collapse, and adding the overflow rule allows it to regain the span.
The float is not giving your div any height. You need to follow it up with a clear. Try this:
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
<div style="clear: both;"></div>
</div>
You need to add the property overflow:hidden; in your DIV.
Below I mentioned the Code:
<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>
Say I have this html code:
<html>
<body>
<div id="Div1" style="position:relative">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
</body>
</html>
What should I do to make Div2 always below Div1 regardless of the content of Div1? Because the span uses position:absolute in Div1, the content of Div2 appears above the content of Div1.
The reason div2 displays above div1 is because div2 is absolutely positioned. That means that div1 doesn't participate in the normal document flow, as if it was pulled out of the document. So, div2 shows up at the top, then your absolute positioning pushes div1 down to 100px.
Take the absolute positioning off of div1, then use margins or padding to move it down to the desired location. That way, the normal html rendering will place div2 below div1.
If you're forced to absolutely position div1, then you need to absolutely position div2 as well. You may need to use javascript to figure out the height of div1 and set the top of div2 appropriately.
<html>
<body>
<div id="Div1" style="position:absolute; top: 100px;">
<span>My text</span>
</div>
<div id="Div2" style="position:absolute; top: 130px;">
Test
</div>
</body>
</html>
Why not do this ?
<div id="Div1" style="margin-top:100px">
<span>My text</span>
</div>
<div id="Div2">
Test
</div>
I don't quite get why you are doing it that way. Could you explain a bit more what you're trying to do? I'm sure there's a better way
Others have answered this question correctly about position:relative vs. position:absolute and page flow in the container div.
Just to add to the answer. I found the following tutorial really helpful when I was learning about positioning in CSS.
Learn CSS Positioning in Ten Steps
Jeff: div is as standard block elements, so that wont make any difference.
You could try:
<div id="Div1" style="position:relative; display:inline-block">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
do you want div2 below div1 or at the very bottom of the page? if you want it below div1 then add
clear:both;
to div2.
if you want it fixed to the bottom of the page then use a fixed position property on the div2
Maybe something like this?
<html>
<body>
<div id="Div1" style="position:relative">
<div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>
</div>
</body>
</html>
use display:block; on those divs