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.
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;
}
How do I put the 3 headers under the rounded images. This is the site I am working on.
The issue here is that you are not clearing your floats correctly.
I recommend wrapping all floats in terms of rows e.g.
you have your logo and links on one row so wrap that in a div with a clearfix class.
you then have the three circle images so wrap them in a div with a clearfix class.
you then have your h tags with floats so wrap them in a div with a clearfix class.
the clearfix class should then be added to you css as so.
.clearfix:before, .clearfix:after{
content:'\0020';
display: block;
overflow: hidden;
visibility: hidden;
clear: both;
width: 0;
height: 0;
}
here is a quick fiddle.
http://jsfiddle.net/5JGrb/
Please try this.
.containerDiv div{
float:left;
margin: 10px;
}
.containerDiv div h3{
text-align: center;
}
Fiddle
Appreciate your time.
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 have a small issue with my div boxes that I can’t seem to resolve.
I’m dynamically creating these div boxes:
<div id="pagelist">
<div class="pagelist_img"><img src="images/default.gif"></div>
<div class="pagelist_h1">HEADLINE</a></div>
div class="pagelist_excerpt">SUMMARY</div>
</div>
Each div box consists as shown of an image on the top, then the headline and a short summary of the post. Now, my problem is that the boxes overlap each other but just enough so the summary part is hidden beneath the image of the div box below it.
Okay, it might be a bit confusing but the point of the line is, that somehow the boxes isn’t separated but are overlapping each other.
My CSS for the pagelist div box is:
#pagelist{
float: left;
width: 280px;
margin: 0 40px 20px 0;
position: relative;
height: 100px;
}
.pagelist_h1 {
font-size: 1.8em;
font-weight: bold;
}
.pagelist_img{
clear:both;
top: 0px;
position: relative;
}
.pagelist_excerpt, .pagelist_excerpt p {
font-size: 1em;
color: #000000;
clear:both;
}
I hope some have a solution or can point me in the right direction because I've tried for some time now to solve it myself, without any luck. I though it was just a matter of using the clear:both tag, but it didn't do anything.
Sincere
- Mestika
Try removing the positioning and clears, as default <div>s are block level and should display one under the other.
Made an example with your code.
Use a clearfix. Something along the lines of:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1; /* triggers hasLayout */
}
And modify your markup to be
<div id="pagelist" class="clearfix">
http://www.positioniseverything.net/easyclearing.html
Also, see the dupes:
How to fix IE7 float-clear combination
IE7 Clear Float Issue
Which clearfix method?
ClearFix vs Overflow
What methods of ‘clearfix’ can I use?
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%;
}