I have a simple div wrapper with four spans inside.
<body>
<main>
<div>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</div>
</main>
</body>
The div is positioned absolutely so that I can get it to touch the bottom of the screen, and text-align is justify so the spans inside are evenly spaced. This works fine until I try to make my spans height: 100%, then a mysterious white space appears outside of the actual flow on the very bottom. I think this has something to do with my div:after psudo-element but I have absolutely no idea what's going on.
* {
padding: 0;
margin: 0;
}
main {
position: relative;
height: 100vh;
width: 100%;
background-color: rgb(45, 45, 65);
text-align: center;
}
div {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
bottom: 0;
text-align: justify;
display: block;
}
div:after {
display: inline-block;
width: 100%;
content: '';
}
span {
background-color: rgb(25, 25, 45);
box-sizing: border-box;
display: inline-block;
font-size: 1em;
padding: 10px;
height: 100%;
}
span:hover {
background-color: white;
}
Do I not understand how :after works, or is this some kind of a glitch? Where in the world is that white spacing coming from on the bottom?
Here's a reproduction of the problem: http://codepen.io/anon/pen/qdpERR?editors=110
simply add an overflow: hidden; to the main or even the parent of the main should works.
Check the link
http://codepen.io/TibicenasDesign/pen/yNpyLr?editors=110
Uncomment overflow: hidden; or box-sizing: border-box then, the white space at the end of the web will be removed.
Also the box-sizing works ! i always have it with border-box so forgot it haha, and maybe its a better solution
Another option may be to add box-sizing:border-box, becauase you have padding on those link elements.
Related
I don't know how to make the div display in front of the h1 text, so that the blue box is in front of the text? I have been stuck on this for the past 30 mins and cant resolve it in my head. I am a beginner so please have patience.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper2 {
position: absolute;
z-index: 2;
width: 500px;
height: 250px;
background: blue;
}
h1 {
position: relative;
z-index: 0;
}
<div class="wrapper2">
<h1>Welcome</h1>
</div>
As mentioned above, you can simply put the <h1> element above your wrapper in HTML. If you want your <h1> to stay inside, you could use this:
display: none; or visibility: hidden; opacity: 0;
CSS:
h1 {
position: relative;
/* either of these */
display: none;
visibility: hidden;
opacity: 0;
}
You could try this:
.wrapper2 {
width: 500px;
height: 250px;
background: blue;
}
<div class="wrapper2"></div>
<h1>Welcome</h1>
Although then it's not really a "wrapper" anymore, so maybe you'll need to create an element just for the blue square.
You've placed your h1 inside the wrapper2, so you can try to move it after it if you want to style them separately. I would also suggest to not use absolute position unless you really want this, the consequences of doing this will quickly become apparent as you build out a larger page.
You can make each element "inline" rather than "block", this will make them follow the text flow of the page: display: inline;
I have a problem with CSS that's only visible in FireFox (cur.ver. 31).
I am trying to make a responsive layout, with a row of images (with links), that are centered, and having the same height and scale with the viewport width. My approach is to create a container with a fixed aspect ratio, and place the images inside (each image inside a separate <a> tag), center them, and scale their heights to the container height. It's working great, except in FireFox.
To achieve this I applied a display: inline-block; height: 100% to <a> tag and height: 100%; width: auto to <img> tags. For some (unknown) reason FF is not calculating the width of the <a> tag correctly (when it contains described above <img> tag) and it collapses horizontally. The result is, that all <a> with 0 width are placed very close to each other (separated only by white spaces), and the images overlap each other. I get the same result with display: block; float: left; on <a> tags.
The CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width: auto;
display: block;
}
The HTML
<div class="container-ratio">
<div class="container-inner">
<a class="block">
<img src="http://placehold.it/100x80/42bdc2/FFFFFF&text=No1">
</a>
<a class="block">
<img src="http://placehold.it/150x80/242bdc/FFFFFF&text=No2">
</a>
<a class="block">
<img src="http://placehold.it/200x80/c242bd/FFFFFF&text=No3">
</a>
</div>
</div>
I think this is what your trying to do. Demo
You had no width on .block and auto on .block img.
It needs to be percentages.
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
width:20%;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width:100%;
display: block;
}
It's been nearly two years since this question was asked, and Firefox still exhibits this behavior.
So, for anyone in the same situation, here's a solution (only tested on Chrome 49.0 and Firefox 45.0.1).
Edit:
Originally, I used inline wrapper divs and two instances of the images, one of which was not displayed and only served as a dummy. It appears this is not necessary, as can be seen here.
All in all, it seems you can't use inline-block that way in Firefox, but all you need to do to get what you want is leave the anchors and images as inline elements. As long as the anchor's parent is a block-level element other than inline-block, and its height is specified, then you'll get the intended result.
If, for some reason, inline-block is really needed, I don't see how to work around this problem.
Note:
Beware of the "font-size: 0;" on the .block class, used to remove spaces between the images. Without this, images are seperated by whitespaces that behave like links. If the images need some space between them, adding some right or left margin as in the fiddle would be a solution.
Also, though the .block class name is no longer appropriate, I left it to stay consistent with the OP.
The modified CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
font-size: 0;
}
.block img {
height: 100%;
margin-right: 1%;
}
In my application I have a section header with a caption and a horizontal line. The horizontal line is a background image (which contains the line, the rest of the image is transparent) of the parent container. The caption is defined by a child element.
<div class="header">
<span>Identifier</span>
</div>
What I am trying to achieve - with CSS styling - is that the child element is displayed with the same background color as the parent, but the background image of the parent container should not be displayed underneath the caption.
.header {
background-image: url("bg_image.png");
background-color: #fff;
position: relative;
height: 25px;
}
.header > span {
position: absolute;
background-color: #fff;
padding: 0px 10px;
}
This works perfectly if I set the background color of the child element explicitly. But the background color can be configured by the user, so I don't want to set it explicitly.
So my the question is, is this possible at all using only CSS styling?
This fiddle shows the problem (I used a gradient to simulate the background image).
EDIT: An important requirement is that the solution must work across browsers (including IE8).
If you're okay with a centered headline, try the css that i used in one of my projects:
h1 {
position: relative;
white-space: nowrap;
text-align: center;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
You can see the result here: http://codepen.io/DerZyklop/pen/AouDn
It is pure CSS. It adds two lines by using the css-pseudo-elements :before and :after.
With some modifications it should also work well with a left-aligned headline like in your example.
And another important thing to note here is the white-space: nowrap;. So this will only work with one line, but not with multiple lines.
can you please checkout
http://jsfiddle.net/dYr29/3/
i have update your fiddle
<div class="header">
<span>Identifier</span>
</div>
css
.header {
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background-color: #fff;
position: relative;
width: 300px;
height: 1px;
top: 10px;
}
.header > span {
position: absolute;
padding: 0px 10px;
top: -10px;
left: 10px;
background:#fff;
}
I finally identified how to solve the problem.
.header > span {
position: absolute;
background-color: inherit;
padding: 0px 10px;
}
Using background-color: inherit will solve the problem.
I also updated the fiddle.
Assume, that I have three boxes (divs) on website (see image below):
header with logo
content with some text
footer with contact info
Each box have unique color (in order: yellow, orange and blue) and black border.
I would like to website always fills the entire screen, the logo was on the top and the footer was at the bottom. So if there is not enough text in content, content should be extended, so that the footer was on the bottom. And if will be a lot of text in content, slider should appear on the right.
How do this in CSS? Important is that boxes have backgrounds. I found many solutions, but none doesn't work properly with backgrounds.
Solution Explained
The black box in your diagram gets min-height 100%, is the scrolling container, and is position relative, to allow child positions to be respective to it.
The red box in your diagram is actually composed of 2 boxes:
one for your dynamically-sized content; this has sufficient top and bottom padding to make room for your header and footer, and force the scrolling container to expand
one for the background; this is position absolute, with top and bottom position specified relative to the black box, its parent.
The yellow and blue boxes in your diagram can be position: absolute, top: 0 and bottom: 0, respectively... or however you choose to position them.
Here's a fiddle of it: http://jsfiddle.net/syndicatedshannon/F5c6T/
And here is another version with explicit viewport elements just to clarify, matching colors, and borders added to replicate the OP graphics (although per the OP the black border is actually the window).
Sample HTML
<html>
<body>
<div class="background"></div>
<div class="content"></div>
<div class="header"></div>
<div class="footer"></div>
</body>
</html>
Sample CSS
html { position: absolute; height: 100%; left: 10px; right: 10px; overflow: auto; margin: 0; padding: 0; }
body { position: relative; width: 100%; min-height: 100%; margin: 0; padding: 0; }
.background { position: absolute; top: 120px; bottom: 120px; background-color: red; width: 100%; }
.content { position: relative; padding: 120px 0; }
.header { position: absolute; top: 10px; height: 100px; width: 100%; background-color: yellow; }
.footer { position: absolute; bottom: 10px; height: 100px; width: 100%; background-color: cyan; }
Also note that this assumes you cannot rely on CSS3 yet.
If you're only targeting modern browsers, you can use calc()
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
}
.footer {
height: 100px;
margin-top: 20px;
}
.content {
min-height: calc(100% - 50px - 10px - 100px - 20px);
}
The drawback is that you need to know the header and footer sizes and they need to be fixed. I don't know any way around this without using Javascript. For slightly less modern browsers, you can use border-box to get the same effect as above.
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
z-index: 5;
position: relative;
}
.footer {
height: 100px;
margin-top: -100px;
z-index: 5;
position: relative;
}
.content {
box-sizing: border-box;
padding: 60px 0 120px 0;
margin-top: -60px;
min-height: 100%;
z-index: 1;
position: relative;
}
Lastly, here is the JS solution:
$(function(){
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight() - $('.content').marginTop()
- $('.content').marginBottom());
});
EDIT: My JS solution assumed border-box and no border. This solution should be more robust:
function setContentSize() {
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight()
- ($('.content').outerHeight()
- $('.content').innerHeight()));
}
$(setContentSize);
$(window).on('resize', setContentSize);
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you