I'm working on a CSS template for a responsive %-based grid. I had it working with IE7 earlier and did something stupid, I guess, and now it's not working.
http://danmathisen.com/lightbase-css/
How it currently works:
Columns are percent based. So a 1/3 width column (.col-1-3) will be width:32% + margin-left:1% + padding:1%. This is heavily based on Chris Coyier's Don't Overthink It Grids.
In modern browsers, the padding doesn't affect the div width. But in IE7 it does. So I have IE classes (.lt-ie8) that accomodate for the 1% padding. .lt-ie8 .col-1-3 { width: 30%; }. So 30% width + 1% margin-left + 2% padding left/right * 3 - 1% :first-child = 100%. Right?
Why doesn't that work in IE7?
Solutions:
I can use behavior: url(/scripts/boxsizing.htc) but hope to make this workable without.
Or use JS to calculate the width then subtract 1px. I think that would work, but it's not ideal.
Or settle with 99% width. Also not ideal.
I'd love a CSS-only solution. Any thoughts?
I haven't tested this, but maybe you could try putting one div inside another, and have the padding or margins in the inner div? Something like this:
<div style="width:33%;padding:0;margin:0;">
<div style="padding:3%;margin:3%;">
Content here
</div>
</div>
Again, not sure if this will work, but it's worth a shot.
Related
I need to construct something like this: https://youtu.be/-pv77UW1w6g
But I'm facing problems to set div side by side with no space between them.
I made a wireframe to help to show my idea like the video above: https://dl.dropboxusercontent.com/u/9095670/multiple-divs.jpg
It's important to say that I'm using bootstrap and it's a responsive project. So, I don't want use fixed width or heigh (if possible) to do that. I've tried use display: inline, but I got many holes between them due the fixed min-height.
Thanks a lot for the help.
The issue lies in the fact that you markup likely has whitespace between the elements, the simplest way to avoid this is to set font-size: 0px; in the document body, then add a class to each child div that re-sets the font size back to whatever you want.
just do this:
<div class="wrap">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
</div>
http://codepen.io/damianocel/pen/PPEqJm
Ok here you go.
You can comment out the keyframes, but I have put a bit animation in it, your video made me:-).
To explain this...as you see, there is no height declaration on the divs, only on the main wrapper div. And on the img tags, for demo purposes.
As you can see the divs will adapt height to whatever content is placed in to them.
Same for the pictures, you make them the size you want.
With the flexbox layout as it is there, I make the divs being placed as column, i.e. vertically. There is a height declaration on the main div, this one you will need if you want to display it like this, but only this one, without a height on main div, flexbox would never create a next column, it would just stack them one over the next. This way, as soon the height is reached, it creates a new horizontal column. This would be possible in other ways as well and takes some understanding of the flexbox model, do look into it, i thinks it is the future of layout.
And you set a width on the children class, i set it to 30% here, for 3 rows(flex will still create a 4th,5th etc, but these would fall out of the wrap div, so, a bit calculation is needed on your part.
Play around with it and see what happens if you change the children class width, or put more/less text in it, careful with margin, margin is bit odd with flexbox, this is beyond the scope here though.
Do not be afraid when flexbox creates a new row, don't try to fix it with margins when it looks odd(new or od row having a gap etc, you will see what i mean).
And this will be fully responsive as it is.
* {
box-sizing: border-box;
}
#keyframes bro{
1% {transform: skew(5deg, 6deg);}
25% {transform: skew(10deg, 5deg);}
75% {transform: skew(15deg,9deg);}
90% {transform: rotate(720deg) scale(0.1);}
}
http://codepen.io/damianocel/pen/PPEqJm
If you have any question, ask anytime.
Thanks for all help, but I solved my problem with Masonry as hungerstar said. The Masonry is good if you're using Angular.js too.
I have a plunker to show: http://plnkr.co/edit/nGjdvrG27jNpQ3QTulMr?p=preview
I want the green area to fill the remaining available height. I can set div height:100% and get almost I want, but that is less than desirable.
Is there a way to do this with css? Do I need to do some sort of resizing via js?
I've set the following classes to height: 100% and it seems to work now:
.tabset, .tab-content, .tab-pane, .tabbable {
height:100%;
}
Updated Plunker
if you use flexbox layout you can do it this way:
override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'. Also modify the tab template.
See my solution:
Using flexbox layout with angular-ui tabs
The easiest way that I know is to set the height with vh units. They were introduced in CSS3
height: 100vh;
Updated plunker.
vh unit is setting the viewport height. I believe it's viewed as setting it to a % of the viewport, or visible screen. So simply changing 100% to 100vh gives you the desired outcome.
It seems like it's pretty widely used: http://caniuse.com/#search=vh. Just depends on who your audience base is I suppose.
In this responsive design I am trying for, I have three divs floating side-by-side, which get narrower and narrower when you zoom in on them. I would like them to keep their size and stack instead. How do I do this? I am beginning jquery, but for this would prefer to stick to css if possible.
Here is the relevant styling I have for the divs and their parent container div:
#container {
margin-left:auto;
margin-right:auto;
width:110%}
.floating-div {
width:27%;
min-width:27%;
height:420px;
float:left;}
Thanks for reading~
You would be better served using CSS and breakpoints on view ports to manage the display for your HTML:
CSS Tricks shows how to set up CSS for this purpose: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
From the code above, there needs to also be a max-width declaration so that as the element is zoomed, it will push the next div down on the page.
solved it. I changed width % to px for the floating div.
I need to make ui controls panel, that has 100% width and gradient background. UI elements on this control panel should have width 1000px and should be centered.
For a moment i have two elements:
panel (width 100%, gradient background), global wrapper
panel-wrapper (width 1000px, transparent background), is placed inside "panel" element, contains UI elements.
It works brilliant in all browsers i need, but i really don't like to use two HTML elements, when logically it should be just one. Perhaps it is possible to have one element "panel" with fixed width (1000px) and auto-padding, that will cover all free space to the left and to the right? (i've made an image to show it if my explanation is crazy :))
It is possible?
You could potentially use the calc() function, though it isn't highly browser compliant.
Here is a quick example and more information on compatibility and usage can be found here.
*I made the example in Firefox, didn't test it elsewhere.
Just for a quick code example, the following shows one solution:
div {
width: 100px;
background-color: blue;
height: 100px;
padding-left: calc(50% - 50px);
padding-right: calc(50% - 50px);
}
The challenge is you can't really combine percentages and fixed widths with padding in the traditional sense, since the padding is added to the total width.
If the total width is 100%, and you want the content in the center to be 500px, you can't calculate the padding.
With CC3, though, you can use the box-sizing to change 'where' the padding is placed in the box model.
http://www.css3.info/preview/box-sizing/
Alas, I still don't think that will give you want you want simply due to there still being an unknown variable in play (the width of the container that the 100% width object is in).
In the end, we can sometimes over think these solutions in the name of over-optimization. IN this case, an extra div seems perfectly acceptable and, likely, the proper solution.
Why padding ?
You could set left and right margins to auto and that would make the div centered..
So just set
.panel{
width:1000px;
margin:0 auto;
}
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}