This may not be possible without Flexbox, but is worth a shout.
I would like to have elements inside a container to be elastic and take all the lateral space available but when the window resizes and they reach a min-width, they wrap into a second line.
this fiddle has two lines of investigation: inline-blocks and tables.
http://jsfiddle.net/48HMj/
relevant code here:
.container{
width:100%;
background-color: yellow;
}
.container2{
width:100%;
background-color: lightblue;
display:table;
}
.block {
border:1px solid;
display:inline-block;
min-width:100px;
width:auto;
height:50px;
}
.cell {
border:1px solid;
display:table-cell;
min-width:100px;
width:auto;
height:50px;
}
Table-cells behave quite in that manner, but as table cells, they are not supposed to wrap...
Thanks
I'm not sure if I'm understanding your question right but I made a FIDDLE for you to examine.
Essentially I forked the "Live Demo" fiddle from User3660695 added the .flexible class to all the divs and added a media query rule to the container:
#media screen and (max-width:480px) {
.container { display: block }
}
Hopefully that is the behavior you were looking for. Cheers!
Related
A basic sounding question I can't find an answer for.
Making an element stretch to use the remaining width of a page is nothing new. Same with changing side by side elements to be stacked on small screens. These are both situations that allow you to pick the element order/composition (E.g. float: direction; and DOM element order for top/bottom) but how do you set the order when doing both? I guess you could say I want to control my element stack overflow. wink wink nudge nudge
The "block formatting context" trick has gotten me so close to what I want.
html:
<div class="blue">Some navigation list items.</div>
<div class="red">Search box expanding to cover empty space.</div>
css:
.red {
width:auto;
height:150px;
background:red;
min-width:200px;
overflow:hidden;
}
.blue {
height:150px;
width:300px;
background:blue;
float:left;
}
http://jsfiddle.net/A8zLY/5503/
In my case, how do I get "red" (the dynamicly sized box) to be on top when it meets its threshold (min-width)? I can't use a media query as navigation list items can change.
Well, here goes.
Although I am not sure what you are trying to accomplish and this solution might not fit your layout needs, here is a solution to the problem - switch the position of the two elements and add this css:
html, body {
padding:0;
margin:0;
}
.red {
position:relative;
margin-left:300px;
height:150px;
background:red;
}
.blue {
position:absolute;
left:0;
top:0;
height: 150px;
width: 300px;
background: blue;
}
#media (max-width:300px) {
.blue {
position:static;
width:100%;
}
.red {
margin-left:0;
}
}
http://jsfiddle.net/A8zLY/5506/
I used a media query breakpoint to wrap the two elements.
The only way for elements to be placed on top of others when they are wrapping is to be placed first in the HTML markup.
I want to align several div's into one line and also center the content vertically and horizontally.
The text to align vertically could be a single line, or a <p> paragraph.
To show n-number of divs in one line, there are 3 approaches
use display:table;
This method is supported IE8 and above and comes in pretty handy if you have large amount of css and text and divs to align
use float:left;
All time favorite, the old school approach, this method is most recommended when old browser support has to be considered, requires clearing of the float at the end
use display:inline-block;
never used this method personally float method was considered instead of using this by me
Base CSS
/************Supported by IE8 and above *******************/
div.table {
width:100%; /* important */
display:table;
text-align:center;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
/************ Method 2 *******************/
div.inline {
width:100%;
display:inline-block;
text-align:center;
}
div.inline-div {
width:32%;
display:inline-block;
}
/************ Method 3 *******************/
.float-class {
width:100%;
text-align:center;
}
div.floatdiv {
float:left;
width:32%;
border:1px solid black;
}
.clearfloat {
clear:both;
}
fiddle showing all three methods in 1 place
To vertically center one line in a div
again 3 approaches :
keep in mind, solution has to be responive, so margin-top:25% or 50% is not gonna work!!!
line-height
this approach is usefull when the dimesnion of the parent div is known, then you can simply use the trick line-height:equal to height of parent div
position
idea is to make the parent positioned relative and the text span class an absolute, then center the absolute text using positioning like top/bottom
display:table-cell
highly recommended if IE7 and older support is not required, simply use vertical-align:middle;
Base css
div.fixed-div-height {
height:200px;
width:200px;
text-align:center;
}
div.fixed-div-height span {
line-height:200px; /* equal to height of the fixed div*/
}
div.unknown-div-height {
height:100%;
text-align:center;
position: relative;
}
div.unknown-div-height > span.unknown-div-margin {
display:inline-block;
height:20px;
position: absolute;
top: 50%;
left:0;
right:0;
}
div.for-ie8-and-above{
width:100%;
display:table;
height:400px;
text-align:center;
}
div.for-ie8-and-above > div{
height:400px;
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing all three methods
To center a paragraph vertically in center
this is the tricky part
Practically there is no possible way to center a parapgraph whose height and the containers height is unknown unless you gor for some hacks....one such hack has been quoted at the end of this answer from css tricks!!
Simplest, use :
div.table-cell {
height:400px; /* can be anything, even in percentage*/
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing remaining 2 possible cases
Another solution posted here :
How do I vertically center text with CSS?
IE hack for display:tables : CSS Tricks
I aligned multiple divs within a table cell (td) by creating a container DIV, as follows:
<td>
<div class="containingDIV"> // container DIV with CSS as below
<div></div>
<div></div>
<div></div>
</div>
</td>
where css for containingDIV is:
.containingDIV {
display: flex;
}
I'm struggling with this:
I want to place a range slider next to an output tag. Both tags should be on the same line while the input range slider takes the full width of the given space.
Problem: I have to
display:block
the span element, because i want to set a fix width. This and the
width:100%;
for the range slider makes it impossible (for me) to achieve my goal.
I've set up a JSFiddle.
So, how can i achieve this?
fixed width for the output tag
output and input should be sitting side-by-side on one line
the input slider should be taking the full width of the given space
Without float and IE8 and above supported way
use display:table
working demo
.form-inline {
display:table;
border:1px solid green;
table-layout:fixed;
width:100%;
margin:0;
padding:0;
}
.input_button {
display:table-cell;
width:104px; /* Fixed span width*/
margin:0;
padding:0;
text-align:center;
border:1px solid black;
}
#range_slider {
border:1px solid red;
display:table-cell;
border:1px solid red;
margin:0;
padding:0;
}
You need to set left float on span and instead of giving range slider a width of 100%, give span 19% and range slider 78%. You need to divide 100% among themselves.
.input_button{
float:left;
width:19%;
}
#range_slider{
width:78%;
margin-top:33px;
margin-left:10px;
}
Here is a fiddle
Rather than setting display:block for span element, try Can using display:inline-block
I have two divs: left and right. In the left there is a long text. In the right there are some annotations about the text (more divs). If the text of the left is longer than the annotations I'm like it. But when the annotations are bigger/longer then the left div, I want to make the right div's content overflow.
With other words: two divs without fix height, make overflow the right one.
The code is above or JSFiddle
<div id="container">
<div id="left">Some long-long text, allways to show</div>
<div id="right">Some divs not necessarily show all</div>
</div>
css:
#container {
background-color:white;
float:left;
}
#left {
width: 79%;
float:left;
}
#right {
width: 19%;
float:right;
overflow: hidden;
}
But it's not working. :(
As Jan suggested in his last comment, I think you need to use javascript or jQuery to accomplish this.
This question outlines an approach using javascript that was accepted by the OP, though the OP made no comments on his process of execution.
I've modified a js fiddle from this answer to a similar question.
It uses the following:
CSS
#main{
width:auto;
}
#one{
height:auto;
width:200px;
display:inline-block;
float:left;
}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;
}
div{
border:1px solid black;
}
Javascript
$(document).ready(function() {
$("#main").css("height",$("#one").height());
});
And I believe addresses your desired outcome.
You have to use overflow: hidden on #left, and not on #right.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Make Div on right side fill out all available space
I'm designing a theme for a blog and I'm having some trouble trying to get a layout working. Here's an image of what I want.
This diagram represents the individual posts and not the website itself, so it will be contained in a box of it's own, lets call it .container. Also the purple and green are in another box, let's call it .content. The other elements will be called by their color for now.
so here's more or less what the CSS looks like:
.container {
display:block;
margin:0 25px;
}
.gray, .blue, .content {
display:block;
width:100%;
}
.purple {
display:inline-block;
width:125px;
height:100%;
text-align:center;
}
.green {
display:inline-block;
}
That's all there is at the moment. I tried float but that made no effect. What's happening is something like this.
Here's a few more things you should know:
.container's width is NOT set it is auto
.purple and .green don't necessarily need to be the same size as long as .green doesn't go to that side.
.purple CAN have a set height
.green is where the meat is, that's where the actual post goes, keep that in mind.
I don't think tables will help, the problem is inside .content.
Use answers in this post to get a solution:
Make Div on right side fill out all available space
I am recommending tables-directed one because it is most valid/working approach on almost every browser.
I assume that all of your sections are <div> elements. Use:
.container {
display:block;
margin:0 25px;
}
.gray, .blue, .content {
display:block;
clear:both;
width:100%;
}
.purple {
float:left;
width:125px;
height:100%;
text-align:center;
}
.green {
float:left;
}
You may also need to add <br clear="all" /> immediately after the green div and before the closing of the content div, and another one right after your content div.
Assuming all is set in div you need to write like this:
.container {
display:block;
margin:0 25px;
}
.gray, .blue, .content {
display:block;
clear:both;
width:100%;
}
.purple {
float:left;
width:125px;
height:100%;
text-align:center;
}
.green {
float:left;
min-width: 125px;
}