I have HTML structure
<div class="wraper">
<div class="lewy-fluid">
<div class="lewy-fluid-fluid">
TITLE
</div>
<div class="lewy-fluid-fix">
Kontakt
</div>
</div>
<div class="prawy-fix">
Czat
</div>
</div>
And need to make:
_____________________________________________________________________________
| .LEWY-FLUID | .PRAWY-FIX |
and inside .LEWY-FLUID:
_________________________________________________________
| .LEWY-FLUID-FLUID | .LEWY-FLUID-FIX |
So I have fluid and fixed div and inside that fluid div I also have fluid and fixed div.
How can I make things inside .LEWY-FLUID to be how I want to?
fiddle link: http://fiddle.jshell.net/ozeczek/hu4JH/
I checked here and found a solution to the problem you are having. The main trick here is flipping the order of the divs (put the fixed right div first in your html, then the fluid left div after that).
<div class="wraper">
<div class="prawy-fix">Czat</div>
<div class="lewy-fluid">
<div class="lewy-fluid-fix">Kontakt</div>
<div class="lewy-fluid-fluid">Headshot media</div>
</div>
</div>
Then for your css, set your fixed divs with float:right and your desired width, and your fluid divs to have width:auto and overflow:hidden so they take up the remaining space.
Demo: http://fiddle.jshell.net/5kXHR/
For more about why you should use overflow:hidden, read here.
How about trying Flexbox? Right now I can only test on the latest version of browsers, but this seems to work fine and accomplish what you need:
HTML:
<div class="wrap">
<div class="fluid wrap">
<div class="fluid"></div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
CSS:
.wrap {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.wrap div {
height: 5em;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.fluid {
background: tomato;
width: 100%;
}
.fixed {
background: beige;
width: 150px;
min-width: 150px;
}
.fluid.wrap .fluid {
background: orange;
}
.fluid.wrap .fixed {
background:tomato;
}
Fiddle: http://jsfiddle.net/xdLPZ/2/
Related
I am wondering if this is possible: I have a header that can contain a variable amount of text. Below that I have another element which I want to take up the remaining height of the page.
<div class="header row">
<div class="title column large-5">Potentially very long text</div>
<div class="menu column large-7">Menu items</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
Normally I would do this using calc, eg:
.content {
height: calc(100vh - 75px);
}
Where 75px is the set height of .header.
But in this example, the .header element is dynamic and does not have a set height. Only a padding and font-size are set.
To complicate things, this also uses the Foundation Grid layout, which makes me nervous about using display: table (.title and .menu sit side by side on desktop, but stacked on mobile) .
Is there anyway to get the height of the dynamic header element (without resorting to JQuery)?
You can use flexbox and set .content to flex-grow: 1 so that it will fill to grow the available space.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.content {
flex-grow: 1;
background: #eee;
}
<div class="header row">
<div class="title column large-5">Potentially very long text</div>
<div class="menu column large-7">Menu items</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
I made a small pen to show the way to do this using flex box, it involved changing your markup a bit:
css:
.container {
display: flex;
flex-direction: column;
height: 250px; // whatever you want here
}
.header {
width: 100%;
background: red;
padding: 10px;
}
.content {
background: yellow;
width: 100%;
flex-grow: 1;
}
So the content will always take the available space inside the content div.
check the whole pen: http://codepen.io/anshul119/pen/yMYeLa
hope this helps.
I'm trying to line up divs horizontally, even if they go off-screen. Im using display: box;
<div id="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
....
....
</div>
.box{
background-color: #7f94a7;
color: #fff;
height: 5.2rem;
width: 6rem;
display:table;
}
#container{
display: box;
display: -webkit-box;
}
Check out the jsfiddle here.
This works fine in chrome but in internet explorer 10, the box are aligned vertically....
Not really sure what the display:table is supposed to do on the .box class -- there aren't any cells or rows inside of it, so it isn't table-like at all. The table box sizing model is made to flex the width of the cells. Take a look at this example to see display:table in action... resize the output panel to see what happens: http://jsfiddle.net/vz33sfwc/
.box{
display:table-cell;
}
#container{
display:table;
}
It sounds like you actually want the boxes to NOT flex, but to go off-screen. To do that, we'll set the boxes to use display:inline-block -- this makes them sit next to one another on a single line. Then, we tell the container how to treat white space for the inline elements with white-space: nowrap;
.box{
display: inline-block;
}
#container {
white-space: nowrap;
}
See it in action here, again resizing the output panel for the effect: http://jsfiddle.net/k9yp05mj/ -- notice we get a horizontal scrollbar and the boxes do not flex in size.
Documentation
CSS whitespace on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
CSS display on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/display
Change your display: box; to display: inline-box; and use overflow: to keep or hide run-off from being visible.
As stated above, white space: nowrap; on content fixes issue.
CSS:
.box{
background-color: #7f94a7;
color: #fff;
height: 5.2rem;
width: 6rem;
display: inline-block;
}
#container{
display: box;
display: -webkit-box;
overflow-x: auto;
white-space: nowrap;
}
try just with "display : inline" for the child div.keep width auto i.e depending on content it'll adjust Check the fiddle here - http://jsfiddle.net/invincibleJai/p5tebcua/45/
Code:
.box{
background-color: #7f94a7;
color: #fff;
height: 5.2rem;
width: 6rem;
display:inline;
padding:0.2em;
}
<div id="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
<div class="box">
5
</div>
<div class="box">
6
</div>
<div class="box">
7
</div>
<div class="box">
8
</div>
<div class="box">
9
</div><div class="box">
10
</div>
<div class="box">
11
</div><div class="box">
12
</div>
<div class="box">
13
</div>
</div>
In this simplified example, I have a bookcase with books sitting on bookshelves. The bookcase is the outermost element with a defined width. The books on a bookshelf are supposed to appear left to right without wrapping. The bookshelf is supposed to stretch its width to show all the books on its shelf. All bookshelves need to be the same width, the width of the widest bookshelf.
My HTML:
<div class="bookcase">
<div class="bookshelf">
<div class="book">
<div class="book">
<div class="book">
</div>
<div class="bookshelf">
<div class="book">
<div class="book">
<div class="book">
<div class="book">
</div>
<div class="bookshelf">
<div class="book">
</div>
</div>
My CSS:
.bookcase {
width: 40%;
height: 300px;
margin: 0 auto;
background: lightgrey;
overflow-x: auto;
}
.bookshelf {
background: lightgreen;
white-space: nowrap;
}
.book {
display: inline-block;
height: 60px;
width: 60px;
background: pink;
}
jsFiddle demo
The problem with the current code is that when the bookcase width is smaller than the longest bookshelf and the bookcase makes the overflow scrollable, the bookshelf elements don’t stretch to fit all the books. Currently the shelves appear to be defining their width equal to the parent, the bookcase.
These pictures illustrate the problem. This is how the bookcase looks normally, which is fine:
or
But when you scroll right when the bookcase is narrow, the bookshelves’ green background is cut off, instead of reaching to the right side of the last red book:
How can I make the bookshelves take the full width of the overflowed element, rather than the width of the bookcase parent container?
Thanks to Javalsu, Hashem Qolami, and Danield for helping me find a suitable solution. Indeed, the trick is to utilize inherent display properties of tables. The solution I found was to wrap the .bookcase in another element (I'm calling this wrapper element the .wall). Move the overflow: auto; with the static height: and width: properties from the .bookcase to the .wall, and add display: table; and width: 100%; to the .bookcase.
The display: table; property is needed for when overflow is scrolling, and the width: 100%; is needed for when the overflow is not scrolling.
My New HTML:
<div class="wall">
<div class="bookcase">
<div class="bookshelf">
<div class="book"></div>
<div class="book"></div>
<div class="book"></div>
</div>
<div class="bookshelf">
<div class="book"></div>
<div class="book"></div>
<div class="book"></div>
<div class="book"></div>
</div>
<div class="bookshelf">
<div class="book"></div>
</div>
</div>
</div>
My New CSS:
.wall {
width: 60%;
height: 300px;
margin: 0 auto;
background: lightgrey;
overflow: auto;
}
.bookcase {
display: table;
width: 100%;
}
.bookshelf {
background: lightgreen;
white-space: nowrap;
}
.book {
display: inline-block;
height: 60px;
width: 60px;
background: pink;
}
jsFiddle demo
Result:
or
Adding display:table on the .bookcase element does almost what you need.
FIDDLE
The only difference is that instead of the scrollbars appearing when the longest bookshelf > 60% of the viewport width, they appear when the longest bookshelf > 100% of the viewport width.
But the problem with the disappearing background is gone.
your problem is that you've declared a width on .bookcase, and each bookshelf will inherit that width. If you want the bookcase and each bookshelf to always be the width of the widest row of books, set display: inline-block on .bookcase, and remove its width rule. If you need it centered, you'll need to find a way other than margin: 0 auto.
I wonder if any one can help me. I have a website with a header, footer and content containers. Now I wish to vertically centre the content between the header and footer containers instead of the page. Does anybody have any ideas how to achieve this???
try the below css
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
CSS:
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;}
try the below css
<div class="wrapper">
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
</div>
CSS:
.wrapper{ display: table; }
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;
}
Try this i just added wrapper with display:table style.
table-cell property will work only with a wrapper having display:table property
I need inline DIVs to be spaced equally betweenn each other, and additionally between border and first (or last) DIV in the row.
I use solution found on Fluid width with equally spaced DIVs. It gives me equal spacing between DIVs, but left DIV sticks to the left border, and right DIV sticks to the right. I'd like it to be equally spaced from the borders as they are from each other.
UPDATE:
content DIVs are being created dynamically by Django, so I cannot say how many of them will be there in the line (between 1 and 4).
How can I create additional space on sides which will be equal to distance between DIVs?
Here is html:
<div class="container">
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
</div>
and css:
div.container {
width: 100%;
text-align: justify;
}
div.content {
display: inline-block;
width: 20%;
margin: 0 auto;
}
div.container:after {
content: "";
width: 100%;
display: inline-block;
}
You could use box layout and padding of a certain percentage, like this (I just used 10% padding but you can adjust to suit your needs):
http://jsfiddle.net/XXPwW/2/
And right after asking the question, I've figured out the answer (how ironic?). I'll share it in case someone needs it.
What I've done was creating spacer DIVs with 0 width before first and last content DIV. Here is how it looks like:
HTML:
<div class="container">
<div class="spacer"></div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="spacer"></div>
</div>
and css:
div.container {
width: 100%;
text-align: justify;
}
div.content {
display: inline-block;
width: 20%;
margin: 0 auto;
}
div.container:after {
content: "";
width: 100%;
display: inline-block;
}
div.spacer {
display: inline-block;
width: 0;
}