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.
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.
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 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 getting 12px white space at the bottom of my pages. Upon inspecting the CSS it's not attributed to any element. According to CSS inspectors the height of both the body and html elements don't include this space...It's got me miffed.
The page is here if you want to take a look: Page
Thanks
Change the content of your .clearfix from a . to \0020 (which is a space). This will do the trick:
.clearfix:after {
clear: both;
content: "\0020"; /* change to this */
display: block;
height: 0;
visibility: hidden;
}
If you change the #footer-wrapper to this it will fix your problem
#footer-wrapper {
background-image: url('../images/green.jpg');
height: auto;
overflow: hidden;
}
I hope this helps.
part of it is related to your .clearfix::after. I added a line-height:0 to that, and most of it went away. I think your line-heights generally across the page are screwing with the layout a bit.
If you don't want to change line-height or something, you can just add padding to your footer like this:
#footer-wrapper {
margin-top: 35px;
padding-bottom: 20px;
}