I want to implement 3 DIVs inside a container, just like table rows
top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}
Now the question is what is the best approach to have the middle div's height dynamic and keep the structure correct.
Here's what I've done so far: http://jsfiddle.net/pvPSD/4/
HTML
<div id="notification">
<div id="n-top">
top
</div>
<div id="n-middle">
middle<br /><br /><br /><br /><br />middle
</div>
<div id="n-bottom">
bottom
</div>
</div>
CSS
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:absolute;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:absolute;
left:0px;
top:14px;
width:175px;
background: red;
}
#n-bottom {
position:absolute;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
This here worked for me
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:relative;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:relative;
left:0px;
width:175px;
background: red;
}
#n-bottom {
position:relative;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
Remember that absolute postitionning removes the element from then normal flow of the page. The way you had it had all the elements placed in absolute postionning. Therefore, they didn't hold their position within the page. Hence, the following elements were bascially looking to be placed at the top. Having the position relative, the location of the element is preserved on the page, and the next one is looking to be place after.
Hope this makes sense.
Just put top and bottom margin to your middle section, add a wrapper with position:relative and top section and bottom section inside the wrapper, with position:absolute and with height equals your margin.
If the top and bottom <div>s are a static height, then you can set the middle <div> to position 0,0 with height 100% and a margin at the top to match the height of the top <div> and a margin at the bottom to match the height of the bottom <div>.
Well it seems to me (I may have understood what you want wrong.) that getting rid of the positioning elements (absolute, top, left, bottom)for the inner div's from your css keeps it looking correct regardless of how big the middle div is. Is there some other reason why you need absolute positioning on those inner elements?
Related
so here's my problem. I have two divs, and i want to be able to see both of them when i scroll down the page. Both divs are in the same parent container. If i give the parent a position:fixed, the the bottom div get's cut off, because you have to scroll to see it's full height. So i tried this. I gave position:fixed to the top div, and position relative to the bottom one. The fixed one now scrools but the relative doesn't "follow it" or stay beneath it.
Any ideas?
If I understand you correctly, the answer is to position both divs absolutely within the fixed parent.
JSFiddle DEMO
HTML
<div class="parent">
<div class="topDiv"></div>
<div class="bottomDiv"></div>
</div
CSS
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: fixed;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
top:130px;
left:0
}
So here's the problem,
Basically when you resize the window, the size of the relative div is meant to shrink down and the height is meant to shrink aswell, changing the bottom right position of the div. However for the life of me I cannot make the bottom of "absolute" change position in response to resizing the window.
Any help is appreciated! HALP!
<style type="text/css">
.relative{
position:relative;
top:100px;
left:100px;
min-width:250px;
max-width:500px;
height:500px;
background-color:blue;
}
.absolute{
position:absolute;
width:100px;
height:100px;
background-color:red;
bottom:10%;
right:10%;
vertical-align: baseline;
}
</style>
</head>
<body>
<div class="relative">
relative
<div class="absolute">absolute</div>
</div>
</body>
From what I understand, when resizing the window the blue div (relative) will change in size depending on if you shrink or expand the window. When the blue div size changes you want to keep the red div (absolute) in the bottom right position. Is this correct?
If so you need to make the blue div width 100% and it's parents width's 100% all the way up until you hit the html element.
body,
html {
height: 100%;
}
.relative{
position:relative;
top:100px;
left:100px;
min-width:250px;
max-width:500px;
max-height: 500px;
height: 100%;
background-color:blue;
}
.absolute{
position:absolute;
width:100px;
height:100px;
background-color:red;
bottom:10%;
right:10%;
}
JSFiddle
Note: On the fiddle, move the result section bar (the bar that splits the css and the results) up and down to see the effect.
You have a fixed size height:500px; for the parent element.
This means Width is being changed on resize but height doesn't.
You should input for example:
min-height:250px;
max-height:500px;
Here is the Fiddle showing the result:
http://jsfiddle.net/324e2/
I made this fiddle, I am expecting the red div to be positioned directly below the yellow one. They are not. How can I position both the div up and down relative to wrapper?
Guessing it should be simple, but I can't get it to work. I think I need to use relative. The 'bars' are time lines and 'float around' freely.
HTML:
<div class="wrapper" style="background:blue">
<div class="up" style="background:yellow"/>
<div class="down" style="background:red"/>
</div>
CSS:
.wrapper {
width:50px;
height:400px;
background:blue;
margin:1em;
}
.up {
position:relative;
top:100px; /*I want this one 100px from the top of .wrapper*/
height:100px;
}
.down {
position:relative;
top:200px; /*I want this one 200px from the top of .wrapper*/
height:50px;
}
position:relative relates to the previous div.
Div .up has height 100px, so to place .down directly below .up, .down should contain top:100px. Therefore, top:200px on .down will place it 200px below .up, which is not what you want as .up only has height 100px. Solve it by changing top attribute of .down to top:100px
If you want to position it relative to wraper, use position:absolute.
Demo: http://jsfiddle.net/6wSAJ/274
you dont need to set top:xx; if you want just to stack yellow and red
modify your html to be in format '<div></div>' rather than '<div />'
I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.
<div class="content-wraper">
<div class="side-nav"></div>
</div>
<div class="footer"></div>
.content-wraper {
background-color:blue;
min-height:100px;
position:relative;
width:500px;
}
.side-nav {
background-color:red;
height:3000px;
position:absolute;
top:0px;
left:0px;
width:200px;
}
.footer {
background-color:black;
position:absolute;
bottom:0px;
width:200px;
height:50px;
}
Change position: absolute; in .footer to position: fixed;
Updated fiddle
UPDATE
To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:
$(".footer").css("top", $(".side-nav").height());
Example Fiddle
absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.
Try different approach:
sticky footer
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post