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.
Related
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.
I've read almost every article on this forum about divs and growing height with its content. I don't understand what I'm doing wrong and can't figure it out. Probably it's an easy thing, but I just don't see it any more.
I tried the following CSS but can't get it working:
clear:both;
float: left;
overflow: auto;
overflow: hidden;
none of this all has the desired output.
I posted my code on jsfiddle: http://jsfiddle.net/eAVy3/
You will see that my footer (in red) is at the top in stead of on the bottom. The only way tho get something that looks like it is to give the id page_container a height. But that will be a fixed height and doesn't grow with the content. What to do to get this right?
Working fiddle here: http://jsfiddle.net/eAVy3/3/
Absolute positioning (absolute positioning takes the div out of the normal flow of the document, which means it can't effect other things on the page like the footer)..
You need to float your divs instead:
#kolom_links {
float: left;
margin-left: 100px;
}
#kolom_rechts {
float: left;
margin-left: 70px;
}
Now because both divs inside #page_container are floating, you need use clearfix css:
Add class clearfix: <div id="page_container" class="clearfix">
Then add this clearfix to your CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You should reconsider making the position absolute;
making the position absolute is puttinf the element out of flow so they don't occupy any height or width of the document.
change to posiion : relative ; and you will start to figure it out
Update 2
try this :
#kolom_links {
width: 400px;
height: auto;
padding-left: 10px;
}
It's a simple CSS issue: a container doesn't wrap around floated contents by default. The easiest way to make it do so it with,
.div_container {
overflow: hidden;
}
I've got a little div that contains a next/previous button and a Page # out of #. Trouble is, it only shows up in Firefox, not Chrome. It uses Foundation 4's button code and Jekyll's paginator code to create the setup.
You can see it at the bottom right of the page, just above the footer at tx0rx0.com
Chromium on my laptop shows nothing, but the code is there in the page source viewer. What gives?
The .pagination div's container has floated elements but is not cleared.
Since the container is the last element inside #wrap, it is affected by this class which cuts off the floated .pagination :
#wrap > *:last-child {
padding-bottom: 6.25em;
}
You can fix this by changing the padding-bottom to margin-bottom, or apply a clear-fix to the div containing the floated .pagination element.
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
You have this going on:
#wrap {
margin: 0 auto -6.25em;
}
And the bottom margin of that container is set to -6.25em. You also have this going on:
#wrap > *:last-child {
padding-bottom: 6.25em;
}
Which is effectively selecting the last child div of #wrap to have a padding-bottom of 6.25em. The intention here looks to be that those two would cancel each other out; that is not what's happening though, because the styles are applied to different block elements that are in the normal document flow. So your pager is hidden because of a negative margin.
I'm not sure what your intention is here. The simple fix, unless there's some reason this can't be done, is:
#wrap {
margin: 0 auto;
}
And wipe out this:
#wrap > *:last-child {
padding-bottom: 6.25em;
}
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 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%;
}