I have different size images in my list items That are causing tiles to be pushed below in an odd way. What is the best way to have different size images (taller ones) fit in the container and have the container the same size and fluidly respond down? I have used a vw as the height on the image which sets the tiles to be the same size, but causes the images themselves to squish, but is this the best way? uncomment the vw in the example to see.
Code Pen: http://codepen.io/anon/pen/NNOWOZ
CSS:
ul{
overflow:hidden;
width:50%;
}
li{
list-style:none;
float:left;
margin:2% 1%;
border:1px solid black;
width:22%;
}
li img{
width:100%;
/*height:10vw;*/
}
As you have noticed, float:left may not provide provide desirable results when the elements are different heights. In your example, they are all the same width, but various heights.
Since all your elements are percentage width, you know that no matter what the container size, there will only be 4 elements that fit on each row, so the following css solves your problem in this example
li:nth-child(4n+1) { clear: left; }
Other options which work better when the number of elements per row varies
Replacing float:left with display:inline-block will give you more of a clean wrap effect, but the images will then be bottom-aligned instead of top-aligned as they are now.
Fit them into squares, making your lis to have the same width and height, and then place images inside with max-width: 100%; max-height: 100%. This will force a certain height thereby solving the float problem.
You may prefer to use background-image, with background-size: cover if you would like the images cropped into a square as many smartphone gallery apps would do. This doesn't work well for all use cases. Also background images won't print by default.
If you go this route, you can center the image vertically as well.
Use JavaScript which gives you unlimited flexibility but requires more work.
Related
I was searching around for a way to vertically center a div in a container. I found a few different ways, but all of them seemed to be very "hacky".
My question is, why is there not just a css property, such as align-vertical that can simply be set to center to center the content? It seems like adding this to css would make so many things much easier.
I am assuming there must be a reason why something like this is not implemented, and I would like to hear if anyone has any idea why.
It's because how browsers traditionally work.
In a browser, by default, the content scrolls vertically. The viewport width is well defined (width of the device), but the viewport height can be one or two times the height of the device, or can even be infinite (as in infinite scrolling).
Traditionally blocks were meant to be horizontally oriented. You place a div and it's automatically occupying 100% of the width of the parent. But its height value is contrained to its content.
If you do
.mydiv {
background: red;
width: 100%;
height: 100%
}
Nothing changes, since divs have already 100% of width, and it can't calculate the height, since it doesn't know how far the viewport will go. You need to add:
html, body {
height: 100%;
}
to tell the browser to use the device height as the 100% value.
That's why horizontal center is easy: you know what the boundaries are, and how to center the element. But vertical center is more complicated, that's why (before flexbox), you need to resort to absolute positioning or hacks.
Flexbox allows you to render content horizontally or vertically, so it's prepared to handle centering along two axes.
If you want to read more about this, I suggest the spec:
Visual formatting model
Visual formatting model details
#outerDiv{
display:flex;
width:100%;
height:200px;
background:#ccc;
align-items:center;
}
#innerDiv {
background:#aaa;
width:80%;
margin:0 auto;
}
<div id="outerDiv"><div id="innerDiv">Hello</h1></div>
Run the script and the div remain in the center.
You can mix and match the combination like this.
Earlier you need to play with the height of the parent container and self height.
But with flex it becomes easy.
If I'm trying to center an element I do the following -
*parent-item {
margin: 0 auto;
width: 100%;
display: block;
It's important to define the width of the element you are centering.
I'm trying to understand the case with responsive divs but I've got one problem.
As long as whole stuff is about 100% div's width it's not a big deal. But I find it difficult to add some additional features.
Here's my tiny fiddle:
[https://jsfiddle.net/yqh31d7v/][1]
The effect I'd like to gain is to fix sidebar's width (unless I define it to not) and shrink only blue div maintaing fixed margin-left at 20px.
I was trying to set width with % but it is not holding correct margin-left all the time.
So no matter what the browser width is I want to keep 300px sidebar width 20px margin left and keep blue div responsive from 0 to 700px.
P.S. I've checked some previous topics including ie. this fiddle
[http://jsfiddle.net/FXk4x/10/][2]
But adding left:20px; or margin-left:20px doesn't work.
Thanks in advance.
You currently have this css at the bottom:
#media screen and (max-width: 850px) {
#sidebar {
float:left;
margin-left:0px;
width:300px;
}
}
This is telling the browser that if the window is 850px or less then apply these rules (margin-left:0px;). So your css is working, but your viewing in the wrong screen widths to see the margin-left:20px; occur. Check these two examples:
Your exact code but in full screen (you will see the 20px margin if your screen width is higher than 850px):
https://jsfiddle.net/yqh31d7v/embedded/result/
Using a max width of 50px for the media query:
https://jsfiddle.net/yqh31d7v/1/
Ok, I have figured it out.
If you want to mix fixed and responsive floating divs you need to change position of fixed one to absolute.
I'ce updated the previous fiddle, it's more or less like this:
[https://jsfiddle.net/yqh31d7v/][1]
I am designing a website with two floating columns which I want to fill the whole screen.
#column_main{
position:relative;
background:#ffffff;
float:left;
width:70%;
height:auto;
min-height:550px;
}
#column_side{
position:relative;
background:#dbdada;
float:left;
width:30%;
height:auto;
min-height:550px;
}
if I had the line below to #column_main
border-left:solid 1px #c0c1c4;
The float messes up and they are no longer side by side.
In IE I have been able to fix the problem by setting the #column_main width to auto and it fills the rest of the page. This doesn't work in firefox and I have tried reducing the percentage slightly but that leaves a gap between the #column_main and the right edge of the page. Is there a way to have the 1px border on the left and make the float fill the remainder of the screen.
The float no longer works because of the box model where the border is added to the width instead of included in the width, you have already used up 100% of the width by doing width:70% and width: 30%.
If you plan on applying a border you might want to apply it to a child element inside one of the wrapping floated columns and use those parent columns only as a grid system to structure your other content.
Alternatively try bootstrap grids
add box-sizing: border-box; to #column_main
This property basically says you want the box size to apply to the border and everything inside it.
This blog post explains this, and some other options to fix this particular problem.
I'm working on a website where disabled access is one of the primary requirements. To do this, I've implemented a Javascript font size increase/decrease function that works great.
However, the div element where the resized text resides changes height based on the text size while everything else stays the same. Width doesn't change, but the height property set to 100% makes no difference. What changes to the CSS are necessary to keep the height fixed? so the footer content as well as the content element background stay the same?
This is the container element where all other divs are nested inside:
#container{
width:1000px;
height:100%;
background-color:#FEFFF1;
margin: 0 auto;
margin-top:5px;
text-align: left;
font-size:1.4em;
border: 1px dotted black;
overflow:scroll;
}
This is the content element, where the page-unique content goes:
#content{
float:left;
margin-top: 223px;
margin-left:250px;
height:100%;
width: 70%;
overflow:auto;
padding-bottom:120px;
position:relative;
}
EDIT changed container overflow value to scroll, where it should have been originally.
If you don't allow the containers that hold the text to expand with the text, then what's the point of letting people resize the text?
Note that text-size is not an issue for 'disabled' people. It's an issue for everyone. On the plus side, we're finally at the point where browsers are adding this as a much more usable and findable feature than in the past. As such, writing your own JS based text-resizing widgets isn't as big of a deal as it once was.
To answer your specific question, height, in CSS, refers to the height of the page (at the outer level) or whatever container it is nested within. It will exceed said height if need be if the contents overflows, unless you provide an overflow value of SCROLL or HIDDEN, which, again, defeats the purpose of the font resizing. Your best bet is to make sure your page design/layout can handle variable font sizes.
Just specify a fixed height instead of a percentage. As in
so the past days i tried to achieve the following:
the idea being to have a div (red) that is ultimately centered (using margin:auto;), and on the same level (x-axis) another div that has a fixed size (blue).
on a huge enough display, maximized, it looks great.
now the fun part is when having a smaller screen and/or resizing the window. because of the auto margin, one of the divs overlaps the other:
this is what i want to prevent. (in explanation: red being the menu, blue being the logo)
so the first idea was to shift the red div the needed pixels of the blue div to the right, using padding-left:??px;
but that makes the red div no longer center itself absolutely, but padded ??px to the right. figuratively centered in an extra box (grey).
second idea being to create another (transparent) div on the right of the red div. but that makes the min-width of the whole site become out of bound:
in other words: the scroll bar becomes visible far to early. it's ought to appear just when the window is smaller than the sum of pixels of the red and blue div together. and not, like in img 4, where it appears just when the window is smaller than the sum of pixels of the red div and both divs right and left from it).
so what i want is that:
two divs, not overlapping (even when resizing), the right one at a fixed size, the left one in the center of the window, whithout creating a ghost div, creating blank space on low resolutions.
oh and please no javascript, if possible.
i hope my explanations helped a bit getting my idea.
and i furthermore hope someone with a great idea or with an overlooked feature can help me out.
I take it back... it's marginally possible... with a lot of hackish coding...
http://jsfiddle.net/7myd4/2/
http://jsfiddle.net/7myd4/2/show
There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P
EDIT:
looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.
I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)
HTML
<div class="firstdiv"></div>
<div class="seconddiv">
<div class="innerdiv"></div>
</div>
CSS
body{
padding:10px 0px;
}
.firstdiv {
background-color:#ddd;
position:fixed;
left:0px;
width:200px;
height:200px;
}
.seconddiv {
margin:0 auto;
width:300px;
height:150px;
padding-left:400px;
position:relative;
left:-200px;
}
.innerdiv {
background-color:#ccc;
width:300px;
height:150px;
}
Demo: http://jsfiddle.net/7myd4/55/show
Source: http://jsfiddle.net/7myd4/55/
use Javascript to change the width of the div based on the window width. or use css stacks to check the max-width of the screen and have css for that size.
http://api.jquery.com/width/
http://api.jquery.com/resize/
or check out this stack.
How to dynamically change image/div dimensions based on window size?