http://jsfiddle.net/bobbyfrancisjoseph/2EfLz/1/
The following is a code that I wrote. The problem is that in the resulting page the wrapper div does not seems to container the nested divs.
add "overflow: hidden;" to your wrapper's definition.
Since your body elements, #left-container, #right-container, are being floated they are being removed from the regular content flow, so you will need a "clearfix" to properly contain the floated elements. You can do that in two ways:
One, by Using a clearfix, like the following, my preferred approach since its inline and doesn't mess with the absolutely positioned elements that might be overflowed out of the container:
#wrapper:before, #wrapper:after {
content:"";
display:table;
}
#wrapper:after {
clear:both;
}
#wrapper {
*zoom:1; /* ie7 hasLayout fix */
}
Or two by using overflow:hidden on your #wrapper container, a method which i try to avoid since you might have positioned elements that might overflow out of your container with positition:absolute, so they will be cutoff with that method. A third option would be to add a at the end of your container, but that is just an icky approach :).
Demo with the first (and my preferred) approach http://jsfiddle.net/2EfLz/2/
you give overflow:hidden in your #wrapper
#wrapper
{
margin:0 auto;
position:relative;
background-color:#999;
width:960px;
border:dashed #006 thick;
overflow:hidden;
}
http://jsfiddle.net/2EfLz/3/
use overflow:hidden; in wrapper style.
try something like this position: absolute;
#wrapper
{
margin:0 auto;
position: absolute;
background-color:#999;
width:960px;
border:dashed #006 thick;
}
Related
How to get height:auto; for a parent element when child elements use float:left; or float:right?
parent
#parent {
width:100px;
height:auto;
padding-bottom:10px;
background:#0F0;
}
child_left
#child_left {
width:50%;
height:50px;
float:left;
background:#00F;
}
fiddle: http://jsfiddle.net/27EWw/
The default height of an element is auto, but it seems like are you looking for a clearfix. If an element's children are floated, they are essentially taken out of the flow of the document, therefore if the parent doesn't have defined dimensions, it will collapse upon itself. You could add overflow:auto to the parent element:
EXAMPLE HERE
#parent {
width:100px;
overflow:auto;
padding-bottom:10px;
background:#0F0;
}
Alternatively you could also use a clearfix:
EXAMPLE HERE
#parent:after {
clear:both;
display:table;
content:'';
}
You could also have a clearfix class, either options would work. If you wanted to avoid these options, you would simply have to set dimensions on the parent element in the first place. Obviously, this isn't always the best option as some elements will have children with varying dimensions.
I'm certain this has been asked before in some form or other, but I just can't find an answer..
I have some nested divs
<div class="parent">
<div class="child">A</div>
</div>
And the child has display:inline-block and overflow:hidden
.parent{
background-color:red;
}
.child{
background-color:green;
display:inline-block;
overflow:hidden;
}
And it gets rendered like this:
You can notice that the parent is 5px higher than the child.
Where does the extra height come from?
Here is the sample: http://jsfiddle.net/w8dfU/
Edit:
I don't want to remove display:inline-block or overflow:hidden, this is a simplified example to illustrate the problem, but in my real layout I need them both.
I just want to understand why this extra height appears. Is it specified somewhere that it should be like this? Is it a consequence of some other css feature?
I had this issue when building a horizontal slider. I fixed it with vertical-align:top on my inline-block elements.
ul {
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
ul&::-webkit-scrollbar {
display: none;
}
li {
display: inline-block;
vertical-align: top;
width: 75px;
padding-right: 20px;
margin:20px 0 0 0;
}
The accepted answer above is correct, but it does not give the explanation I was looking for.
A good explanation was provided by #Alohci in his comment.
Explanation in a few words:
The value for vertical-align is baseline, therefore the child div is aligned with the baseline of the text.
This text baseline is not the same as the bottom line. It's a bit higher up, to accommodate letters with descenders: p, q, g.
This is why the problem is fixed by setting vertical-align:top.
.child{
background-color:green;
display:inline-block;
overflow:hidden;
vertical-align: top;
}
This extra space coming from overflow:hidden of Child class. Remove this property and check and if your really wanted to use overflow:hidden property then use negative margin to child class . You can remove this extra space.
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
You can see the fiddle here: http://jsfiddle.net/easeS/4/
Here is the html/css I have:
#main div
{
float:left;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
}
<div id="main">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
I'm not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?
The 3rd div bumps down because there's not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.
If I understood your question correctly...
What you want to do is hide it the 3rd div, for you to do this, you'd need to:
Add another wrapper div and give it a bigger width. Have a look at my example here
No need to add extra wrapping divs...
Try this instead:
#main div
{
display:inline;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
white-space: nowrap;
}
Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.
Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.
Try with this demo.