I'm trying to make a responsive design for a web app, but I'm running into problems with the divs not resizing when it wraps. I'm trying to avoid javascript for styling if at all possible.
I have a wrapper div with flex-flow:column wrap;. The divs inside have a minimum width so when the screen gets too short, it will wrap into a row. The problem is that if the second div is full horizontally, it doesn't resize horizontally when it wraps.
This is an example of my problem:
HTML:
<div id=wrapper>
<div id=header>
Header<br />
Resize the black box to see the issue.
</div>
<div id=middle>
<div id=middle-left>Middle Left</div>
<div id=middle-right>Middle-ish from a more vertical point of view but definitely more to the right side, though only if it's not too tall, then it's more of a middle-low vertically.</div>
</div>
<div id=bottom>Bottom</div>
</div>
CSS3:
#wrapper {
border:2px solid;
padding:10px 40px;
width:500px;
height:600px;
resize:vertical;
overflow:auto;
display: flex;
flex-flow: column nowrap;
}
#header, #middle, #bottom {
border:1px solid red;
}
#middle-left, #middle-right {
border:1px solid blue;
min-height:100px;
flex:1;
}
#middle-left {
min-width:200px;
}
#header {
flex: 3 1;
}
#middle {
flex:3;
display:flex;
flex-flow:column wrap;
}
#bottom {
flex:1;
}
http://jsfiddle.net/spencer4of6/m474n/4/
I figured this out. I ended up using CSS media queries with max-widths and max-heights. It's kind of a hackish way to do things, but nothing else seemed to be working.
Use the overflow property on the parent container to avoid this issue:
#middle {
overflow: hidden;
}
Related
The question is about .text-wrapper, which has display:flex; flex-wrap:wrap applied to it. The reason for using flex-wrap:wrap is that otherwise .text-wrapper and .tabs-wrapper wouldn't stop being on one line, next to each other, like inline elements (though I have no idea why, because divs should be block level elements, no? I'll appreciate if someone can enlighten me on this one as well)
The problem is that I want the children of .text-container to its bottom, and not have more than 20px space between them.
But right now, there is a lot of space between .text-wrapper and .tabs-wrapper. How do I fix this?
JSFiddle here.
OR
html,
body {
height: 100%;
box-sizing:border-box;
}
.the-page {
height:100%;
width:100%;
position:relative;
}
.first-bottom {
height: 100%;
}
.image-container img {
position: fixed;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
display: block;
}
.text-container {
height:100%;
width:100%;
top:0px;
position:relative;
display:flex;
align-items:flex-end;
flex-wrap:wrap;
}
.text-wrapper span {
text-align:center;
color:yellow;
}
.tabs-wrapper {
height:50px;
width:100%;
background-color:pink;
opacity:0.5;
}
.tabs-wrapper-inner {
height:100%;
display:flex;
align-items:center;
justify-content:center;
width:60%;
margin:auto;
}
.tabs-wrapper-inner a {
text-decoration:none;
font:sans-serif;
font-weight:bold;
color:red;
padding:10px;
}
.other-content {
background-color: purple;
opacity: 0.5;
width: 100%;
height: 500px;
}
<div class="the-page">
<div class="first-bottom">
<div class="image-container">
<img src="http://photostry.com/wp-content/uploads/2011/09/highway-arizona-to-utah.jpg" />
</div>
<div class="text-container">
<div class="text-wrapper">
<span>SUN BEACH WARM</span>
</div>
<div class="tabs-wrapper">
<div class="tabs-wrapper-inner">
AMY
BAMY
CAMY
DAMY
EAMY
</div>
</div>
</div>
</div>
<div class="other-content">.</div>
</div><!-- #the-page -->
The question is about .text-wrapper, which has display: flex; flex-wrap: wrap applied to it.
I think you mean .text-container, because there is no .text-wrapper rule in your CSS.
The reason for using flex-wrap: wrap is that otherwise .text-wrapper and .tabs-wrapper wouldn't stop being on one line, next to each other, like inline elements (though I have no idea why, because divs should be block level elements, no? I'll appreciate if someone can enlighten me on this one as well)
When you create a flex container – like you have by declaring display: flex on .text-container – you establish a flex formatting context. In this context, the children of the container become flex items and adhere to a flex layout, not a block layout. By default, flex items are aligned in a single, non-wrapping row (any block or inline display values are overridden by flex rules).
The problem is that I want the children of .text-container to its bottom, and not have more than 20px space between them.
But right now, there is a lot of space between .text-wrapper and .tabs-wrapper. How do I fix this?
To control the alignment of multiple lines in the cross axis, you can use the align-content property.
The reason there is wide space between both lines is because the default value of align-content is stretch, which tells flex lines to distribute free space in the cross axis equally among themselves.
To better understand how this property works I would suggest you add a border (or background, or both) to .text-wrapper and .tabs-wrapper. Then try out the different align-content values: flex-start, flex-end, center, space-between, space-around and stretch.
Also, an important note to keep in mind, align-content only works when there are multiple lines in the cross axis of the flex container. If there is only one line it will have no effect, and you should use align-items instead.
Add this to your CSS:
.text-container {
height:100%;
width:100%;
top:0px;
position:relative;
display:flex;
align-items:flex-end;
align-content: flex-end; /* new */
flex-wrap:wrap;
}
To create a 20px gap between .text-wrapper and .tabs-wrapper simply add a bottom margin to .text-wrapper.
.text-wrapper {
margin-bottom: 20px;
}
Revised Demo
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
You should use flex-direction:column; instead of flex-wrap.
For more information on flex and how to use it, there is this excellent article at CSS Tricks
I have set up 2 div tags, the outer one with display:table and the inner one with display:table-cell. Inside these I have an image.
When I resize the box using jQuery UI's resizable() API, I am unable to shrink it smaller than the image.
Markup:
<div class="resizebox">
<div class="content">
<img src="http://placehold.it/300x60">
</div>
</div>
CSS:
.resizebox {
border:1px solid black;
height:100px;
width:320px;
overflow:hidden;
display:table;
}
.resizebox .content {
display:table-cell;
vertical-align: middle;
text-align: center;
}
jsFiddle
I've added another example under the top resizable box to demonstrate the kind of behavior I'm trying to achieve (while keeping the CSS Table)
You beat me to it. Just using regular 'ol width: 100%;
img {
width:100%;
}
Fiddle Example
Try adding the following css
.resizebox .content img {
width:100%;
max-width:100%;
}
JsFiddle
Feeling a big silly now.
Fixed this by adding these CSS Styles:
.resizebox img {
max-width:100%;
max-height:100%;
}
jsFiddle
I've been searching for hours but I can't find a way to place 2 div's next to each other.
The below example works fine when the div's are smaller then the screen but when they are bigger then the screen they are below each other.
Also I would like the same classes for 2 pages:
1 page they both fit on the screen and I'd like to display them next to each other (not one on the left and one on the right)
the other page together they are bigger then the screen. (Sideways scrolling is no problem)
Take this example:
<style>
.wrapper
{
border:1px solid Red;
display: inline-block;
}
.left
{
float:left;
color: Green;
border:1px solid Green;
}
.right
{
float:right;
color: Blue;
border:1px solid Blue;
}
</style>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
In the actual design ASDF is replaced by a big <table>.
As I said above I've been searching for hours but can find a solution so I'm sorry if this has been asked before.
The wrapper div isn't necessary for the two to be lined up, but if you have it for other reasons (like a border, background, etc.), then it does not need to be set to inline-block.
Nothing technically needs to float. inline-block has the same effect and is more appropriate. Having said that, one float is needed to make things as fluid as possible and will be mentioned in a second.
Something that makes this and other css magic involving inline-block tricky and error-prone is that the element is treated in some ways like an inline element and in other ways like a block. This is not cross-browser consistent. Generally, this means that it can have block-level styling (like border, and width), and inline-level styling. Generally people just think of it as blocks that fall horizontally, "in a line". But inline element properties from a wrapper div such as font-size and white-space come in to effect as well (which is just annoying).
Having said all of that, here is the bare-bones recipe for side-by-side block elements that exceed the browser window and are inside of a block-level wrapper:
The inner blocks need to be set to inline-block.
The outer wrapper needs to have white-space set to nowrap, just as if you wanted a long line of text to expand horizontally beyond the browser window.
The outer wrapper needs to be set to float: left; clear: both;, because otherwise the wrapper's width will not go past the window width. The alternative is to set the width of the wrapper, but if you don't know how far it will expand, the float will force the wrapper to automatically shrink or grow to the width of it's contents. The clear:both prevents the floating from affecting any surrounding elements.
So for the following HTML:
<div class="wrapper">
<div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
<div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>
You would need the following CSS as a bare minimum:
.wrapper {
white-space: nowrap;
float:left;
clear: both;
}
.left, .right{
display: inline-block;
}
And then, for your example, you would add:
.wrapper {
border: 1px solid red;
}
.left
{
color: Green;
border:1px solid Green;
}
.right
{
color: Blue;
border:1px solid Blue;
}
Demo: http://jsfiddle.net/crazytonyi/jTknm/
This is one approach that could be used, coupling white-space: nowrap in the parent .wrapper element with display: inline-block in the child .left and .right elements:
.wrapper
{
/* other stuff */
white-space: nowrap;
}
.left
{
display: inline-block;
/* other stuff */
}
.right
{
display: inline-block;
/* other stuff */
}
JS Fiddle demo.
You can do this without floating by setting the inner divs to display: inline-block and letting the outer div have white-space: nowrap:
<div class="wrapper">
<div class="left">left</div><div class="right">right</div>
</div>
.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */
See it in action.
Be careful to not leave any whitespace between closing the first and opening the second div, because that will manifest as visible space in the render.
Erm, you need to use float:left for both them to begin with. Then force overflow:show for the wrapper or perhaps use the newer CSS 3 property overflow-x:scroll. Let me know if it still doesn't work.
Okay I have tested for you. The reason why this is not working is because you haven't specified fixed widths and some other stuff. Here is the working code:
<style>
.wrapper
{
border:1px solid Red;
width:100%;
overflow-x:scroll;
}
.left
{
float:left;
width:500px;
color: Green;
border:1px solid Green;
}
.right
{
float:left;
width:500px;
color: Blue;
border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
Then if you want to specify widths, either use Javascript to determine them on page load or use CSS.
Your divs need widths, try:
<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>
<style>
#left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
#left { margin-right:1%; }
</style>
Is there a way to have two divs placed next to each other so that:
The width of the outer div is unknown
The rightmost div atapts its width to its content (shrink-to-fit)
The leftmost div fills the remaining space
I see that Paul D. Waite has almost cut it here:
xHTML/CSS: How to make inner div get 100% width minus another div width
In my case, the two inner divs need to switch places, and I just can't cut it.
Any ideas?
Simply change float: left to float: right in Paul's example.
HTML:
<div id="outer">
<div id="adaptive">I will adapt my width to my content.</div>
<div id="filler">I will fill the remaining space.</div>
</div>
CSS:
#outer { overflow: hidden; width: 100%; }
#adaptive { float: right; }
#filler { overflow: hidden; }
Test jsFiddle
Here you go:
http://jsfiddle.net/BhAcn/1/
Paul Waite's example fitted to your question
#outer {
overflow: hidden;/* Makes #outer contain its floated children */
width: 100%;
}
#inner1 {
float: right;/* Make this div as wide as its contents */
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
}
Try this....
Html:
<div id="outer">
<div id="inner-left">
<p>hello</p>
</div>
<div id="inner-right">
<p>hello1</p>
</div>
</div>
CSS
<style type="text/css">
#outer
{
width:100%;
height:100%;
border:1px solid black;
}
#inner-left
{
width:75%;
float:left;
border:5px solid black;
}
#inner-right
{
width:200px;
float:left;
border:5px solid black;
}
</style>
Hope this helps!!!
How can I make div 'left' and 'right' look like columns side by side?
I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/
the guy says it is possible, I can't get it work though...
Code:
<style>
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/
.container div {
display: inline-block;
}
Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.
Floats are also more flexible, in most cases.
A div is a block level element, meaning that will behave as a block, and blocks can't stay side by side without being floated. You can however set them to inline elements with:
display:inline-block;
Give it a try...
Another way is to place them using:
position:absolute;
left:0;
and/or
position:absolute;
right:0;
Note: For this to work as expected, the wrapper element must have a position:relative; so that the elements with absolute positioning stay relative to their wrapper element.
You can also use CSS3 flexbox layout, which is well supported nowadays.
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background:black;
height:400px;
width:450px;
}
.left {
flex: 0 0 300px;
background:blue;
height:200px;
}
.right {
flex: 0 1 100px;
background:green;
height:300px;
}
See Example (with legacy styles for maximum compatiblity) & Learn more about flexbox.
I am currently working on this, and i have already a number of solutions.
It is nice to have a high quality site, that i can use also for my convenience.
Because if you do not write these things down, you will eventually forget some parts.
And i can also recommend writing some basic's down if you are starting any kind of new programming/design.
So if the float functions are causing problems there is a couple of options you can try.
One is modify the div alignment in the div tag it self like so <div class="kosher" align=left>
If this does not suit you then there is another option with margin like so.
.leftdiv {
display: inline-block;
width: 40%;
float: left;
}
.rightdiv {
display: block;
margin-right: 20px;
margin-left: 45%;
}
Don't forget to remove the <div align=left>.
Use display:table-cell; for removing space between .Left and .Right
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
.container > div {
display: table-cell;
}
<div class="container">
<div>
<div class="left">
LEFT
</div>
</div>
<div>
<div class="right">
RIGHT
</div>
</div>
</div>
You can try with margin for right div
margin: -200px 0 0 350px;