I have one line (div tag with class is col-xs-6) with 2 columns of the same width. Inside each column, there is one auto-resizing button with the max width is 150px depends on the length of the text inside. SO I input the very long text inside the buttons so they got the same max width, that is 150px. Then I auto resize the window to xs viewport, until one size (I think the width of the window is smaller than 300px plus padding) then the buttons overlay on each other.
input[type="submit"] {
position: relative;
min-height: 34px;
margin: 0 auto;
min-width: 80px;
max-width: 150px;
padding: 0 10px;
width: auto;
display: block;
border-radius: 5px;
background-color: #ff7900;
color: white;
border: 1px solid #ff7900;
}
.nf-filler-control input[type="submit"] {
display: inline-block !important;
}
.nf-button {
display: inline-block;
position: relative;
color: white;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div>
<div style="background:green;" class="col-xs-6">
<div>
<div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button">
<input type="submit" value="As he crossed tosssss sxcffffxxx" />
</div>
</div>
</div>
<div style="background:red;" class="nf-col col-xs-6">
<div>
<div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button">
<input type="submit" value="As he crossed tosssss sxcffffxxx" />
</div>
</div>
</d
The problem is: Currently, the div tag auto resize but the buttons keep the same width (they don't auto resize along with the parent div tag). So they overflow outside parent div tags and overlay on each other.
What I expect here is:
Solution 1: when I auto resize the window, the div tag auto resize but the buttons still keep the same width so to one point, there is no enough space for both so it should break into 2 lines (one button on each line)
Solution 2: when I auto resize the window, the div tag auto resize then the button auto resize (they should always be inside the div tag, not overflow)
Below is my code in fiddle
https://jsfiddle.net/toy56gyf/2/
The reason why it won't re-size is because they have a static width and height, due to the fact that you used pixels as the format. Change everything you have with px to vw and vh. Also you should add top: 0px; left: 0px; position absolute; to the css and then move it around with Transform: translate(0-100vw, 0-100 vh);
This will ensure that it does not move around, and that it re-size properly :-)
Related
If I use overflow-y = scroll; property, the texts are scrolled vertically as usual. But again If I use overflow-x = scroll; property, I see in the browser that the box shows the left and right arrow. Well, but I can't scroll left or right dimension or more specifically to say horizontally. The text still scrolled vertically. Why the text isn't scrolled horizontally in this case???
/* Here is the example of overflow property */
.box {
height: 100px;
width: 200px;
border: 4px solid green;
overflow-x: scroll;
}
.box {
height: 100px;
width: 200px;
border: 4px solid green;
overflow-y: scroll;
}
From the MDN docs,
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
In your example, the content is NOT overflowing the edges and simple wrapping to the next line. This is because you probably have simple text in your container and the normal value for word-wrap property for text is normal (which "Break words only at allowed break points"). So the text just wraps.
If, for example, you had a div inside that was exceeding the width of this container - then your overflow property would kick in. Alternatively, if your text inside was a single continuous string with no spaces (hence not allowed to wrap with normal) with a width greater than the width the parent, the scrollbar would be visible.
I added some examples below to demonstrate this:
.box {
border: 1px solid black;
height: 200px;
width: 100px;
margin: 10px;
font-family: sans-serif;
display: inline-block;
}
.long-box {
width: 300px;
}
.scroll-x {
overflow-x: scroll;
}
.word-wrap {
word-wrap: break-word;
}
<!--
Doesnot scroll,
width adheres to left/right edges
-->
<div class='box scroll-x'>
<b>Will not scroll</b>
Scroll X with content less than width
</div>
<!--
Will not scroll,
because of the really long word,
and since `word-wrap` by default is `normal` so the content overflows
-->
<div class='box scroll-x'>
<b>Will scroll</b>
Scroll X with content greater than width
LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>
<!--
Will not scroll
because this now has `word-wrap` set to `break-word`-->
<div class='box scroll-x word-wrap'>
<b>Will not scroll</b>
Scroll X with content greater than width but with word wrap
LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>
<!--
Will scroll,
because of the div inside,
that is 300px, i.e > width of box (200px)
-->
<div class='box scroll-x'>
<b>Will scroll</b>
Scroll X with content (long-box) greater width
<div class='long-box'>...</div>
</div>
try this.
.yourclass {
overflow-y: auto;
}
.yourclass {
overflow-x: auto;
}
I’ve got an online photo gallery. The thumbnail page is a grid of 150px x 150px divs, the thumbnail images are set inside them.
Since the thumbnail images are rectangular, the ideal thing would be to auto-center them inside the divs.
Reading here, I’ve figured out how to center them horizontally. I’ve also been reading that auto-centering vertically isn’t possible until CSS3 takes off. Is this true?
I've gotten the horizontal images to auto center with this:
.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}
But, the vertical centering doesn't work with this:
.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}
If there's just no way to do this until CSS3 then I'll have to come up with a workaround, but if I'm missing something, please let me know.
Thank you all in advance for your help!
You have an inline element (the <img>) that is inside a sized parent <div> element:
<div>
<img />
</div>
All you need to do is to make it center and middle aligned. You center it with text-align:center; in the parent <div> and you middle align it by giving the <div> the line-height of it's full height. Additionally, as it's an <img> tag you give that image tag the vertical-align:middle; that done it's in there, regardless of it's own size:
Example/Demo:
<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
div img {vertical-align:middle;}
</style>
<div>
<img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
<img src="http://i.imgur.com/Az6NUl.jpg">
</div>
I want to position a <div>
To Center with w.r.t body width
To Middle with w.r.t body height
The div will have these properties:
width of div will be 90%
height of div auto, min. will be known
I've tested this in IE8, Firefox, Chrome. It does not work in IE7.
If you need this to work in <= IE7, I imagine the simplest solution would be to give up on pure CSS and use javascript for the vertical positioning.
Live Demo
HTML:
<div id="container">
<div id="content">
<input type="button" value="click me" onclick="javascript:document.getElementById('content').innerHTML += 'i i i i i i i i i i i i i i i i i i i i i i i i i<br />';" /><br />
i i i i i i i i i i i i i i i i i i i i i i i i i<br />
i i i i i i i i i i i i i i i i i i i i i i i i i<br />
i i i i i i i i i i i i i i i i i i i i i i i i i<br />
i i i i i i i i i i i i i i i i i i i i i i i i i<br />
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%
}
body {
display: table
}
#container {
width: 100%;
display: table-cell;
vertical-align: middle
}
#content {
background: red;
width: 90%;
margin: 0 auto;
min-height: 150px
}
You can center height like this (beware browser compatibility).
For centering width: you can use position: absolute; and left: 50%;, and them margin: -num;. In the margin, replace num with half of the width of the div.
Set the div with this. I believe it doesn't work in IE 7 and lower. Terrible IE....
margin:auto;
top:0;right:0;left:0;bottom:0;
position:absolute;
You may use margin(left,right) 5% to imitate the effect of centering width.
About the height centering, I don't know the way that you can do it with css alone (because of the unknown vertical size). But you may try using javascript to do that.
Here's an example: http://www.demtron.com/blog/post/2009/01/14/Centering-a-DIV-Window-with-Cross-Browser-JavaScript.aspx (you can ignore the detecting window size part).
I'm trying to make a div with a static height and variable width. With multiple horizontal tabs. The active tab should stretch horizontally to fill the container and the inactive tabs should shrink back down to their inactive size (24px in this case).
I can't quite get it to work. The tab stretches, but too much. It bumps the tabs after it to the next line, which shoudn't happen. I can't figure out how to make this work like I want it to.
What I am trying to do can be seen at [link removed]
I'm sure that theres a way to do it, as I've seen it done before, but I can't find an example of it. Know what I'm doing wrong?
Are you looking for a horizontal accordion?
http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/
http://jqueryui.com/demos/accordion/#fillspace
There are several examples online. It may be best to rely on Javascript to do the calculating if you want the open tab to take up all the space MINUS the width of the tabs, of the container.
<style>
#navigation
{
border: 1px solid #000000;
height: 400px;
margin: 10px 25px;
padding: 0px;
width: auto;
}
.item
{
display: block;
float: left;
height: 100%;
margin: 0px;
overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
width: 10%;
}
.open
{
width: 80%;
}
</style>
</head>
<body>
<div id="navigation">
<div class="item open">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
<div class="item closed">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
<div class="item closed">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
</div>
How committed are you to width:auto on #navigation?
If you set the width of #navigation to something fixed and also set appropriate width values for .open then it looks pretty good.
When I was playing with your example in FireBug I used 400 for #navigation and 350 for .open and it seems to work well.
The extra items are probably being bumped to the next line because the width of your open tab is 100% - try setting it to 80% or 90%, to leave room for the extra "tabs" after it. The "closed" tabs should probably also have a percent width, which should all add together to equal 100% - the full width of their container.
Following approach worked for me:
Let “w” be original width of the div and you want to stretch it by “x” pixels. Adding following CSS on it:
{
width: (w + x) px;
margin-left: -x/2 px
}
e.g. if original width is 300px and you want to stretch it by 50px, additional CSS will be:
{
width: 350px;
margin-left: -25px
}
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?