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.
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.
Look at my html + css code: http://jsfiddle.net/nP39E/1/
I'll explain if don't understand what I want to achieve:
I want a page with a div which floating right and takes 250px width and a div that takes width of the rest of the document.
In the left div, you can see that I have some other floating elements, and their heights are effected from the right div. You can see the first (red) row with height that align with the right bar's height and has nothing to do with the real content of its content.
I use group class in order to handle the common floating problem: .group:after { content: ""; display: table; clear: both; }
Can you tell me why it happens?
I just changed CSS for the content div from the last answer:
.content {
background: #888;
padding: 10px;
position: absolute;
right: 270px;
left: 0;
}
http://jsfiddle.net/nP39E/4/
What you think?
display: table isn't meant to be used for layouts like this, it's more useful for specific equal-height situations.
Properly floating the divs and not using the margin-right to push the left div will work:
.content {
background: #888;
padding: 10px;
float: left;
width: 250px;
}
Fiddle
You are giving margin-right:270px which is wider than the available space,So just remove that. Also you should make content float:left.
.content {
background: #888;
padding: 10px;
float:left;
}
JSFiddle : http://jsfiddle.net/ankur1990/nP39E/3/
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;
}
Currently I'm using just HTML and LESS CSS...
I've set my img tag to have a max-width: 100% so that, essentially, my images are all flexible and sized perfectly to the window/screen that they are viewed in/on.
Containing the images are divs, whose widths are always 100%, but, whose heights need to match that of the images.
How can I get the divs the same height as the (flexible) images? Is there any way to do this just with HTML and LESS CSS or is Javascript required?
Any help would be appreciated, thanks :)
yes you can use a clearfix for this...
.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%;
}
add ".clearfix" to your div containing the img.
try the following css:
overflow:auto;
on all of the divs that the image is in.
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?