I am trying to place two divs side by side with 20px margin between them. Divs are inside wrapper, which width is 800px. Left div is 250px and right div is 550px, but of course if I add 20px margin between them, total width is increasing over 800px. Is there any way to force right div width to be 550px - 20px margin?
CSS
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
}
.left {
width: 250px;
height: 300px;
background-color: blue;
float: left;
margin-right: 20px;
}
.right {
width: 550px;
height: 300px;
background-color: red;
float: left;
}
HTML
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
I mean do I have to decrease width manually or is there any better solutions?
jsfiddle: https://jsfiddle.net/ytsvd77f/
Yes you can use calc(550px - 20px) as width of right div.
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
}
.left {
width: 250px;
height: 300px;
background-color: blue;
float: left;
margin-right: 20px;
}
.right {
width: -moz-calc(550px - 20px);
width: -webkit-calc(550px - 20px);
width: -o-calc(550px - 20px);
width: calc(550px - 20px);
height: 300px;
background-color: red;
float: left;
}
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
If you add display:flex in your wrapper it will work perfectly and I guess you will understand better.
Check it out the css.
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
display: flex;
}
Related
I'm a complete noob at css and I'm trying to learn, but I've hit a wall. I have a div container with 2 divs inside of it. I want to be able to make the left div resize slower than the right div.
EX: Fullscreen
----|--------
EX: window shrunk
---|-----
I'd like the right div to shrink to a minimum of 200px before the left div starts to shrink.
Here's what I have so far but It's not working
.container{
position: relative;
border: 3px solid black;
border-radius: 10px;
height: 60px;
max-width: 900px;
min-width: 400px;
margin: 10px;
}
.left{
position: absolute;
height: inherit;
max-width: 200px;
min-width: 100;
float: left;
}
.right{
position: absolute;
height: inherit;
max-width: 900px;
min-width: 400px;
left: 200px;
}
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
I think the best way to do this is using flexbox and adding max-width on your left div and min-width on your right.
This is a great guide for all things flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and the MDN link for full specs.
.container {
display: flex;
width: 100%;
}
.left {
flex: 1 1 0;
height: 50px;
background: green;
max-width: 200px;
}
.right {
flex: 1 1 0;
height: 50px;
background: red;
min-width: 200px;
}
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
I want to add margin (10px) to .inner-container (blue) which is 960px fixed width which also inside .outer-container (360px fixed width).
To make it scrollable, i set overflow: scroll to .outer-container
to add margin to inner container, I set margin: 10px; to .inner-container.
the problem is there are no margin on the right side of .inner-container.
.outer-container {
width: 360px;
height: 500px;
background: #555;
overflow: scroll;
}
.container-inner {
width: 960px;
height: 300px;
background-color: #0D47A1;
margin: 10px;
}
<div class="outer-container">
<div class="container-inner"></div>
</div>
You can do it, by adding one more div (with 980px width), to wrap inner container, so applied margin will work:
.outer-container {
width:360px;
height: 500px;
background: #555;
overflow-x: scroll;
}
.inner-wrap {
width:980px;
}
.container-inner {
width: 960px;
height: 300px;
background-color: #0D47A1;
margin:10px;
}
<div class="outer-container">
<div class="inner-wrap">
<div class="container-inner"></div>
</div>
</div>
try giving padding to outer container instead of giving margin to inner container.
.outer-container {
width: 360px;
height: 500px;
background: #555;
overflow: scroll;
padding: 10px;
}
.container-inner {
width: 960px;
height: 300px;
background-color: #0D47A1;
display:block
}
You need one more wrap between parent and child div element.
Consider the following markup:
<div class="outer-container">
<div class="middle-container">
<div class="inner-container"></div>
</div>
</div>
And add padding + width on this middle element:
.middle-container {
padding: 10px;
width: 960px;
}
Output Image:
Working Demo:
* {box-sizing: border-box;}
.outer-container {
width: 360px;
height: 500px;
background: #555;
overflow: scroll;
}
.middle-container {
padding: 10px;
width: 960px;
}
.inner-container {
background-color: #0D47A1;
height: 300px;
}
<div class="outer-container">
<div class="middle-container">
<div class="inner-container"></div>
</div>
</div>
I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)
This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
You can use media queries to alter the css on smaller screen.
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#media (max-width: 435px) {
#outer > div {
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
float:none;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
Use Media query like this:
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.
Use your .inner elements as grid-elements and wrap content inside them into .inner-content
Wrap all inners into a row to get rid of the outer-gutter
Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
Inspect the code: http://jsfiddle.net/uhh2jwe2/5/
* {
box-sizing: border-box;
}
/* flexible outer container */
.outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: hidden;
background-color: red;
}
/* remove outer gutter */
.row {
margin: 0 -10px;
}
/* .inner will take care of the width */
.inner {
width: 33.33%;
max-width: 150px;
float: left;
padding: 0 10px;
}
/* .inner-content take care of the height */
.inner-content {
height: 150px;
color: #fff;
background: blue;
}
#media (max-width: 435px) {
/* this wraps .inner elements below each other and extends width */
.outer .inner {
padding: 10px 0;
width: 100%;
max-width: 100%;
float:none;
}
}
<div class="outer">
<div class="row">
<div class="inner">
<div class="inner-content">1</div>
</div>
<div class="inner">
<div class="inner-content">2</div>
</div>
<div class="inner">
<div class="inner-content">3</div>
</div>
</div>
</div>
I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.
This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.
.container {
background-color: green;
width: 510px;
}
.row {
font-size: 0;
margin: 0 -15px;
}
.block {
font-size: 12px;
padding: 0 15px;
display: inline-block;
}
.content {
width: 150px;
height: 150px;
background-color: red;
}
<div class="container">
<div class="row">
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
</div>
</div>
in your example, the first two divs are 170px wide (150+20), and the third is 150px wide because it doesn't have a margin, thats the problem.
avoid #media if you mant it to be fully responsive and not jumping from 4 items a line to 1 item a linefor example.
you can solve your issue by simply adding a margin-right:20 to your last element, but it is better to to like so :
.inner1, .inner2, .inner3{
float: left;
width: 150px;
height: 150px;
margin: 2px 10px; //left & right sides to half of 20px
background-color: blue;
}
because it will split the margin to the two sides, making it more symetrical.
For laying out differently sized divs.
if all your divs can change size but stay equal, it will work, but if the first div is 70 and the 2nd and 3rd are 50, there will always be two divs on the bottom line at some point.
I think I've found the simplest solution to what I'm trying to do without having to use media queries. I simply added the right margin to all fields including the last field rather than adding it to every field except the final field.
I then wrap all the fields in another div and add a minus margin (the same size as the gaps) so that the fields will wrap when they hit the side of the container. Here's a fiddle with the solution: http://jsfiddle.net/rahg1ky3/
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
#inner {
margin-right: -20px;
}
.cont {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
<div id="outer">
<div id = "inner">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
</div>
</div>
I am attempting to position two elements in the center of their given space regardless of the size of the page.
Example
https://jsfiddle.net/57q9dn78/
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.right {
float: right;
margin-right: 75px;
}
.left {
float: left;
margin-left: 75px;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
In the example the #parent div is set to 500px and the others have margins based on that. Normally parent would be 100% width. This is just an example of what I wanted. Is there a way to use calc or something else in CSS so as the page changes in size the margin changes or goes away entirely based on the face that each child is 100px.
You could use flexbox:
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
display: flex;
justify-content: space-around;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
Just make the children's container 50%
.child {
height: 20px;
width: 50%;
float:left;
text-align:center;
}
.child span {
background-color: #ff0000;
}
https://jsfiddle.net/foreyez/xqvffyqj/
Just change the margin to 15% instead of 75px, which is 75px/500px:
.right {
float: right;
margin-right: 15%;
}
.left {
float: left;
margin-left: 15%;
}
Here is a working example
.child-holder {
width: 50%;
float: left;
}
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
margin: auto;
max-width: 100%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
}
<div id="parent">
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
</div>
Before posting this I attempted to delete the question because none of the given answers handled the responsive design requirement. So, giving that parent needs to be 100%, you can make 2 boxes of 50% width and the auto margin on the child will allow the children to be centered within their respective spaces regardless of the size of parent or page.
Here is 2 simple variants, the first having fixed width and margin left/right (using your sample fixed width's), the second with fluid and translate left/right.
The middle for 2 element is 33% and then you reduce with 66% of their width.
If one want them centered at 25%, just change to 25% and reduce with 50%.
Snippet fixed width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
margin-left: calc(33.3% - 66.6px);
}
.right {
float: right;
margin-right: calc(33.3% - 66.6px);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
Snippet fluid width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
position: relative;
left: 33.3%;
transform: translateX(-66.6666%);
}
.right {
float: right;
position: relative;
right: 33.3%;
transform: translateX(66.6666%);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
min-width: 200px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
When i resize my browser my div tags resize themselves. I've added min-width: which i thought would stop it but it does not.
html:
<div id="wrapper">
<div id="adleft"></div>
<div id="adright"></div>
css:
#wrapper{
max-width: 50%;
margin: 0 auto;
}
#adleft {
height: 500px;
min-width: 48%;
background-color: red;
float: left;
}
#adright {
height: 500px;
min-width: 48%;
background-color: red;
float: right;
}
The reason is that you are applying a min-width as a % not in px.
Using a % means that when the browser window shrinks 48% becomes less and less pixels. If you define the min-width in pixels it will stop shrinking when it hits the minimum number of pixels you declare.
Html:
<div id="wrapper">
<div id="ad">
<div id="adleft"></div>
<div id="adright"></div>
</div>
Include this in your Css:
#ad
{
Display: table;
Margin-left: auto;
Margin-right: auto;
}
#adleft
{
height: 500px;
min-width: 48%;
background-color: red;
Margin-right:20px;
}
#adright
{
height: 500px;
min-width: 48%;
background-color: red;
}
This worked for me :
Html:
<div id="wrapper">
<div id="adleft"></div>
<div id="adright"></div>
css:
#wrapper{
max-width: 960px;
min-width: 960px;
margin: 0 auto;
margin-top: 30px;
}
#adleft {
height: 500px;
width: 48%;
background-color: red;
float: left;
}
#adright {
height: 500px;
width: 48%;
background-color: red;
float: right;
}