What I want to accomplish is very similar to what the min-width attribute does for width values.
I want to be able to set a margin value by a percentage up to a point, and then switch over to a concrete predefined pixel value. So the margin would be margin-left: 20%; and then I would have a min-value: 100px.
Is this possible, and if not with CSS, what sorts of workarounds are there?
You can use media queries to achieve your goal.
If you have a div that takes up most of the screen, except for the 20% margin on the left, and you want that margin to be no less than 100px, then you can use a media query to set the margin to 100px when the frame width becomes less than 500px (20% of 500px is 100px).
If your HTML is this
<body>
<div class="left-margin">
My left margin is 20% unless that would become less than 100px, in which
case, my left margin would become 100px.
</div>
</body>
Then your CSS could look like this
body, html
{
margin: 0;
padding: 0;
}
.left-margin
{
margin-left: 20%;
}
#media screen and (max-width: 500px)
{
.left-margin
{
margin-left: 100px;
}
}
This basically means that everything inside the media query is only applied with frame widths of 500px or less. When the screen width becomes larger than 500px, the contents of the media query are ignored, and the margin becomes 20%.
http://jsfiddle.net/5g16xbtg/
Try stick an empty div with with width set by % and min-width by px. Just put in on before the element that you want to have a margin on. For example below.
<div style="position:relative; float:left; width:20%; min-width:100px">
<div style="position:relative; float:left; margin:0">
Related
I have this:
.buttm{
background: url('http://redshadow67.com/deepest/img/butts/divm.png') no-repeat center black;
width: 100px; text-align: center; color: #f5c324; font-size: 18px; margin: 0 auto; border: 0px;
}
but I want to make the width between 60 and 100 depending on the viewscreen. When I use a percentage it doesn't resize the image, and also I need the text to be a little smaller also. Not sure what to do??? thanks
Have you tried media queries?
#media only screen and (min-width: 1024px) {
// Your custom styles go here.
}
To scale the background-image, use the background-size property. Try the values contain (full image shown) and cover (image scaled to fill entire element).
For width and font-size, use #media queries. You might also want to look into viewport relative units:
1vh: 1% of viewport height
1vw: 1% of viewport height
1vmin: 1% of viewport height or width, whichever is smaller
1vmax: 1% of viewport height or width, whichever is larger
This is what I want
If browser is bigger than 900px I want the boxes to be 700px.
Once the browser width is smaller than 900px I want the boxes to be 600px.
#media screen and (min-width : 750px) and (max-width : 900px) {
.multiSelect .checkboxLayer {
width: 600px;
}
}
#media screen and (min-width: 900px) {
.multiSelect .checkboxLayer {
width: 700px;
}
}
My question is, how come the browser width splits around 932px and not 900px?
What units are these if not pixels?
I just tried to measure the browser width with photoshop and it splits at 975 px exactly.
So CSS says 900 px, Chrome says 932 px and photoshop says 975 px
This is really confusing?!?!
The short answer:
You have not reset the box-sizing property for the parent container.
The long answer:
Consider this:
In CSS, by default, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
There are two values in box-sizing that you should know about
content-box
[...] the default, and gives you the default CSS box-sizing behavior. If you
set an element's width to 100 pixels, then the element's content box
will be 100 pixels wide, and the width of any border or padding will
be added to the final rendered width.
border-box
[...] tells the browser to account for any border and padding in the
value you specify for width and height. If you set an element's width
to 100 pixels, that 100 pixels will include any border or padding you
added, and the content box will shrink to absorb that extra width.
This typically makes it much easier to size elements.
I usually start any CSS sheet with the following to avoid such issues
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
There are many frameworks that reset more of the default properties such as normalize.css but I often don't have the need to use them.
I set up a demo below. There are two div elements. There is also a media query.
Both elements have the same fixed width in px. The only difference is the value for the box-sizing
The first is set to border-box and the second is set to content-box
div {
width: 400px;
height: 400px;
margin: 3em;
text-align: center;
background: darkred;
border: 20px solid #131418
}
#media (max-width: 800px) {
div {
background: darkgreen;
width: 300px;
}
}
.first {
box-sizing: border-box
}
.second {
box-sizing: content-box
}
<div class="first"></div>
<div class="second"></div>
Notice how they render with different sizes even when the width for both is the same?
Scroll bar width is 17px on most browsers, and does not contribute to the screen width. Try using Firefox's responsive design mode, in the dev tools.
I had my main div set with
max-width:600px;
However, when the content is not long enough that div will resize to the length of the content. Which makes sense.
So Instead I declared:
width:600px;
max-width:600px;
But now the div won't resize down when you resizing the window. I tried setting the min-width:
min-width:200px;
width:600px;
max-width:600px;
But it still won't resize down passed 600px (on window resize);
So what am I missing? Can I use all 3 width settings together? (min-width,width,max-width)?
If so, how? I am trying to understand the logic.
I want the content to stretch up to 600px, but also resize down on windows resize.
I think you want
width: 600px;
max-width: 100%;
This way, the element will attempt to have a width of 600px. But if the parent isn't wide enough, it will be less.
Demo
Just take out the "width: 600px" The div will be 600 px if the browser window is large enough, otherwise it will adjust down to your min width if the browser window is smaller than 600px.
You could use media queries to apply a width for certain screen sizes
.div {
width: 600px;
}
#media screen and (max-width 600px) {
.div {
width: 100%;
}
}
What I am trying to do is, putting two divs in one line, the left div's width is fixed and the right one, gets resized when the browser is resized (achieved already). What I want to achieve is, set a resize limit for the right div, that is, the right div width decreases until the width is greater or equal to n px. after that the browser horizontal scroll.
(The reason for this is I have got a jquery tab on the right div with like 5 tabs, when I resize the browser the tabs jumps off on button of each other, hence I want to stop the right div to shrink until the last tab).
here is my code so far:
<div style="float: left; width: 300px; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
Please let me know if there is a better way of putting two div in one line (left width fixed and right resizable with limit).
Cheers,
You'll either be looking at min-width/max-width, or #media
For min-width just give a class or id to div2 and set min-width
#div2{
min-width:900px;
}
For control on different screen sizes use #media and set max/min widths.
#media only screen and (max-width: 499px) {
/* rules that only apply for canvases narrower than 500px */
}
#media only screen and (min-width: 500px) {
/* rules that only apply for canvases wider than 500px */
}
There's more information here: https://mislav.net/2010/04/targeted-css/
Try:
<div class='left'></div>
<div class='right'></div>
<styles>
.left {
float: left;
margin-right: 10px;
width: 300px;
}
.right {
float: left;
max-width: 300px;
overflow-x: auto;
}
</styles>
I have <div> block, that have some fixed width. Sidebars stretch until their width reach some value. Then block should stretch instead of sidebars. How can I implement this in CSS?
"Sidebars" are just <div>'s margin (space).
Solution:
div
{
/* Left and right margin stretch from zero to infinity */
margin:0 auto;
/* 2em is minimal side width */
padding: 0 2em;
/* Expected width */
max-width: 640px;
/* Minimal width */
min-width: 320px;
}
I think you're looking for the min-width property: http://www.w3schools.com/CSS/pr_dim_min-width.asp. Or max-width: http://www.w3schools.com/css/pr_dim_max-width.asp.
However this doesn't have full support in all browsers.
One way would be to surround all the <div>'s in a larger div's which is a total size of all of them, then perhaps impose a min-width on all three. But Internet Explorer doesn't work well with this.