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.
Related
This is my style.
<style>
.wrapper { margin:0px auto; height:600px; width:600px; position:relative; background:#F2F7FF; padding:20px; overflow:hidden }
.pos-rel { width:90%; background:#FFF; height:400px; position:relative; padding:5%; }
.pos-abs { position:absolute; height:100px; width:200px; position:absolute; background:#89BCFF; border:1px solid #517099; right:-110px; }
</style>
This is my HTML :
<div class="wrapper">
Wrapper
<div class="pos-rel">
Position relative Parent block
<div class="pos-abs">
Position Absoulute child block
</div>
</div>
</div>
JSFIDDLE HERE
Problem is :
The block having position absolute is visible only half. Half block is hidden due to wrapper.
Before you give any solution, i must state that i have to used Overflow:hidden in the parent block.
Actually, you can avoid parent's overflow:hidden, if you remove position:relative from .wrapper. Here is working example
Can you tell me what you want to create
like if you are using overflow: hidden then it will not come.
or else you have to reduce right minus margin from right.
can you make it more clear like why you want this..
If I have two blocks with dynamic widths/heights, is there a way to line them up inside a parent element with a fixed width?
SEE: http://jsfiddle.net/QhEYB/
I want the blue/dynamic div to always resize depending on the size of the red element and to not go underneath the red. In other words, for the blue block to be a square block that sits next to the red one.
.wrap {width:600px; }/*static*/
.something {float:left; background:red; width:200px; height:100px;} /*dynamic width/height*/
.somethingelse { background:blue;} /*dynamic width/height and should always be next to .something*/
Thanks!
With the use of display:table and display:table-cell, you should be able to achieve what you want:
.wrap {width:600px; display:table; }/*static*/
.something {display:table-cell; background:red; width:200px; height:100px;}
.somethingelse { background:blue; display:table-cell;}
http://jsfiddle.net/QhEYB/3/
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;
}
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.
I have a div that is as high as the window and about 4 times as wide (it is stretched horizontally by elements inside it).
And then this other <div> inside it, which is supposed to be as wide width:100% as its parent (it's for a background picture).
However, the child <div> is only as wide as the window and doesn't quite fill up its parent. This happens in all browsers I've tried.
Why is that, and how can I fix it ?
Source :
<style>
.parent
{
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child
{
width:100%;
height:200px;
position:absolute;
bottom:0;
left:0;
background-color:#000;
color:#fff;
}
.stretcher
{
width:10000px;
height:32px;
position:absolute;
}
</style>
<div class="parent">
<div class="child">this should stretch as much as its parent !</div>
<div class="stretcher">this is some content that defines the page's width</div>
</div>
JSFiddle
The .stretcher div will not expand the parent as position: absolute takes the element out of the page flow so its width has no effect on the parent. Child is behaving properly and expanding to the width of the parent. You can see this clearly if you use Firebug or similar.
As for how to fix it, not sure exactly what you're trying to accomplish with the stretcher div and why you don't just give the parent the width. Perhaps you could expand a bit on what you're trying to do with this structure.
Maybe the outside <div> should be positioned relative. The inside <div> can be absolute but you may want to try adding right:0px; as well as left:0px which you already have. I would avoid absolute positioning unless there is no other way to do it.
I'm not sure why the child <div> doesn't fill the parent, but in order for it to work you need to wrap the .stretcher <div> around both the parent and child <div>.
Source:
<style>
.parent {
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child {
width:100%;
height:200px;
position:absolute;
bottom:0;
background-color:#000;
color:#fff;
}
.stretcher {
width:10000px;
height:100%;
position:absolute;
}
<div class="stretcher">
<div class="parent"><p>this is some content that defines the page's width</p>
<div class="child">this should stretch as much as its parent !</div>
</div>
</div>