How to make a div have a fixed size? - css

I made a site so when you click the button 30px it changes the font inside the div.
I have a ul inside it with the bottons. When I change the size of font the div expands and the nav buttons move with it as well.
How do i make it so it stays fixed but the fonts can still change.

Try the following css:
#innerbox
{
width:250px; /* or whatever width you want. */
max-width:250px; /* or whatever width you want. */
display: inline-block;
}
This makes the div take as little space as possible, and its width is defined by the css.
// Expanded answer
To make the buttons fixed widths do the following :
#innerbox input
{
width:150px; /* or whatever width you want. */
max-width:150px; /* or whatever width you want. */
}
However, you should be aware that as the size of the text changes, so does the space needed to display it. As such, it's natural that the containers need to expand. You should perhaps review what you are trying to do; and maybe have some predefined classes that you alter on the fly using javascript to ensure the content placement is perfect.

you can give it a max-height and max-width in your .css
.fontpixel{max-width:200px; max-height:200px;}
in addition to your height and width properties

Thats the natural behavior of the buttons. You could try putting a max-width/max-height on the parent container, but I'm not sure if that would do it.
max-width:something px;
max-height:something px;
The other option would be to use the devlopr tools and see if you can remove the natural padding.
padding: 0;

<div>
<img src="whatever it is" class="image-crop">
</div>
/*mobile code*/
.image-crop{
width:100%;
max-height: auto;
}
/*desktop code*/
#media screen and (min-width: 640px) {
.image-crop{
width:100%;
max-height: 140px;
}

Use this style
<div class="form-control"
style="height:100px;
width:55%;
overflow:hidden;
cursor:pointer">
</div>

<div class="ai">a b c d e f</div> // something like ~100px
<div class="ai">a b c d e</div> // ~80
<div class="ai">a b c d</div> // ~60
<script>
function _reWidthAll_div(classname) {
var _maxwidth = 0;
$(classname).each(function(){
var _width = $(this).width();
_maxwidth = (_width >= _maxwidth) ? _width : _maxwidth; // define max width
});
$(classname).width(_maxwidth); // return all div same width
}
_reWidthAll_div('.ai');
</script>

Related

CSS - Fill remaining height (dynamic content)

<div id="header">
<div>My</div>
<div>Header</div>
</div>
<div id="content"></div>
In the above markup, how can I get the content to fill the rest of the screen (no-scrolling)?
I know how to do this with absolute positions if the header was of a fixed height, but my header's height is dynamically set by its contents (so the site is responsive on mobile devices.)
Btw: I'm looking for a CSS only solution, because I think JavaScript is not made for this kind of task.
Thanks a lot,
The simpliest way is to draw the background in body and keep #content translucide. DEMO 1.
This way, you do not mind #header nor #content heights.
If you do not mind about IE7 and less, then display:table/table-row/table-cell taken from defaut display of HTML table elements can be what you need , in the case header has unknown height. DEMO 2
Your structure will need a bit of update in order to act as wished and to avoid gaps in layout render from header part to the content part.
If you reset display to be used as table properties, it will do so and can draw cols and rows.
Since it is only the row properties that will be usefull, Structure must be rendering as one single col and multiple rows.
Basic structure needs to turn this way :
<div id="header" class="row">
<div class="single">
<div>My</div>
<div>Header than can grow</div>
</div>
</div>
<div id="content" class="row">
<div class="single">
<p>My Content that will fill remaining space untill page has to scroll</p>
</div>
</div>
And basic CSS turns this way :
html, body {
height:100%;
width:100%;
margin:0;
}
body {
display:table;/* it will allow to grow over initial width specified */
/* table-layout:fixed; only if you want to control width within value specified*/
background:#edc;
}
.row {
display:table-row;/* we want these elements to stack on top of each other, not to become cells aside each other */
}
.single {
display:table-cell;/* this 'buffer' element is used to avoid layout to turn into multiple cols */
}
#content {
height:100%;/* since layout is the one taken from table properties, it means fill all space avalaible that #header doesn't use */
background:#cde;
}
In the case, *#header has a known*** height, it can be set in fixed or absolute position.
#content can be 100% height DEMO 3, better: min-height:100%; DEMO 4
display:flex could be useful too but for real young browser only :).
Example with display:flex;
html {
height:100%;
}
body {
margin:0;
min-height:100%;
background:#edc;
display:flex;
flex-direction:column;
}
#header {
/* nothing needed here */
}
#content {
flex:1;/* since it is the only one getting a flex attitude, it will fill up all space avalaible*/
background:yellow;
}

