I have a table with two fixed columns, one on the left and one on the right.
At the moment it only works in one resolution. But when the resolution is changed, the column on the right gets very messed up.
This is the main class that controls the margins (to allow room for the fixed columns) along with the width:
#myTable > .wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 83%;
margin-left: 126px;
margin-right: 45px;
}
I have tried going into the developer tools and changing the width value down as I resize the browser. So far, this is the only solution I have found. Although, this would requre tons of media queries which is not a preferable solution.
How could I possibly edit my css classes to make this responsive?
Here is a demo
Try limiting the width of the wrapper by using min-width and max-width:
#myTable > .wrapper {
overflow-x: scroll;
overflow-y: visible;
max-width: 83%;
min-width: 40%;
margin-left: 126px;
margin-right: 45px;
}
FIDDLE DEMO
Related
I want to create a div, called 'container' that contains all the other elements on the page.
If I change the size the elements move and rearrange, -BUT- the div itself remains invisible! Using the Firefox inspector, it seems the div is -above- the page.
It seems very weird to me, as the divs are all properly nested and otherwise behave well.
My only guess is that this bit is causing some trouble; if i change the width, my layout goes crazy.
#upper {
float: left;
width: 100%;
height: 40%;
}
#lower {
float: left;
width: 100%;
height: 40%;
}
However I cannot quite pin down what is causing the issue. Any idea?
Here is my code: https://jsfiddle.net/xtaLfuLa/
I would just add display:inline-block; into container class.
#container {
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
background: rgb(163, 43, 43);
border-radius: 20px;
background: red;
display:inline-block;
}
This is happening because you're floating #upper and #lower to the left. You'll need to clear the float on the parent container. This is often done using a clearfix class. Add the following class to your parent container.
.clearfix {
overflow: auto;
zoom: 1;
}
https://jsfiddle.net/xtaLfuLa/3/
learn more here: http://learnlayout.com/clearfix.html
Not clear what you are looking for(share image layout) but you need to write the code for responsive layout. Make it
#results{
margin-left:0;
}
for smaller device and add it for larger device with media query..
Here on this page I need to display the SPACIAL and RECOMMENDED section in in single line with horizontal-scroll.
My current css is
.box-product {
width: 100%;
overflow: auto;
}
I have tried like this
.box-product {
width: 100%;
height: 320px;
overflow-x: scroll;
overflow-y: hidden;
}
But it does not enable horizontal scroll, It still shows the vertical scroll.
Set width to .box-product equal to product width * product count. Nothing else.
Now, you have there width: 100%; (737px) and the default CSS behavior in this case is to break the content to another line. When you have there overflow: hidden, the second line is hidden.
Provide your box-product class width in pixel not in percentage. And than apply overflow:auto.
It will work.
Ex:
.box-product {
width: 100px;
overflow: auto;
}
And if you want only horizontal than add overflow-x:auto;
The easiest way to achieve this .box-product { width: max-content; } (modulo vendor prefixes).
Alternatively display: flex, since its children do not wrap by default.
Remove the width: 100% and make sure your content doesn't float.
I have a ul of imgs to create a side-scrolling gallery.
I'd like for the images' height to be constrained to the browser window and their width to resize in order to maintain their scale.
Even though I've specified a height for every containing element, the images with height:90%; are way bigger than the browser window. See the fiddle here: JSFiddle
What am I doing wrong here?
Additional info: If I set height: 90vh; on .gallery-image it looks pretty much exactly how I want it, but it feels like a hack and I'd like to understand why % isn't working.
I'm looking to achieve this functionality: example.
This might be what your looking for?
http://jsfiddle.net/jny0u3rc/11/
I simplified the code, this might not work if you have to have the images loaded in as list-items.
This specifies a container height of 100% and an image height of 90%. images are inline elements by default, so I set them to
white-space:nowrap and overflow:auto on the container.
The CSS:
.gallery {
height: 100%;
overflow: auto;
white-space:
nowrap; }
.gallery img{
margin: 20px 10px 0 0px;
height:90%
}
Is this what you're looking for? http://jsfiddle.net/jny0u3rc/8/
.gallery {
height: 100%;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
}
.gallery-list {
list-style: none;
margin-top: 15px;
margin-bottom: 0px;
height: 100%;
}
.gallery-listitem {
padding-top:0px;
padding-right: 10px;
height: 100%;
display:inline-block
}
.gallery-image {
height:90%;
width:auto;
}
There are two issues:
You forgot to add 100% height on the html and body elements
You are using display: table and display: table-cell. The 100% height technique does not work on table displays. Change this to display: block and display: inline-block and you will get the expected results.
(Heavily) Modified Fiddle
You can achieve what you want by adding a width to each image. Of course the width doesn't have to be static. You can add a width of 100% and then set the height to auto so the images scale.
For a span to take a height, it has to be inline-block.
For an element to serve as offset parent (against which percentage heights of children are computed), it has to have position set. This is quite basic CSS.
See jsfiddle.net/6xh6wbpL/2.
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/
I'm trying to put a lot of content in "Thickbox" (Javascript popup window) and it works almost fine but I can't make max-height: 100%; (relative to parent) and overflow-y: scroll; work.
There are two outcomes:
It is as long as it should be, without vertical scroll and it goes outside the box (far too much).
It is as long as it should be, with vertical scroll and it goes outside the box (a little bit).
I just want to have it inside the box, with vertical scroll and I don't want it to go outside the box. Once you'll take a look at JSFiddle you'll know what I mean: http://jsfiddle.net/m4aKk/ (best viewed on large screen - 1600px+). Any advices would be great!
Why height: 100%; or max-height: 100%; aren't relative to its parent?
A solution is to make the inner box position absolute. Something like this:
#TB_ajaxContent {
width: 440px;
overflow-x: hidden;
position: absolute;
top: 30px;
bottom: 10px;
}
This should make the inner div position the way you like it. Here's the updated fiddle - note I've removed height:auto; height:100% from the inlined style.
This is quite a common trick to get the inner div to 'be as tall as the parent'.
replace this line in your code:
<div id="TB_window" style="width: 470px; height: 100%; margin-left: -335px; top: 48px; margin-top: 0px; visibility: visible;">
just change height: 314px; to height: 100%; !!!