Please take a look at this fiddle to go with the explanation:
http://jsfiddle.net/Br3jz/1/
I have a background style set on a containing div, and I want this background filling the entire screen at all times. I have inner .containers that are centered and are at a fixed with of 1064px. The problem arises when the device width is less than 1064px.
When this happens, the containing div, as well as the HTML body element are both stuck at the original device width. Why is this happening and how can I fix it?
The problem is that #main doesn't want to have more width than its parent, so it has a fluid width. But .container has a fixed width, which can be greater than #main's one. In that case, it overflows.
You have two possible solutions, with different effects:
Solution 1: Demo
Instead of width: 1064px, use
.container {
max-width: 1064px;
}
Solution 2: Demo
.container {
width: 1064px;
}
#main {
min-width: 1064px;
}
Related
I'm currently trying to get an element (div) stretching itself over the free space of a parent element while respecting the size of other elements on its level. I found some solutions and tried most of them but I couldn't get it to work. I suspect this is because of the cms I'm working with which - when telling it to make a set of columns the same height - changes the parent display-style to table-cell. So... here is an image of what I'm trying to archive.
As said, the CMS changes the blue container to display: table-cell to stretch it over the whole area and make all columns in a row the same height. Inside of this blue container are the elements I can control. These are up to four div (white/green) inside of a parent div (yellow). The white div are dynamic and not always present and the green one needs to stretch over the whole vertical space no matter which of the white elements are present.
And idea how to accomplish that? I tried a lot of answers about this topic but they didnt work.. I think that's maybe due to the fact that the blue container is a table-cell?
edit: Here is what I got so far.
<div id="box_wrap">
<div class="box_title">
Title
</div>
<div class="box_image">
Image
</div>
<div class="box_content">
Content
</div>
<div class="box_more">
Read More
</div>
</div>
All of this is in a container provided by the CMS itself which has the attibute display: table-cell.
#box_wrap {
display: flex;
flex-direction: column;
}
.box_content {
display: flex;
flex: 2;
}
I think the problem might be that the container provided my the CMS has no defined height. If I give my #box_wrap a fixed height manually then the div in it will work as they should. I also tried height: auto and height: 100% for the #box_wrap and it doesn't work. Again, probably because the parent has no defined height, no? That is the last thing that I need to solve. The #box_wrap needs to stretch over the vertical, currently it only extends as far as it needs to cover the content.
I also noticed that the first image I provided wasn't 100% accurate so I updated it.
I would use this to allow the .box_content to grow (i.e. become higher) and the others not:
.box_title,
.box_image,
.box_image {
flex-grow: 0;
}
.box_content {
flex-grow: 1;
}
In addition, you should apply height: 100% to #box_wrap, but for that you also need height: 100% on body and html to have a reference for the height of #box_wrap. So, to sum up:
html, body {
height: 100%;
margin: 0;
}
#box_wrap {
height: 100%;
}
You also might want to add...
body {
padding: 10px;
box-sizing: border-box;
}
...to get that distance between the edge of the screen and your container as it's shown in your image.
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
How can I prevent my squares from wrapping when resizing the window?
I want the squares to stay at their positions, but every time I resize the window, they get pushed down and are hidden.
This example is currently working, but the solution, which makes this possible, is just ridiculous.
Is there a "cleaner" way or how can I make it look more professional?
My JSFiddle Example
.content {
width: 100000000px;
}
Remove position:absolute and overflow:hidden from the parent element.
Since the elements are inline-block, you could use white-space:nowrap to prevent them from wrapping. If that's not the desired effect, just remove it though.
jsFiddle example
#container {
width: 100%;
height: 100px;
white-space:nowrap;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
}
http://jsfiddle.net/CLErY/2/
/* The following rule can be romoved, is just to give a smooth overflow hidden visibility */
.content {
width: 200%; /* Always bigger than the real value, so 200% is the double and it should work. */
}
.content should have at least the size of the whole element plus the size of one children (100px), so 200% is the double and it should work.
In case we have 4 squares the size should be (width x 4 + width) in case the width of the square is 100 the result is 500px.
Also this is to give a smoother overflow dissapear but not necesary.
Hope it helps.
I am using display: table; on the container and display: table-cell; on the child elements, to highlight some posts horizontally on a page.
The thing is, I have no idea as to how to make them responsive, i.e. as the screen-size becomes smaller, each child (i.e. table-cell) should become proportionately smaller, whilst continuing to stay aligned horizontally.
How do I do this?
Example Code: http://www.codepen.io/anon/pen/dCLgq
Demo: http://codepen.io/anon/full/dCLgq
To scale the inner containers down with the page, you can set the container div's width to 100%:
in your example:
#the-big-stories {
display: table;
table-layout: fixed;
/** add 100% width **/
width:100%;
}
further, if you want to scale the images with the child containers, just give them width: 100%; as well with height:auto;
see your codepen forked below:
http://codepen.io/braican/pen/xCmsw
You'll probably need to use media queries to really get the stuff inside to play nicely together, but the container will scale with the browser, as will the inner div's.
I want to have the content of my website centred but only for a certain width of a webpage. So when it's over say 500px I'd want the content to then be fixed, unable to stretch any further. Is there anyway to do that, or am I best having everything fixed? Hope that makes sense ill add some visuals to be a bit clearer..
thanks!
http://i38.photobucket.com/albums/e126/aaron123456/stackflow.jpg
1.auto margin with a certain space
2.so content doesn't float in the middle of a larger webpage
It's quite simple:
#container {
max-width: 500px;
}
#container > * {
margin: 1em auto;
width: 300px;
}
#container defines the maximum width, and every element placed inside it is aligned centered. I had to set the width to prevent these elements from requiring the entire width.
See it in action