display: inline-block with alternate flows at low media width

inline-block is the awesomest CSS tag ever. (That mean I only learned how it works last night. But then I threw away dozens of lines of HTML in preference to it.) It lets blocks reflow!
How do we write a banner that collapses into a different order when the screen is too small?
Big screen
[ A ][ B ][ C ]
Small screen?
[ C ]
[ B ]
[ A ]
You'll need some HTML and CSS trickery for the order switching, and then you could simply use media queries, with e.g.:
Demo Fiddle
HTML
<div>D</div>
<div>C</div>
<div>B</div>
<div>A</div>
CSS
div{
display:inline-block;
width:50px;
box-sizing:border-box;
height:50px;
width:25%;
border:1px solid black;
float:right;
}
#media (max-width: 700px) {
div {
display:block;
width:100%;
}
}
By having the elements in reverse order, then using float:right in your CSS, it places them in the order you anticipate- which is then ignored when they are given 100% width on screen resize- so they appear in the DOM (reverse) order.
Tx to whoever first mentioned 'flex'. I still like my previous float: solution, and SW4's will also work - IF you can find a way to float the divs together. But it's flex that allows you to re-order things.
Furtherless, #media & similar systems (such as 50%), reference the current page size (probably A4), not the current window size. I want to be so responsive that we behave like the mobile app, even if we're just a generic browser that someone scrunched up. So we need JS - the arch-nemesis of CSS - to trigger the changes.
The trick is display: flex; enables order:N;. That means switching the container to display: inline-block; will turn on document-order:
<script>
function resizeMe(win) {
var size = $(window).width();
var display = size > 600 ? 'inline-flex' : 'inline-block';
$('#flexMe').css({ display: display });
}
$(window).bind('resize', resizeMe);
$(window).bind('load', resizeMe);
</script>
<div id="flexMe" style="display: flex; width: 100%;" >
<div id="hdrLogo" class="hdrLogo hdrNv" style="order: 3; width: 375px;" >
Logo goes here
</div>
<div id="hdrAuth" class="hdrNv" style="order: 2; width: 375px;">
Login stuff goes here
</div>
<div id="hdrNavBar" class="hdrNv" style="order: 1; width: 375px;">
Record navigator goes here
</div>
</div>
That way the Record Navigator is either upper left, or closest to the records, and the Logo is either upper right, or farthest from the records.

How to making full height on every screen for section or div inside body?

Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents
i need both has full-height has to come to bottom of the screen even there is very low contents.
now it looks like
here my fiddle
demo
moreover i tried full height for body and html to
body, html{
height:100%;
}
(relevant) HTML:
<div class="wrapper">
<div class="left">
<!-- stuff -->
</div>
<div class="spacer"></div>
<div class="right">
<!-- stuff -->
</div>
</div>
(relevant) CSS:
body, html {
height : 100%;
}
.wrapper {
width : 600px;
display : table;
margin : 0 auto;
height : 100%;
}
.left, .right {
display : table-cell;
}
.left {
width : 30%;
}
.right {
width : 65%;
}
.spacer {
display : table-cell;
background : transparent;
width : 5%;
}
Running Demo
I used normalized.css to reset the styles and avoid the default margins otherwise applied to the display: table; div. Try removing it on the demo (External Resources menu on the left) to see what I mean.
Take a look here to read something else on CSS Resets.
EDIT: added the transparent spacer.
Use :
display: table-cell
Here's the result:
http://jsfiddle.net/GhxQL/6/
You've got the right CSS in your fiddle; you just have some errors in the code.
Make sure your lines of CSS end in ; instead of : – there are a few lines in which you have colons instead of semicolons. And change your first line from htm, body to html, body.
Updated fiddle: http://jsfiddle.net/hqkVh/7/
Ok Let's make the equation HARDER !!
so if you have RESPONSIVE WEB DESIGN and WANT TO USE BOTH HEIGHT and MIN-HEIGHT and also Height All the Time 100% What's THEN ?
if you use HEIGHT 100%, u cant handle All of the content of your columns, It's obvious by resizing the browser the Height is 100% and the content dont show completely
You might wanna CHECK THIS SOLUTION from my own question, the MIN-HEIGHT Solution
PLEASE CONSIDER THESE QUESTIONS ARE NOT DIFFERENT JUST THE WAY OF ASKING IS DIFFERENT
I suggest Use Min-Height 100% and Height Auto

