I have a problem with positioning divs on my page, I don't want to use top:50px; because I want to have comments in there as well so here comes my question is there any other way to position divs apart from "top" such as display:block in list styles?
thank you so much for any help!
Divs will appear naturally in the DOM flow. They will take up 100% of the width of their parent container by default and will base their height from the non-floated content within them. Use margins to space them out accordingly. By default they have position:static. If you want list styles, use <li> which are display:list-item and not display:block.
Example:
HTML:
<div class="comments"> Some really long comments </div>
<div class="foo"> Something that should appear below the comments </div>
CSS:
.foo {
margin-top : 50px;
}
Related
I'm writing down a website using HTML and CSS3 and I have encountered some problems putting div's into each other and using the absolute position. When I add the position:absolute, I can set the div's background color and manipulate the objects within it, but it's been removed from the DOM, which creates some other difficulties for me (like not knowing how to set a footer). My question is how to make so, that all the elements inside my #content div are aligned properly, the height is set automatically and the background-color is the same for all of them?
UPDATE:
fiddle
add a div with clear class upper than footer and style clear: both;
...
<div class="clear"></div>
<div id="footer">
</div>
...
jsFiddle Demo
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
Im having trouble vertical aligning 2 divs inside a 100% height div. I googled but failed solving.
pseudocode:
<div container, fixed height>
<img, dynamic height/>
<div inner, 100% height>
<div><img/></div>
<div><img/></div>
</div>
</div>
The two divs in the inner div, i want them to be in the vertical center of the inner div, but i cant find a way. its not possible to know the height of the inner div, its just set to 100% because of the random height of the image above it. The divs inside the inner div will also have dynamic heights.
2 hours of fiddling around gave no results, so im coming here.
The page where you can see it in action: http://pyntmeg.no/?iframe
You can give the parent DIV.container a position :relative property since it has a fixed height.
The inner div can then have a position:absolute and you set its height to 100% or maybe a little lower. you can use the top property to move it around.
Try:
.item {
position: relative;
top: 10%;
}
You may need to adjust top: 10%;
As long as the parent/grandparent divs have the width to work with it you can apply 'float: left' to the grandchild divs style.
vertical-align is meant for table elements, not regular divs, etc. In order to get vertical-align middle to work, the element needs to be set to display:table-cell and it's parent needs to be set to display:table-row
Be careful with that, though, because it really does change the way the element interacts with it's sibling elements, and it could definitely change how your page is laid out.
The best use of this would be something like this:
<div class="table-row">
<div class="td">lorem ipsum</div>
<div class="td">dolor sit amat</div>
</div>
Css:
.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}
NOTE
This will not work with elements that are floated left/right, and it will change how the border width effects the overall width of the element.
I would only use this with tabular data, much like I would suggest only using a table.
Background
I have the following html code:
<div id="parent">
<div id="child">
I'm the child!
</div>
</div>
I want the parent div to be positioned relative to the bottom of the page as with the css properties position: absolute, bottom: 0px.
This works fine if the child div(s) have no padding or border. However, as showcased in this JSFiddle example, if the child has padding or a border, it expands beyond the bottom of the parent div (notice the rendered page is scrollable and there is additional content from the child div below the bottom of the page).
Question
What's the best way to make sure the parent div fully encompasses the child div vertically? (Correct me if I'm wrong, but this doesn't appear to be a problem with horizontal padding/borders)
My best idea was to add the sum of the padding/border/margin of to the padding to the parent div. Using something like SASS to generate the actual css makes this slightly more palatable, but still seems like a really unclean solution. Is there a better way?
Thanks!
(As a side note, when I made the JSFiddle example I noticed the right border was missing on the child div. Is this just a fluke with JSFiddle or something?)
If you get rid of those display: inline;s it will work like a charm.
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. :)