On this site: http://walkman.pk/aserdus2/tagok.php
I have two background-images on the left and right side, which doesn't appear, and I can't figure it out why ?
Every other page of the website works fine. It seems that some <div> elements are not closed properly. When I watch it with chrome inspector, I see that the content div is very thin, but I don't understand the reason of this.
What should I do to show up the images?
You have only floating elements inside #content, so its height is zero. You can fix this by setting overflow to something other than visible:
#content {
overflow: hidden;
}
Voilà:
That's because both elements with class block are floating and therefore the element with id content has no height (which has the background images). So you need to give height to the content element (height: 250px) should solve the problem.
Add this to your #content {}:
height: 600px; (or however high the images are)
I tried it with Inspect Element and the pictures appeared.
Good luck!
Try
<div id="content">
...
<div style="clear:both"></div>
<!-- CONTENT END -->
</div>
OR
http://www.webtoolkit.info/css-clearfix.html
<div id="content" class="clearfix">
...
<!-- CONTENT END -->
</div>
.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 three section elements that hold css animations inside. When I try to put them side by side using display: inline or float them, they pile up.
HTML
<section class="spinner-1">
<div class="spinner"></div>
</section>
<section class="spinner-2">
<div class="spinner"></div>
</section>
<section class="spinner-4">
<div class="spinner"></div>
</section>
CSS
.spinner {
position: absolute;
}
.spinner-1, .spinner-2, .spinner-4 {
height: 100px;
width: 200px;
}
you can see the rest of the css code and preview in codepen.
section {
float: left;
}
Does it in your codepen.
It's because you're setting the .spinner itself to position: absolute.
You need to use display: inline-block because you're expecting them to maintain their own width and height. display: inline elements have no direct control over their width and height, so the elements do nothing.
section {display:inline-block;}
They won't stack this way.
I aling divs in through right
{ float: right;}
but end of the page it (when divs become more than 4) the fifth div goes under other divs while page expands to down. I dont want this. I want height of the page become fixed and web page expand left to right always how can i do this.
Use min-width and display:table-cell example in fiddler : http://jsfiddle.net/HarishBoke/c8G7V/
On the top level parent element (presumably a 'body' tag) set the overflow-x property, in CSS, to scroll.
Something along the lines of:
body{
overflow-x: scroll;
}
Note that this possible solution may not be pre-IE8 friendly. As far as keeping the page's height fixed, define the height in CSS and set the overflow-y to be hidden. This will hide any elements exceding the parent element's height, rather than stretching the content.
You need a extra div with large width which contains other div's. This will not allow your body container to add new line when running out of space.
HTML:
<div id="container" class="clearfix">
<div id="wrapper" class="clearfix">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
<div id="div4">Div4</div>
</div>
</div>
CSS:
#container {
height: 275px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#wrapper div {
float: right;
border:1px solid black;
width:200px;
height:100px;
display:inline-block;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
To make it more dynamic,you can first calculate the space taken by inner div and then some ettra space on the wrapper div accordingly
Javascript:
var width=0;
$('#wrapper>div').each(function() {
width =width+parseInt($(this).css('width'));
});
wrapperWidth=width+100;
$('#wrapper').css('width',wrapperWidth);
Updated Fiddle: http://jsfiddle.net/ankur1990/mgxk5/3/
I am trying to have one div on the left side of the page, and one div on the right side of the page.
The code (Code Here) works fine when it's in jsFiddle; however, when I use the same code on my website the "right" div doesn't float to the right, doesn't have a border, and it places itself above the "left" div.
Any ideas?
You have many issues to solve in order to present the web page properly cross-browser, but to give you a solution for the problem at hand, you can see this Fiddle Example!
THE RELEVANT CSS
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
THE RELEVANT HTML
<div class="clearfix">
<div id="right">Right!</div>
<div id="left">Left!</div>
</div>
Explanation:
Wrap the #left and #right into a div that uses the class clearfix to clear the document flow at that specific point.
That should allow the #right and #left to be on their proper place with or without a CSS Reset applied to your web page.
Get a CSS Reset for HTML5: http://html5reset.org/
Read about Floated Elements: CSS Float | CSS float Property
So I wanted a sticky footer on a page and got this one to work for me. All is well, but no, not really..
The problem is that I wanted the content above the footer to stretch all the way down to it. Now the box containing the main content end just after the text in the box, and there's a large space between the footer and the content. What I want is the background of the main content to stretch down to the footer!
See my beautiful image!
This is what I have right now in html:
<div id="wrap">
<!-- start header -->
<div id="header">
<div id="header-content">
</div>
</div>
<!-- end header -->
<!-- start main -->
<div id="main">
<div id="main-content">
</div>
</div>
<!-- end main -->
</div>
<!-- start footer -->
<div id="footer">
</div>
And in css:
html {
height: 100%; }
body {
height: 100%;}
/* wrap */
#wrap {
min-height: 100%; }
/* main */
#main {
background-color: #43145c;
overflow: auto;
padding-bottom: 50px; }
#main-content {
width: 720px;
margin: auto;
background-color: #643280;
padding-top: 20px; }
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear: both;
background: red; }
I tried setting min height of main to 100%, but didn't work. I just want the backgroundcolor of main-content all the way down to footer, since it's different to the body and main box.
Does it make any sense? Can anyone help?
I know this was asked 6 months ago, but I've been searching for the solution to this problem for quite a while now and hope other people can benefit from the solution I employed being archived. You were spot on when you said that somehow the main box needs to get the min-height of the space between the header and footer.
Unfortunately, I don't know how this can be done with pure CSS, it's quite easy with javascript of course but that solution is not always viable, and it's kind of messy in terms of code separation. The good news is that depending on what you need to do, there is a CSS hack you can employ.
What I did was add an absolutely positioned element below body that essentially stretched from below the header to above the footer.This way I could add a background or a gradient on this #divBelowBody that essentially allowed me to pretend this problem is solved (although this solution leaves a bitter taste in my mouth).
In addition, if you wanted to add a border around your content div and were hoping that it extended to the footer even when content was small, you're screwed (although not really, I can probably think of a hack or two to make this workable), so it only works if you were hoping to add a background or gradient etc.
You can see the code in action here:
http://jsfiddle.net/qHAxG/
Expand the result section horizontally to more clearly see what's going on.
Try this:
Replace your HTML and BODY Styles in the Style Sheet with this:
html,body {height: 100%;}
Then replace your "wrapper" with this:
#wrap {
min-height: 100%;
height: auto;
}
Hope that helps.
Try this
HTML
<body>
<div id="wrap">
<!-- start header -->
<div id="header">
<div id="header-content">
</div>
</div>
<!-- end header -->
<!-- start main -->
<div id="main">
<div id="main-content">
</div>
</div>
<!-- end main -->
<div class="push"></div>
</div>
<!-- start footer -->
<div id="footer">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
/* wrap */
#wrap {
background: green;
height: auto !important;
margin: 0 auto;
}
#wrap,
#main,
#main-content {
margin-bottom: -50px;
min-height: 100%;
height: 100%;
}
/* main */
#main {
background-color: #43145c;
}
#main-content {
width: 720px;
margin: 0 auto;
background-color: #643280;
}
.push, #footer {
height: 50px;
}
#footer {
position: relative;
background: red;
}
see THIS demo: it might be of use. It seems like you want a div with a background color to stretch to the bottom. But the problem with the sticky footer is that it stays at the bottom also - get's out of your way when the content extends past the view-port. So It needs some distance ( height of the content ) to know how when to do that. If that height isn't designated by actual content... 100% isn't really going to do the trick either. because then the "sticky" footer doesn't really work... it would be off the screen. What is it really 100% of ?
this whole thing has frustrated me for a year... but I always find a way to make it look the way I want even if I can't get it to function the way I want... hopefully that link demo above will maybe lend another piece to the puzzle. Good Luck !
I have a pure CSS layout with a simple container that houses my text. The container has a min-height attribute.
The page content is generated from the database. The problem is as the page grows the text overflows the container that it is in.
How do I get around this?
My guess is you need to clear your floats I'd say..
Clearing Floats
<div id="myContainer">
<textarea />
<div class="clear"> </div>
</div>
If you want to trigger hasLayout to the container without additional markup you can use
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1; /* triggers hasLayout in IE */
}