How to scale images to the size of an existing div while you change them dynamically with onClick?

What I am trying to do is the following.
I have a list of hidden images.
I have a button activated with Jquery onclick that replaces the html of a div to include the images
The button functions as a cycle button and gets a big list of images.
My problem is that the images do not scale to the size of the parent div. Even if I give them a .horizontal and .vertical class
Any ideas?
I want to keep the format of the hidden list of images inside a div because i do some other things with the lists. I originally thought that by having two classes for the images it will work and now that I am finishing I realised that the whole idea has a problem !
http://jsfiddle.net/alexnode/ttQHt/
HTML
<div id="artdiv2">
<div id="artslide1nextbutton">></div>
<div id="artslide1"></div>
</div>
<div class="hidden">
<div id="1slide1">
<img class="horizontal" src="http://farm8.staticflickr.com/7366/9160515864_7dc851a598.jpg" alt="Rezando a los antiguos Dioses - Praying to the old Gods">
</div>
<div id="1slide2">
<img class="vertical" src="http://farm6.staticflickr.com/5519/9158661396_4828a06655.jpg" alt="Drain">
</div>
</div>
Jquery
//i get everything called 1slide like that.
var artslides = $('[id^=1slide]');
idxs1 = 1;
//this is my button that cycles through the image
$("#artslide1nextbutton").on(
"click", function () {
$("#artslide1").html(artslides.eq(idxs1).html());
idxs1 = idxs1 == 1? 0 : idxs1 + 1;
});
CSS
.hidden{display:none;}
#artdiv2{ position:absolute; top:8%; left: 20%; height:70%; width:100%; background:DimGray;}
#artslide1nextbutton{position:fixed; top:0px; left: 0px; height:auto; width:10%; background:DarkRed;pointer:cursor;}
.horizontal {position:relative; width:100%; height:auto;}
.vertical {position:relative; height:100%; width:auto;}
EDIT : answer updated to fit closer to question.:
you could play width min and max value and center img with text-align:center.
demo
http://jsfiddle.net/ttQHt/2/
#artslide1 {
width:100%;
overflow:hidden;
height:100%;
text-align:center;
}
#artslide1 img {
min-height:100%;
max-width:100%;
}
Some other option to play with image
here is an idea of what happens if you can set line-height. http://codepen.io/gcyrillus/pen/BdtEj and adding min-width/min-height http://codepen.io/anon/pen/kfIbp
Use the JQuery variable .height() and .width()
I'm on mobile, so I can't try this myself, but what about putting a width and height attribute directly on the image elements, and using the button to just change the image source? That would make every image have the same width and height.

What's keeping my input element from displaying like a block element?

http://jsfiddle.net/aam7J/
How would I induce div-like behaviour on the input element? Specifically, how can I induce the width to expand such that its outer width including margin fills up the container? width: 100% doesn't work, because it doesn't take into account the other box model attributes.
I use a "hack" to account for the input border width something like this...
<div>hello world</div>
​
<div class="adjustForTheInputBorder">
<input type="text" />
</div>
input
{
width:100%;
border-width:2px;
}
div.adjustForTheInputBorder
{
margin-right: 4px; /* or 2x whatever your input border width is */
}
div
{
background-color: pink;
}
My adjustForTheInputBorder class tends to have a name which more appropriately conveys my hatred of css though... :)
P.S. div renders as display:block by default, you don't need that there.

Resources