Is it possible to put a 90 degree flip a div next to a normal horizontally?
In my example, I want the blue div ("some text") to be vertical and be next to the horizontal "bottom-right" div. Is it possible to do so while making it responsive? I don't want just the text to be flipped, I want any items I put inside that div to also be flipped.
https://jsfiddle.net/duah6svr/1/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
width:600px;
height:600px;
background:gray;
}
.top{
float:right;
height:30%;
background:red;
width:80%;
}
.bottom{
width:100%;
height:70%;
background:green;
float:right;
}
.bottom-right{
float:left;
height:100%;
width:80%;
background:pink;
}
.vertical-invert{
width:20%;
height:100%;
background:blue;
}
<div class="big-div">
<div class="top">
</div>
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
You can use a flexbox and the writing-mode attribute. Here is a working fiddle demonstrating. In case you want to change the text orienation you can use something different for writin-mode as described here
Updated version: Bottom of the text is on the left side. The trick is to set the writing-mode to vertical-lr
HTML:
<div class="big-div">
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
background:gray;
}
.bottom{
width:100%;
height:70%;
display: flex;
flex-direction: row;
}
.bottom-right{
width:80%;
background:pink;
}
.vertical-invert{
width: 20%;
background:blue;
writing-mode: vertical-lr;
text-align: left;
}
Related
Would like to know how to create some spacing between divs in a horizontal row.
I use justify-content:center to center the boxes, and flex-wrap:wrap to wrap them when the window is re-sized. However, when I try to add margin-left and margin-right to #div2 (middle box), it disturbs the centered layout when the window is re-sized.
As you've probably noticed I'm trying to make my site mobile friendly and responsive to any screen size. Thank you.
Here is the code:
<div id="pusher">
</div>
<section id="billboard">
</section>
<section id="section1">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</section>
body,html{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:brown;
height:75px;
position:fixed;
}
#pusher{
width:100%;
height:75px;
}
#billboard{
height:500px;
background: url("");
background-repeat:no-repeat;
background-size:cover;
background-color:red;
}
#section1{
display:flex;
flex-wrap:wrap;
justify-content:center;
overflow:auto;
}
#div1{
background-color:blue;
height:250px;
width:250px;
min-width:250px;
}
#div2{
background-color:yellow;
height:250px;
width:250px;
min-width:250px;
}
#div3{
background-color:green;
height:250px;
width:250px;
min-width:250px;
}
Just apply a margin to all divs:
#section1 > div { margin: 10px; }
DEMO
Since the display of the section is flex, try changing the justify-content:center; into justify-content:space-around;. It gives spaces between the boxes. And when the browser shrinks, it will also wrap the boxes.
Using CSS I am trying to get a div to fill a dynamicly sized container that also contains a fixed height div.
How can the grey div (See snippet) be made to fill the remaining available space only without overflowing?
The grey div .Fill cannot have anything inside it.
I would prefer to use CSS Flex only as a last resort.
FIDDLE
html,body{height:100%;}
.Wrap{
height:100%;
width:50%;
}
.H40,.H60{
display:block;
padding:15px;
box-sizing:border-box;
}
.H40{
height:40%;
background:#b00;
}
.H60{
height:60%;
background:#58c;
}
.Top{
background:#8d5;
height:40px;
}
.Fill{
height:100%;
width:100%;
background:#DDD;
}
<div class="Wrap">
<div class="H40">
<div class="Top">TOP</div>
<div class="Fill">Fill this space</div>
</div>
<div class="H60">
<div class="Top">TOP</div>
<div class="Fill">Fill this space</div>
</div>
</div>
try this
use calc for that
.Fill{
height:calc(100% - 40px);
width:100%;
background:#DDD;
}
http://jsfiddle.net/pgys24ct/3/
I think display:table, display:table-row and display:table-cell will solve this.
JSfiddle Demo
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body{height:100%;}
.Wrap{
height:100%;
width:50%;
}
.H40,.H60{
display: table;
padding:15px;
height:100%;
width:100%;
}
.H40{
height:40%;
background:#b00;
}
.H60{
height:60%;
background:#58c;
}
.Top{
display: table-row;
background:#8d5;
height:40px;
}
.fill {
display: table-cell;
background: #ccc;
height:100%;
}
<div class="Wrap">
<div class="H40">
<div class="Top">TOP</div>
<div class="fill"></div>
</div>
<div class="H60">
<div class="Top">TOP</div>
<div class="fill"></div>
</div>
</div>
Add height:calc(100% - 20px); in .Fill in your CSS.
I try to connect a div to my centre div but I can't figure it out. The "connecting div" should be adjacent to the centered div, but the alignment of the centre div should not change. (It should stay in the centre.)
HTML
<div class="yelow"></div>
<div class="red"></div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin-left:auto;
margin-right:auto;
}
.yelow{
float: left;
width:100px;
background-color:#ffff00;
height:100px;
}
Here's the fiddle:
http://tinyurl.com/k2twodz
So the yellow div should be adjacent to the red centre div.
Thanks in advance!
Here you go. I also adjusted the HTML code.
http://jsfiddle.net/hrvvvz4v/4/
HTML
<div class="red">
<div class="yelow"></div>
</div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin:0 auto;
}
.yelow{
position:relative;
right:100px;
width:100px;
background-color:#ffff00;
height:100px;
}
You can also try this:
HTML:
<div class="main">
<div class="yellow"></div>
<div class="red"></div>
</div>
CSS:
.main
{
width:200px;
height:100px;
}
.red
{
width:100px;
background-color:#ff0000;
height:100px;
float:left;
}
.yellow
{
float: right;
width:100px;
background-color:#ffff00;
height:100px;
}
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I need to arrange three columns of divboxes with 33% width of the outer box, besides a fixed-width menu.
http://jsfiddle.net/uvw5c/1/
So i want the red, yellow, green area beides the orange menu, in ANY case of width of #menu.
<div id="container">
<div id="menu">
menu
</div>
<div id="dialogbox">
<div id="outer">
<div class="inner" style="background-color:red;">
col1
</div>
<div class="inner">
col2
</div>
<div class="inner" style="background-color:green;">
col3
</div>
</div>
</div>
</div>
#container{
width:500px;
background-color:grey;
height:300px;
}
#menu{
width:300px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
float:left;
height:100%;
width:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33%;
background-color:yellow;
height:100%;
float:left;
}
Thanks in Advance for any hints!
For this specific case you can do away with a lot of the markup and use display: table; and table-cell;. Set the width of the menu, and the others will automatically fill the rest equally.
HTML:
<div id="container">
<div id="menu">
menu
</div>
<div class="inner" style="background-color:red;">
test
</div>
<div class="inner">
test
</div>
<div class="inner" style="background-color:green;">
test
</div>
</div>
CSS:
#container{
width:500px;
display: table;
height: 300px;
}
#menu{
width: 100px;
background: #00f;
display: table-cell;
}
.inner{
padding:0;
margin:0;
background-color:yellow;
height:100%;
display: table-cell;
}
Fiddle: http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/
Make a div containing both the menu and the .inner elements.
Also check that width of inner must be 33.3% and 33.4% for one element (maybe the one in the middle)
I found a solution with the help of a friend:
http://jsfiddle.net/t39yV/2/
its very smart to use margin-left on the #dialogbox ;)
#container{
width:100%;
background-color:grey;
height:300px;
}
#menu{
width:100px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
margin-left:100px;
height:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33.3%;
background-color:yellow;
height:100%;
float:left;
}