How to (top) align 3 div that should be relative to a previous div (but not between them)?
I can't use floats or position:inline-block (if you set display:none on 2 divs the last one shouldn't move).
position:absolute neither because there's a relative footer underneath.
vertical-align:top doesn't work using spans - any workaround?
I tried using a wrapper but it can't work cause the height of the divs is not fixed.
The height of the wrapper gets completely ignored anyway (by the following footer) unless Im using relative children.
Any ideas?
HTML
the order is important and the wrapper is optional (to position the side divs)
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
<div id="footer"></div>
CSS
#left {float:left}
#middle {margin:0 auto}
#right {float:right}
#footer {clear:both}
unless someone comes up with something easier
ill accept my answer in 24h
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I'm having a little issue with couple of DIVs.
I need two DIVs to be positioned in exactly same place, and toggle them. As one div disappear, another should appear. This I will do using jQuery toggle().
The issue is that both DIVs should be part of the page flow and positioned exactly the same way. How I would achieve that?
So, there is some previous div, that occupies some place, has relative positioning and non-fixed sizes (dependent on window measures)
<div class="header">
... </div>
Then my div
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; ">
... </div>
and other my DIV
<div id="aboutDiv" >
This is ABOUT
</div>
Two later divs should occupy the same place. What positioning tags I could use?
The design adjusts to the window size due to flexible element -- very first DIV "header", so no absolute positioning is possible.
just put them one after another
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; "> ... </div>
<div id="aboutDiv" >
This is ABOUT
</div>
both should be positioned relative , when one is hidden then other will move up and they will be in the same place - as long as you are using toggle to always have one hidden and one shown
You either need a relatively positioned parent container with absolutely positioned children, or hide one and show the other when its faded out completely
I have position:fixed <div> that appears in the middle of the screen. When there are messages, a second position:fixed <div> is put next to the first <div>.
I'm finding on different screen sizes (say a netbook - small screen) the <div>'s sit on top of each other.
Is there a way to lock their position to each other? I tried using a fixed container to hold both of them, but they still moved.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
EDIT:
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS - container1 and container2 still move when I change the screen size.
#wrapper {
position: fixed
}
#container1 {
position: fixed
}
#container2 {
position: fixed
}
do I need to use relative positioning on the container 1/2 divs?
Most importantly, id is unique. You cannot use id="container" on three different elements. Each must have their own id.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
Should be something like this...
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
Also, where is your CSS code?
If you don't want these things to push each other around as the window size changes, one method would be to specify the exact size and position of each container.
EDIT:
Again, without seeing an example of this page, a demo, or a better description of what you want, this is speculation.
You could put fixed position on the wrapper and then put an exact size and position on the <div>'s within.
The position: fixed CSS rule "fixes" the element's position on the screen. Once you set it to fixed, it will never move from the position you put it in. Since you're applying fixed to all of your elements, you're seeing the elements stack (likely in the top-left of your screen considering you're not providing a top or left value).
If you want the child elements to appear inside your fixed container, just don't add position: fixed to them and they'll sit inside the parent just fine.
Of course, all of this is pure speculation considering we can't see an example of your problem, nor your desired result.
you cant fix the position of your div like this. first of all you have to find the screen size for your parent div which contains that div u want in middle.like
<div id="parent"> <div id="middle_div"></div> </div>
function getScreenSize()
{
var winW, winH;
winW = document.getElementById('parent').availWidth;
winh = document.getElementById('parent').availHeight;
}
this is how you vil get the size availabel for parent div.Then set the width and height of parent div according to it.now if you have width of parent div its easy to set middle_div in middle of parent div.
how would you approach the design of the following layout without using any tables?
i have tried but cannot get the height of the 3 central div elements to 100% height.
any help would be appreciated. thanks in advance!
One very useful and easy solution I use for three equal height columns is the following: Make a wrapper which is positioned relative and with height:100%. Then all the children are positioned absolute and adding height:100%, will take the whole height of your wrapper. Because positioning them absolute will move it in the top-left side of your screen, you apply margin-left accordingly to move it in the right side of your browser.
html
<div id="wrapper">
<div id="first" class="column"></div>
<div id="second" class="column"></div>
<div id="third" class="column"></div>
</div>
css
body,html,#wrapper,.column {height:100%;}
#wrapper {position:relative;}
.column {position:absolute;border:1px solid black;width:33.3%}
#second {margin-left:33.3%}
#third {margin-left:66.6%}
Demo: http://jsbin.com/igoso4
I have tested the above method in firefox,chrome,safari,ie 7,8+, opera.
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)