I've been having trouble creating parent DIVs that encloses the floating child DIVs.
<div id="parent">
<div class="child1">content</div>
<div class="child2">content</div>
<div class="child3">taller content</div>
</div>
...where #parent would expand vertically (with padding if it was styled that way) to accomodate .child3. And If I added a border around #parent it would enclose all three child DIVs.
What's the best way to style this arrangement to ensure this behavior?
Looking for the best practice.
You can add a "wrapper" div inside the parent, and a "clear: both" element in there as well. Check this jsFiddle http://jsfiddle.net/yvVP8/
<div id="parent">
<div id="wrapper">
<div class="child1">content</div>
<div class="child2">content</div>
<div class="child3">taller content lala lala lalal lala</div>
</div>
<div class="clear"></div>
</div>
And the css:
#parent {
border: 1px solid #000;
width: 300px;
}
#wrapper .child1, #wrapper .child2, #wrapper .child3 {
float: left;
padding: 5px;
width: 90px;
}
div.clear {
clear: both;
}
A simple
#parent {
overflow:hidden;
}
will do the job :
http://jsfiddle.net/XAbhY/
You can simply add float:left; to the parent div.
It should force the parent's size/border to wrap all siblings. Not sure if it's valid, but works for me.
Related
I have the classic problem where my outer div does not have any height, due to its children all being floated. I'm wondering if there is an easy fix (sans Javascript) so that I can preserve the behavior of the floated children while at the same getting the outer div to have height (so that the inner divs have a border around them).
Here's a fiddle that outlines the problem: http://jsfiddle.net/2fn73ck1/
CSS
#outer-div
{
border: 1px solid red;
}
div.inner
{
float: left;
width: 30%;
border: 1px solid blue;
}
HTML
<div id="outer-div">
<div class="inner">
<p>Here's some content</p>
</div>
<div class="inner">
<p>Here's some more content</p>
</div>
<div class="inner">
<p>Here's even more content</p>
</div>
</div>
Or you can simply:
#outer-div {
display: inline-block;
}
Demo: http://jsfiddle.net/xp10xdq0/1/
OR
#outer-div {
overflow: auto;
}
Demo: http://jsfiddle.net/xp10xdq0/
Your have the classic parent collapse problem and you can do further reading here:
http://css-tricks.com/all-about-floats/ (Read on The Great Collapse)
#outer-div:after { content: " ";
display: block;
clear: both;}
Parent Div height doesn`t get adjusted to floated childs.
Hence, simplest fix would be to add :after with no content and clear the float.
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
HTML
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
</div>
CSS
.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }
I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?
EDIT: my wrapper is set to relative, sorry - forgot to add that. For further clarification, here are some crappy diagrams:
EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well... Thanks everyone!
You just need to clear your float.
Add another empty div like:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both; }
Float the wrapper (add float: left to the css for .wrapper), or put <BR style="clear: both;"> after the floated image.
Put the absolute div outside the wrapper, rather than inside it.
But why are you doing position absolute? I bet you don't need to do that, and if you gave more info on what you are trying to do there might be an alternative.
Position absolute will position it absolutely to the body unless its parent has a position other than static. If you want it positioned absolutely to the parent (.wrapper), you need to give .wrapper a position such as position:relative;
Then, add a div to clear your floats:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="clear"></div>
<div class="outside"></div>
</div>
CSS:
.wrapper {
background-color:red;
width: 200px;
margin: 0 auto;
position:relative;
}
.clear {
clear:both;
}
.image {
float: left;
}
.outside {
background-color:yellow;
position: absolute;
top: 0;
left: -20px;
width:100px;
height:20px;
}
Demo: http://jsfiddle.net/AlienWebguy/6Fmy2/
Resolved by adding an additional wrapper with overflow: auto around .image and .copy.
I have a very simple html code:
<body>
<div id="container">
<div id="left">
some text here
</div>
<div id="right">
and some text here
</div>
</div>
</body>
and styles:
div#left {
float: left;
background: #e2e2e2;
}
div#right {
float: right;
background: #1469ab;
}
I want to have the height of div #container equal to heights of it's content, but now it actually 0. How to implement this behavior?
you should apply a non-structural clearing to the container
like easyclearing http://www.positioniseverything.net/easyclearing.html
otherwise you can also specify height: auto; overflow: hidden to the container
add overflow:auto to your #container
I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
Taken from display declaration:
display: inline means that the element
is displayed inline, inside the
current block on the same line. Only
when it's between two blocks does the
element form an 'anonymous block',
that however has the smallest possible
width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
display:inline shrink wraps the content. You might want to try float:left instead.
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
This is why Rory used width:33%; as that is the best you are ever going to get :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
Example:
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
Here is the code working exactly how you'd like, and a link to the fiddle!
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
https://jsfiddle.net/stopitdan/uz1zLvhx/