I'm designing a web page at: http://trackstudent.pt/index.php
I ran into a bug that I can't fix, if you notice after inspecting the link, the <p></p> is getting pushed to the right, by a measure and I can't figure out why. All the divs have margin:0, padding:0 and there's enough space so that that element should fit that space.
Amazingly in the 2nd row of content that thing doesn't happen.
I have css from 1kbgrid (960px grid with 12 columns):
// Grid Cell (column)
.column {
margin: 5px 10px;
overflow: hidden;
float: left;
display: inline;
}
// Grid row
.row {
width:960px;
margin: 0px auto;
overflow: hidden;
}
// Nested rows
.row .row {
margin: 0px -10px;
width: auto;
display: inline-block;
}
In HTML I have:
<body> -> width: 100%
<div id="container"> -> width: 100%
<div id="mainWrapper"> -> width: 960px
<section class="row"> -> width: 960px
EDIT: With clear:both; in #wrapperMain it works! But I still don't get why this is happening, because the header has height:40px and the logo too, so there shouldn't be any area from the logo expanding pass the header. Anyone can offer insight?
Thank you in advance.
It's from the floating logo. Simply add the following CSS:
#wrapperHeader {
overflow:hidden; /* Forces header to contain elements */
}
Or:
#wrapperMain {
clear:both; /* Pushes wrapper down until it's past bottom of header elements */
}
Related
I have a problem concerning shrink wrapping a container div, if the content is floating.
I want the container to be only as wide as the floating content of the container (shrink-wrapped). The container should be centered. Because of the context I cannot give the container an absolute width.
HTML
<div class="container">
<div class="content">Some content</div>
<div class="content">Some content</div>
<div class="content">Some content</div>
</div>
CSS
.content {
width: 50px;
float: left;
background-color: #CCC;
margin: 10px 10px 0 0;
overflow:hidden;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.container {
border: 1px solid #FF0000;
display:table;
margin: 0 auto;
}
Please see the problem under https://jsfiddle.net/jackis/05nzo4oc/12/. As soon as the floating content has to break the line the container takes the whole available width, even if a good part of the container remains empty to the right then. If the content does not break the line it works as expected. To see that, change the width of the .content class to 50px:
.content { width: 50px; ...}
I have absolutely no idea how to shrink wrap the container div if the floating content has to break the line.
Edit:
The container should contain as much content divs as possible in one line, but should leave no "phantom space" to the right, if the next content div uses the next line. For the real world problem I am trying to demonstrate with this model the width of the content divs is fixed.
Thanks for your help
I've managed to get it right with the width 270px and other versions, but i feel it to be a hack:
.container {
padding: 0 auto;
border: 1px solid #FF0000;
display:table-caption;
margin-left:-50%;
margin-right:50%;
}
A complete version is here.
To get a container block to expand to fit it's children you need to set it to inline-block. This also gives the possibility to center it using text-align center on a parent element.
.content {
width: 270px;
display:block;
float: left;
background-color: #CCC;
margin: 0;
overflow:hidden;
}
.content:nth-child(odd){
margin-right: 20px;
}
.container {
padding: 0;
border: 1px solid #FF0000;
display: inline-block;
margin: 0;
max-width: 560px;
}
.outer-wrap {
text-align: center
}
I have forked and tidied up your fiddle here:
http://jsfiddle.net/simoncmason/qL611mu6/
I take it this is what you wanted to achieve.
(Edited following comments)
I solved my problem based on knowledge I have about the context of the environment the composition is used. As the container takes the whole width of the screen and I know how wide a content tile is, I know how many can fit in one line. I can then work with media queries and set the width of the container explicitely to get the desired behavior:
`#media all and (min-width: 280px) and (max-width:559px) {
div.product-grid {
width:280px;
}
}
#media all and (min-width: 560px) and (max-width:839px) {
div.product-grid {
width:560px;
}
}
`
The container will then be centered. on the screen. Of course I can not foresee all possible screen widths, but for huge resolutions, I can just live with a container not being centered.
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.
I created a tumblr theme, where everything is centered and 660px wide.
However, I also post large imagery that is 940px wide, and have been centering that by giving it a negative margin of -140px (940-660/2), but this is not ideal because I then have to post all images as this dimension, or they are just aligned way left.
Scroll to the bottom of my site to see the images that are not aligned properly: http://seans.ws
The css:
section {display: block; clear: both; margin: 0 auto;width: 660px;}
article img {clear: both; max-width: 940px; margin-left: -140px;}
Thanks for any help!
You can choose between these two solutions:
Markup:
<div id="content">
<div class="a"><div class="b">
<img src="http://placekitten.com/100/100">
</div></div>
<div class="a"><div class="b">
<img src="http://placekitten.com/2000/100">
</div></div>
Common css:
#content {
width: 300px;
margin: 0 auto;
border: 1px solid blue;
}
.a {
/* extend image area */
margin-left :-9999px;
margin-right:-9999px;
/* but without scrollbars */
position: relative;
left: -9999px;
}
.a .b {
/* undo scrollbar-removing positioning */
position: relative;
left: 9999px;
}
The display: table way:
http://jsfiddle.net/ZhEku/3/
.a .b {
display: table; /* shrink-wrap to content (= the image) */
width: 300px; /* content width, acts as min-width when display:table */
margin: 0 auto; /* center inside the (2*9999+300)px area */
}
The display: inline-block way:
http://jsfiddle.net/ZhEku/4/
.a {
/* center content (= the image wrapped into .b) */
text-align: center;
}
.a .b {
display: inline-block; /* shrink-wrap to content (= the image) */
min-width: 300px; /* content width */
text-align: left; /* if image is smaller than the content */
}
​Enjoy :)
Here's the infinite scroll js: http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js
Here is my margin-left script for images larger than the default width of containers:
<!--Dynamicaly center big images-->
<script>
$(window).load(function() {
$(function() {
$('img').css('marginLeft', function(index, value){
if($(this).width() > 660) {
return -($(this).width() - 660)/2;
}
return value;
});
});
});
</script>
The only thing I need to figure out is how to do this same function on images that dynamically load because I have infinite scroll (like the bottom images are not loaded until you go down the page.
I have a page that has a header, content, and footer. The header and footer are of fixed height, and I'd like the content to adjust its height so that it fits dynamically between the header and footer. I am planning to put a background-image in my content, so it is critical that it actually fills the rest of the unoccupied vertical space.
I used the Sticky Footer approach to ensure that the footer remains on the bottom of the page. This however does not make the content span the entire height of the remaining space.
I have tried several solutions which involved me adding height:100%, height:auto; position:relative but it did not work.
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#wrapper #content {
background-color: pink;
width: 400px;
height: 100%;
margin: 0 0 -30px 100px;
padding: 25px 30px 25px 30px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
The trick about height:100% is that it requires all of the parent containers to be have their heights set as well. Here's an html example
<html>
<body>
<div id="container">
</div>
</body>
</html>
in order for the container div with a height set to 100% to expand dynamically to the height of the window you need to make sure that the body and html elements have their heights set to 100% as well. so...
html
{
height: 100%;
}
body
{
height: 100%;
}
#container
{
height: 100%;
}
would give you a container that expands to fit your window. then if you need to have footer or header that floats above this window you can do so with z indexing. This is the only solution I've found that fills the vertical height dynamically.
I'm providing a slightly more general solution so it is more useful for others reading this answer and wondering how to apply it to their site.
Assuming you have three divs:
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
where #header is fixed and may have variable height, #contents should consume all remaining vertical space and #footer is fixed and may have variable height you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#header {
flex: none;
}
#contents {
flex: 1;
height: 100%;
overflow-y: scroll;
}
#footer {
flex: none;
}
Note that this will allow the contents to scroll vertically to show it's whole contents.
You can read more about display:flex here.
Try changing your css to this:
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#content {
background-color: pink;
width: 400px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 30px;
top: 150px;
margin-left: 100px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
You probably don't want to be setting the width, padding, margins, ect. of the wrapper. Also, with absolute positioning you can pull the bottom and top of the content to where you want them.
Here's what you are after, I think.
I spend several hours trying to figure this out too and finally have a robust solution without hacks. However, it requires CSS3, which requires a modern browser to support it. So, if this constraint works for you, then I have a real solution for you that works.
http://jsfiddle.net/u9xh4z74/
Copy this code into your own file if you need proof, as the JSFiddle will not actually render the flexbox correctly as embedded code.
Basically, you need to
- set the target container to 100% height, which you seem to already know
- the parent container you set display: flex and flex-direction: vertical (you'll see in the JSFiddle I've also included the alternate styles that do the same thing but are needed for cross browser support)
- you can let the header and footer be their natural heights and dont need to specify anything in that regard
- in the container you want to fill up the remaining space, set flex: 1. You're set! You'll see it works exactly as you semantically have intended. Also in the JSFiddle, I included overflow: auto to demonstrate that if you have even more text than the screen can handle, scrolling works as you would want it to.
<div style="display:flex; flex-direction:vertical;">
...header(s)...
<div style="flex: 1; overflow: auto;">
As much content as you want.
</div>
...footer(s)...
</div>
As a side note, I pursued the option of trying to do this same thing using display: table. It works just fine as well, except that overflowed content does not work as you would expect, instead overflowed content simply expands the container to the size of the content, which I'm pretty sure is not what you want. Enjoy!
Use display:table and display:table-row
Set height:0 for normal divs and height:auto for div that should fill vertical space. Insert a div with {height:100%; overflow-y:auto} into the vertical filler to if the containers height shouldn't expand beyond its preset height.
Behold the power of display:table!
<div style="height:300px;">
<div style="display:table; height:100%; width:100%;border: 1px solid blue;">
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Hello
</div>
<div style="display: table-row; height:auto; padding:2px; background-color:green;">
<div style="height:100%; overflow: auto;">
<div style="height: 500px"></div>
</div>
</div>
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Gbai
</div>
</div>
</div>
There is no 100% height from 100% continer height exactly. You can't solve it this way. Likewise while using mix of height + margin + padding. This is way straight to hell. I suggest you to take a look for tutorials which are sloving this page layout.
I have a container div with a floating left-hand navigation pane and a content pane to the right:
<div id="header"></div>
<div id="container">
<div id="leftnav"></div>
<div id="content"></div>
<div class="clearfix"></div>
</div>
<div id="footer"></div>
CSS:
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
margin-left: 200px;
background-color: green; /* so I can see it */
}
.clearfix { clear: both; }
The #container div stretches to the full height of the floating #leftnav div, but the contained #content div does not stretch to 100% of the height. I've read elsewhere that this is due to the parent #container not having a specified height (defaults to auto) and therefore the 100% is not based on that container; however, I can't specify the height because the left navigation pane height isn't constant.
How can I get the #content div to be 100% of the height of the #container div when the #container div's height is defined by the floating #leftnav?
This is similar to the 3 column liquid "holy grail" CSS layout that has been plaguing people for years (though has been solved in the past couple years, though many of the solutions required browser hacks or Javascript to function).
I'd highly suggest you not reinvent the wheel here as it is difficult to get CSS to perform exactly as you're describing. Here is a good resource for this layout and many other similar liquid layouts:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
The easy way would be to use JS to set the height of #content to the height of #leftnav. You can use faux columns on #container and make a slice/gif of the green background and repeat it vertically on #container along with the red however you have it but I'm not sure if it fits your needs.
try this CSS
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
background-color: green; /* so I can see it */
float:right;
}
.clearfix { clear: both; }
I would also suggest using a line break with a clear both rather than a div.