I'm trying to figure on how use to :after and :before CSS properly and will be applying the styles to this:
The objective here is to fit the fixed width and height of box inside of the parent box (not sure if I said that correctly).
The box inside is going past or overflowing.
How do I set the parent box to adjust no matter how big the child box is? The child box I'm mentioning here is the dark grey box.
<div class="connections-label">
<div class="connections-avatar"></div>
<h3>Christian Blanquera</h3>
<h4>Invested over 5 million cookies in 20 startups</h4>
</div>
.connections-label a
{
color:#1c89cc;
text-decoration:none
}
.connections-label h4
{
color:#686868;
font-style:italic;
}
.connections-avatar
{
width:50px;
height:50px;
float:left;
background-color:grey;
margin-right:10px
}
.connections-label:after
{
content:"";
}
You're looking for a CSS clearfix solution. Basically, floated elements are removed from the normal flow of the document, and must be contained. The simplest clearfix is to apply overflow: hidden; to the element containing the floated element:
.connections-label {
overflow: hidden; }
This is usually sufficient for most float containment scenarios. However, positioned elements and overflowing content will also be clipped by this CSS. A more complex clearfix will contain floated elements without hiding positioned elements is documented at the article above:
.connections-label:before,
.connections-label:after {
content: '';
display: table; }
.connections-label:after {
clear: both; }
/* IE6/7 support */
.connections-label {
display: inline-block; }
.connections-label {
display: block; }
Also, another trick I learned recently is that applying overflow: hidden; to an element on the left or right of a floated element keeps that element from wrapping below the floated element. It's easier to see than describe, so check out my jsFiddle demo.
Related
I have a container div with the following attributes:
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
}
Inside there are multiple left floating div's. The problem is that they don't force the containing div to expand downwards, instead just overlapping and continuing outside the container div's boundary.
Left floating div's:
.cat_wrap{
border: 1px solid #000;
width:100px;
min-height:120px;
margin:0 10px 5px 0;
padding:0;
float:left;
}
If I take the left float out, the containing div does expand vertically as it should do. So how do I get the inner divs to float left but also expand the container div vertically?
you need to set overflow for the main div. overflow: auto; this will force the div container to expand and adapt to the content.
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
overflow: auto;
height: auto !important;
}
This is a common problem and is fixed using a "clearfix" solution. Setting overflow will fix this problem, however there are better solutions, like the following:
.mydiv:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .mydiv { zoom: 1; } /* IE6 */
*:first-child+html .mydiv { zoom: 1; } /* IE7 */
The main point of this solution is to trigger thehasLayoutproperty of the div. Fortunately it is enough for IE 6/7 to set the zoom to 1 in order to trigger that. Modern browsers which support the:afterpseudo element can use the first statement, which is cleaner and does not affect the overflow property.
Please note that you should avoid using the!importantstatement as suggested in the earlier answer as that is not good css. Moreover it will not allow you to control the height of the div if you wish to and does not do anything to solve the problem.
It's 2016. A good way of doing this is using flex property.
.container {
display: flex;
flex-wrap: wrap;
}
Then the child element can get rid of the old magical float property.
Check out this JSFiddle to see the effect.
Note: when the heights of children elements are not uniform, the flex way will behave differently with the float way. But it is hard to tell which one is correct.
container{
overflow: auto;
}
Insert the following at the end, before the enclosing the container
<div style="clear:both"></div>
The container will automatically expand to the the last clear:both
Why is float:left CSS property breaking styling?
<div id="application_header">
<div>logo</div>
<div><h5>tagline</h5></div>
</div>
#application_header > div is preventing #application_header background property from being applied because of: float:left?
.clear { clear:both; }
.push { clear: both; height: 20px;}
#application_header { display:block; background-color: #000; }
#application_header > div { float: left; }
#application_header only accepts background-color: #000; property if float:left is removed... Explanation please...?
div#application_header has no height because the elements contained within it are floated.
I made a fiddle that demonstrates adding a height to the div:
div#application_header {
height: 100px;
display:block;
background-color: #000;
color: #fff
}
http://jsfiddle.net/YGkw7/
Rather than floating your elements you could set them to inline-block
http://jsfiddle.net/YGkw7/2/
The reason your background color is not showing up, is because the #application_header collapses to zero height and width as it only contains floating child elements. You'll want to look into a clear fix solution to have your parent div wrap around the floating child elements.
You can find more info on clear fix solutions at What methods of ‘clearfix’ can I use?
The content of hr tag flow around floating elements as if it is inline elements (even if it is actually blocks). That's what I need but unfortunately hr can't have child elements except two pseudo elements.
Take a look on this demo on JsFiddle: http://jsfiddle.net/P3KEZ/
<div id="right"></div>
<div class="divider"></div>
<hr class="divider" />
#right{
background: #ffaaaa;
width: 200px;
height: 300px;
float: right
}
.divider {
background: #4d9d4d;
height: 20px;
border: none;
position: relative;
}
.divider:after, .divider:before {
content: " ";
width: 20%;
height: 100%;
display: inline-block;
position: absolute;
background: #a2a2f2;
top: 0;
}
divider:before {
left: 0;
}
.divider:after {
right: 0;
}
What I actually want is to get element with content flow around the floating elements (like hr do) but also can have at least 3 child elements (like div can do).
So question is: how to emulate such behaviour in div? (without display: flex)
What I actually want is to get element with content flow around the floating elements (like hr do) but also can have at least 3 child elements (like div can do).
So question is: how to emulate such behaviour in div?
You want to harvest the power of the mighty overflow property … (*thunderclap*)
.divider {
/* … */
overflow:hidden;
}
Normally, a block element is layed out behind a floating element, only its inline content floats next to the floated element – but with overflow:hidden you can change that, so that a block element like div only takes the space that is left beside the floating element. (It does not actually have to be hidden – everything besides the default value visible will trigger this behavior, so you can use auto or scroll as well if those suit your actual use-case better.)
See here: http://jsfiddle.net/P3KEZ/1/
I am currently creating a general responsive template for myself , as I have not really touched this side of design as of yet.
I am having a issue with my "Content Div" when resizing to about 600px (A red border will appear when the resolution is right as to where the problem is). My content div will no longer expand even though I have set a static height of 2300px , so the content just floats outside and the content div does not expand.
#media only screen
and (max-width : 603px) {
/* Styles */
#column_wrapper img {margin-left:25.33%;padding-right: 20%;}
#column1_content{height:500px;}
#column2_content{height:500px;}
#column3_content{height:500px;}
#column_wrapper{border:1px solid red;height:300px;float: left;}
#content{height:2300px;margin-top: 100px;margin-bottom: 20%;}
}
The site can be found at Responsive Template
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
You do not need to give height instead for div#content use clearfix. This will fix it ;)
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
don't use static height in div#content use only overflow:hidden; and remove too the static height in #column1_content, #column2_content and #column3_content
relevant: http://www.quirksmode.org/css/clearing.html
It's because the elements inside are floated. When you float an element, it takes that element out of the content flow. This means that those elements aren't going to push out the div and expand it with the content.
I am fairly new html developer, i am using bunch of divs in my page.
Issue is some of div items are not within div although they are defined within div tag.
What am i missing here to understand? How to make sure that all items within div will get rendered within div?
No code? Time to get the crystal ball out then…
You are either absolutely positioning them (which takes them out of normal flow) or floating them, which stops them from influencing the height of the container. There are a number of ways to force containers to wrap floating content.
It looks like you have a container that has a child that floats, that is why the parent div collapses.
<div id="parent" title="this collapses">
<div style="float:left" title="child div"></div>
</div>
I think your problem is that the parent collapses.
The solution would be one of the following
float that parent div (where possible).
add a style overflow:hidden or auto to the parent div.
add a class of clearFix* to the parent div(see below).
set a height (where possible).
*clearfix:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}