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%;
}
Related
I have a div container that clears the floats and specifies a margin-top. But the margin-top does not work.
I am trying to set a height: 100% on the prior div in the document flow but that does not work.
See form at https://sportame.net/sandbox/matthew/sandbox/matthew/index.php
I want the "Customer Information" block to have a margin-top.
What am I doing wrong here?
Just give overflow: hidden to #tourInformation. You have uncleared floats:
#tourInformation {
overflow: hidden;
}
And do the same for each section.
Also the right way of doing this should be adding a clearfix class to the headings and making them like:
.clearfix::after {
content: "";
display: block;
clear: both;
}
I have a div and I want to keep an image on the right of it.
The problem is that the div is not expanding to fit the image. I gave the div a background to check that.
This is the jsfiddle http://jsfiddle.net/BJ7YZ/
very simple code
What I have tried
I checked this question
and I tried to do the same. I gave the div .header class a clear class, which is:
.clear{
clear: both;
}
and I gave the div that contains the image, which is .logo_container this fix:
.logo_container:after, .logo_container::before {
clear: both;
}
none of them has worked. I know the problem is because I didn't set a height to the .header, but I need to not set the height.
One way of taking care of this problem is as follows:
.header{
width: 100%;
background-color: red;
position: relative;
overflow: auto;
}
Adding overflow: auto creates a new block formatting context and the floated child elements are confined within the edges of the parent container.
See: http://jsfiddle.net/audetwebdesign/zptjb/
You need to clear the container itself. The easiest way today is to use this lovely, simple, clearfix "hack". See updated fiddle
http://jsfiddle.net/BJ7YZ/2/
and
http://nicolasgallagher.com/micro-clearfix-hack/
.header:before,
.header:after {
content: " ";
display: table;
}
.header:after {
clear: both;
}
Have you tried giving display: inline-block; to your header class? It seems to do the trick. I can see the red background by applying it.
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'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.
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.