I've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
Related
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.
First off let me assure you I've searched and tried so many solutions to this seemingly simple layout without success.
For now I've had to resort to laying it out with display:table, but would very much prefer a non-script, pure CSS solution using divs.
What I need is a basic 2-column layout: A sidebar div hugging the top-left and a content wrapper div to the right of the sidebar.
The sidebar will contain 3-4 divs, the content wrapper 1 div.
The kicker is I need the background of the sidebar and content wrapper always to fill 100% height of the viewport - even if there's no content inside the content wrapper div.
If there's content inside the content wrapper div, the background of both the sidebar and content wrapper should expand vertically to fill the viewport.
The fiddle below does exactly this. The problem with this approach (using position:fixed on the sidebar) occurs once you start "zooming" on mobile devices. The content will then disappear behind the fixed div.
Any advice on how to best achieve this layout?
Fiddle: http://jsfiddle.net/mnorup/2Xvdn/1
I think I got something quite close to what you want: http://jsfiddle.net/2Xvdn/5/
What I changed:
added a wrapper having the id outside and added the following css to it: {
overflow: hidden;
min-height: 100%;
}
replaced the css for sidebar by {
background: yellow;
width: 230px;
float: left;
margin-bottom: -9999em;
padding-bottom: 9999em;
}
removed min-height for contentwrap and added the following css: { margin-bottom: -9999em;
padding-bottom: 9999em;
}
Here are some other approaches to have columns with equal heights: http://www.vanseodesign.com/css/equal-height-columns/ I used the here described Borders and Negative Margins, just that I used padding instead of borders.
Is this doable for you? FIDDLE
I just changed a width and floated.
CSS
#sidebar {
height: 100%;
background: yellow;
width: 230px;
border: 0px solid transparent;
float: left;
}
#contentwrap {
min-height: 100%;
background: blue;
float: left;
margin-left:10px;
OK, see if this is closer. FIDDLE
The container for the text is the container for everything, and as it expands, so will the bar on the left.
Smaller contents so you can see the background - FIDDLE
I'm working on a responsive wordpress theme but I have little problem. My page includes several boxes that are displayed side by side. Each box has a responsive height and width and contains an image and text(text is overlaid on the image).
Is there a way to set all boxes to the same height considering the correct aspect ratio(image)? Also if some boxes don't contain an image?
Live-Preview: http://apu.sh/3ne
JsFiddle http://jsfiddle.net/tjwHk/
My suggestion for your case is to fix all the boxes width & height to a value of your preference.
then, give a max-width & max-height of 100% to the image. causing it to never overflow the parent div [box] without losing the aspect ratio of the image. (if you'll try to do this with width & height you will lose the ratio)
Edit: padding:none; is not valid. use padding:0; instead
So, to summarize, change this in your CSS:
#custom-list .custom-list-element
{
width: 50%;
height: 200px; /* fix any height you want*/
float: left;
background-color: #333333;
text-align: center; /*so the image will always be centered in the div*/
position: relative;
}
#custom-list .custom-list-element img
{
max-width: 100%; /* the width never overflow the div*/
max-height: 100%; /* the height never overflow the div*/
}
#custom-list .custom-list-element article p
{
padding: 0; /* valid value */
}
#custom-list .custom-list-element article h1
{
color: #fff;
padding: 0; /* valid value */
font-size: 1.5em;
}
and finally, because I like Fiddles so much.. http://jsfiddle.net/avrahamcool/tjwHk/1/
I have several divs inside another div (let's call it container) and I was wondering if it possible to extend the width of a child div to go beyond the width of the container div.
It's easier to explain if you could take a look at this jsfiddle.
Currently, the container div has the width of 80% and so do all the child divs. I want to extend the width of the first div to 100% so that it completely fills the page horizontally.
How would I achieve this?
By the way, the reason I want to do this because I use the grid structure provided by this and it requires that eveything must be included inside a container div in order to get the features provided by the structure.
EDIT: I just realized the width of the container div is specified in px, and not in % as in the jsfiddle example. So setting the width of the child div to 120% does not guarantee to fill the page horizontally. How should I approach my problem? The only way I can think of right now is to get the width of screen in px, but I don't think that is possible in CSS.
I wouldn't do this but it seems to work:
#greendiv {
width:120%;
margin-left:-10%;
background-color: green;
}
See the Fiddle.
Why can't the #greendiv be before the .container or some other wrapper div?
Edit. Turn you thinking upside down (not really, just make a custom container inside mandatory container, here the .yellowdivs are custom containers and the #greendiv is the full width container inside container):
.container {
width: 100%;//or some amount of pixels and the yellow divs follow that setting
margin: 0px auto;
}
.yellowdiv {
width:80%;
margin-left:10%;
border: solid 1px;
background-color: yellow;
}
#greendiv {
background-color: green;
}
See the Fiddle.
If the parent container is centrally-aligned, you can use negative margins on both left and right sides:
#greendiv {
background-color: green;
margin: 0 -12.5%;
}
See fiddle here - http://jsfiddle.net/CtsTQ/12/
Add overflow:visible to your parent div which is .container.
.container {
width: 80%;
margin: 0px auto;
overflow:visible;
}
#greendiv {
background-color: green;
width:500px;
}
LIVE DEMO
Well I got what you asked for by doing this:
#greendiv {
background-color: green;
width: 140%;
margin-left: -20%;
}
But this is not a good practice I think...
Its usually not a good idea to extend stuff beyond wrapper containers but if I had to do it I would most definitely use relative positioning like this.
#greendiv {
position:relative;
left:-10%;
width:120%;
background-color: green;
}
You could also use other units like px to achieve more precise results.
I have a header and a content div inside a container div. I want the header's height to be fixed and the content div to occupy the rest of the container div. The easy solution is to set the height of the content div as (container-header) pixels. Is there an alternate way of doing it ?
div.container { height: 300px; width: 100%;}
div.container h2 { height: 15px }
div.container div.content { height: ?? }
I do not believe you can do this with simple CSS. However, it is trivial to implement when using a CSS preprocessor like LESS or Sass. Both less and sass have support for variables, so you can do something like this:
#total-height: 300px;
#h2-height: 15px;
div.container { height: #total-height; width: 100%;}
div.container h2 { height: #h2-height}
div.container div.content { height: #total-height - #h2 }
Note: I have not compiled / tested this code. But you get the idea.
In the first place, you don't need to set the div.container's width to 100%. You get that for free.
Second, if you have a fixed height for the container, it's simple arithmetic to subtract the header (15px) from the container (300px). Simple is good.
If your container's height is not fixed, you can try absolute or relative positioning to nail the bottom of the content div to the bottom of the parent (e.g., bottom: 0px). But you apparently have no need of that here.