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.
Related
Hello all CSS newbie here,
I have a special case, where I want to position a text area on the edge of a div. I want the text area to be cropped even when a user types into the text area. I'm deeply confused on why does the textarea grows and pushes the position of the parent div even though I have set the parent div overflow to hidden ? Any ideas so that the textarea position stays as is (cropped)?
My code is as below:
HTML
<div class="wrapper">
<div class='box'>
<textarea class="text"/>
</div
</div>
CSS
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
width:300px;
height:50px;
right:-250px;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
Here is the link to my Codepen
Thank you and deeply appreciate any thoughts and suggestions.
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
max-width:300px;
height:50px;
right: 0;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
<div class="wrapper">
<div class='box'>
<textarea class="text"></textarea>
</div>
</div>
Your html code is not correct. And I used max-width for textarea.
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;
}
My CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
.wrapper{
width:80%;
height:100%;
min-height:auto
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background:red;
}
.wrapped-nav{
width:30%;
float:left;
background:green;
height:auto;
min-height:100%;
}
.wrapped-ent{
width:70%;
float:left;
background:blue;
height:auto;
min-height:100%;
}
My HTML
<body>
<div class="wrapper">
<div class="wrapped-nav">Nav
</div>
<div class="wrapped-ent"></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Example</div>
</div>
</body>
jsbin: http://jsbin.com/cefegifula/edit?html,css,output
When I enlarged the Ent div with those and this overcome the div Nav, a space is created as in the jsbin show, is there a way to do 2 divs has the same height?
create a class that has height and refactor your code so that both divs have it.
so instead of using 100% for both divs use vh, px, or em to your advantage.
I would write it so that you have something like this.
<div class="class1 heightfix">
</div>
<div class="class2 heightfix">
</div>
and then in your css write
.heightfix{
height: 70vh; // or px or whatever.
}
in other news never try to use <br/> in order to fix your spacing problems.
I have two <div>s side by side, in a two column layout. I want to make the second div width auto fit to the browser width... but my CSS isn't quite working:
<style>
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
}
#content{
float:left;
width:auto;
min-height:10px;
overflow:hidden;
margin:auto;
background-color:#cddfea;
}
</style>
<div id="sidebar">aa</div>
<div id="content"></div>
How can I make the width of the "content" div fit the rest of the browser window while my sidebar has a width of 230px?
Thank you. :)
Try this: jsFiddle
HTML:
<div id="sidebar">aa</div>
<div id="content">bb</div>
CSS:
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
background: #faa;
}
#content{
min-height:10px;
overflow:hidden;
margin-left:230px;
background:#cddfea;
}
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}