Here in my screen, I have given the margin-left and margin-right equal right now. But I need is, margin-right should be 'x' and margin-left should be 'x/1.5'. While the margin-right is auto as per the window size.
You can use the function calc() to do that.
.myDiv {
margin-right: 1em;
margin-left: calc(1em / 1.5);
}
Check this if you want more info about that function. It's pretty interesting tho https://developer.mozilla.org/en-US/docs/Web/CSS/calc
I suspect you are trying to center the element then to offset it slightly from the center by having the auto configuration but without equal values.
Here is an idea where you can rely on flexbox to achieve this behavior:
.wrapper {
margin:20px;
}
.box {
width:80px;
height:50px;
background:blue;
margin:auto;
}
.flex {
display:flex;
}
.flex:before,
.flex:after{
content:"";
}
.flex:after {
flex-grow:1.5; /*will grow more than the before by 1.5 */
}
.flex:before {
flex-grow:1;
}
<div class="wrapper">
<div class="box"></div>
</div>
<div class="wrapper flex">
<div class="box"></div>
</div>
you need to define width with for right in numbers, that can be find with js/jquery then use this:
Just updated code, please check now
Margin Issue
Hope this will help.
You can do this using css custom-properties and media-queries:
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
background: lime;
}
.box-with-margin {
--margin-value: 2rem;
margin-left: var(--margin-value);
margin-right: calc(3 * var(--margin-value));
}
#media (max-width: 1600px) {
.box-with-margin {
--margin-value: 1rem;
}
}
#media (max-width: 700px) {
.box-with-margin {
--margin-value: 0.5rem;
}
}
<div class="container">
<div class="box"></div>
<div class="box box-with-margin"></div>
<div class="box"></div>
</div>
Related
i'm having big issues trying to convert 3 divs from horizontal to vertical.
The code below shows that for a screen bigger than 1200px, everything works fine.
What i want is a responsive behaviour: by reducing the browser's width, the 3 divs are positioned one below the other. Currently, the code will adjust so that 2 divs are in the first row if there is room for it.
HTML:
<div class="example">
<div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
<div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
<div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>
and CSS:
.example {
background-color: black;
padding: 10px 20px;
text-align: center;
}
.example-item {
font-size: 0.7em;
display: inline-block;
padding: 10px 10px;
}
.example-item-1 {
background-color: blue;
}
.example-item-2 {
background-color: red;
}
.example-item-3 {
background-color: green;
}
Actual result, what i don't want
Desire result, what i want
You can use this css code and change the "max-width" property with your own decision:
#media screen and (max-width: 900px) {
.example-item {
display: block;
}
}
jsfiddle:
https://jsfiddle.net/mr_seven/1ktcqay4/2/
you can change result area width to see what will be happened if screen width changes.
In all honesty I would look at using a grid system e.g. bootstraps grid system or even better checkout flex box.
However to simply answer the question you could do this:
.container{
text-align:center;
}
.box{
height:20px;
width:150px;
border:1px solid black;
display: block;
margin:0 auto;
}
#media only screen and (min-width: 768px) {
.box {
display: inline-block;
}
}
.box1{
background:steelblue;
}
.box2{
background:indianred;
}
.box3{
background:coral;
}
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
https://jsfiddle.net/y7c96sp8/
I would like to place to DIVS (grey & red) inside a DIV (black) under the first DIV (black) when you resize the window and the screen is less than 1024 px. Take a look at the example under. You can also see the image attached.
I would really like som advice here, im totally lost here at the moment.
This is how I want it to be on screens more than 1024px:
<div id="black">
<div id="grey"></div>
<div id="red"></div>
</div>
This is how I want it to be on screens less than 1024 px:
<div id="black"></div>
<div id="grey"></div>
<div id="red"></div>
There is no need to duplicate the content.
#black{background:black;overflow:hidden;}
#grey, #red{
min-height:100px;
margin:2%;
float:left;
width:47%;
}
#grey{background:gray;margin-right:1%}
#red{background:red;margin-left:1%}
#media (min-width:1024px){
#black{padding-top:100px;}
#grey, #red{
float:none;
width:auto;
margin:0;
}
}
<div id="black">
<div id="grey"></div>
<div id="red"></div>
</div>
Sorry, but that is not possible as written.
You cannot move items outside their containing structures using CSS. You can only reformat them within their present structure.
Optionally, you can duplicate the existing black div and show/hide one or the other based on media queries (screen size).
Or, you can use jQuery/javascript to move the DOM items. But CSS alone cannot do this.
Using just CSS (with media queries) and two container <div>s to separate logic:
#media (max-width: 1024px) {
.large { display: none; }
.small { display: block; }
.black { height: 100px; }
}
#media (min-width: 1025px) {
.large { display: block; }
.small { display: none; }
.red, .grey { float: left; }
.black:after { content: ""; display: table; clear: both; }
.red { width: calc(50% - 5px); margin-left: 10px; }
.grey { width: calc(50% - 5px); }
}
.large {
height: 200px;
}
.small {
height: 200px;
}
.black {
background-color: black;=
height: 100px;
padding: 10px;
box-sizing: border-box;
}
.red {
background-color: red;
height: 100px;
}
.grey {
background-color: grey;
height: 100px;
}
<div class="large">
<div class="black">
<div class="grey"></div>
<div class="red"></div>
</div>
</div>
<div class="small">
<div class="black"></div>
<div class="grey"></div>
<div class="red"></div>
</div>
Above snippet better viewed in full page or this codepen
I have searched high and low for days and trying to get two divs side by side (50% wide each) and a second div below at 100% wide...also the two top divs need to change with responsive vieing. i.e right div falls under the left div when screen size is at say 960px wide.
I have tried this code, but the right div displays smaller when you start to reduce the browser size.
I'm sure I have this all wrong, but it's a learning stage for me, so sorry for a basic question! Any help would be so great!!!
Sorry...I can post an image to explain, but to help clear it up, I need in one row, two divs side by side (50% wide each) and in row 2, 1 div that takes up 100% width.
OK! I can add an image now of what I need to achieve! Images 1, 2, 3 will be different sizes along with the amount of text below the image. The layout (example) image is not to scale, and on the site will need a clear background (no colour) The background colours are just to show different the divs in the example.
And this is how it should look in responsive...
HTML:
<div class="custom_div">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
CSS:
.custom_div {
overflow:hidden;
}
.custom_div div {
min-height: 100%;
padding: 10px;
text-align: center;
}
#one {
background-color: gray;
float:left;
margin-right:0px;
width:50%;
}
#two {
background-color: white;
overflow:hidden;
margin-right: 20px;
margin: 1px;
width:auto;
min-height: 50%;
}
#three {
background-color: yellow;
margin-right:auto;
margin-left:auto;
width: 100%;
}
#media screen and (max-width: 600px) {
#one {
float: none;
margin-right:0;
width:auto;
}
}
UPDATE:
Demo Fiddle
The only foolproof way to do this to ensure correct sizing on differing levels of content:
HTML
<div class='table'>
<div class='cell'></div>
<div class='cell'></div>
<div class='caption'></div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
height:20px;
border:1px solid black;
}
#media screen and (max-width: 960px) {
.table .cell, .caption {
display:block;
}
}
Original Answer
How about the below?
Demo Fiddle
HTML
<div class="left">left</div>
<div class="right">right</div>
<div class="full">content</div>
CSS
div {
border:1px solid black;
box-sizing:border-box;.
-moz-box-sizing:border-box;
}
.left, .right {
width:50%;
}
.left {
float:left;
}
.right {
float:right;
}
#media screen and (max-width: 600px) {
.left, .right {
width:auto;
float:none;
}
}
You can try below code:
Working Demo
html, body{height:100%;}
.custom_div{width:100%;}
.custom_div div {
background:#ccc;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#one, #two {
width:50%;
float:left;
height:100%;
}
.clearfix{clear:both; display:block;}
#media screen and (max-width: 960px) {
#one, #two {
width:auto;
float:none;
}
}
Checkout the Updated Fiddle : http://jsfiddle.net/PEvLt/3/
I've removed unnecessary properties.
The problem was with the padding and margins.
The thing you should add is always use BOX-SIZING Property.
It'll help you when you are using padding with the widths/heights defined in %
More about Box-Sizing.
http://css-tricks.com/box-sizing/
UPDATE : You need to wrap the first column into one single div or need to clear floats after first 2 columns to avoid overlapping of the third column.
HTML :
<div class="first_two">
<div id="one">
<img src="http://lorempixel.com/500/200/" width="100%"/>
</div>
<div id="two">
<img src="http://lorempixel.com/300/200/" width="100%"/>
</div>
<div class="clear"></div>
</div>
<div id="three">three</div>
CSS :
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.first_two {
background:#3498db;
overflow:hidden;
}
#one {
float:left;
width:50%;
height:100%;
}
#two {
width:50%;
float:left;
height:100%;
}
#three {
background-color:#8e44ad;
width: 100%;
}
.clear{
clear:both;
}
#media screen and (max-width: 600px) {
#one,#two {
width:100%;
}
}
you can set the width of body tag using javascript
<script>
document.getElementsByTagName("body")[0].style.width=screen.width+"px";
</script>
I am trying to achieve the following in a two column float css design
My css for the two is this:
.div1 {
width: 25%;
float:left;
}
.div2 {
width: 75%;
float: right;
}
.container {
width:960px;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.container {
width: 100%;
}
}
my html is this:
...
<div class="container">
<div class="div1">
... content inside
</div>
<div class="div2">
<img src="photo_loc"/>
</div>
</div>
I have Div I and Div II. Div I is 25% width and Div II is 75% width. When I go to 320px (iphone portrait) using responsive design Div II goes below Div I, which I assume is the normal process.
What I am trying to do is have Div II above Div I using floats, how can this be achieved through css?
Working Fiddle
.div1 {
width: 25%;
float:left;
background:orange;
}
.div2 {
width:75%;
float: right;
background:red;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.div1{
position:relative;
top:100px;
}
.div2{
position:absolute;
top:0;
height:100px;
}
}
Swap the HTML positions of div1 and div2 around.
It may not be semantically correct in terms of how the page should be layed out but it will still work.
Keep the CSS the same and have your html like this
<div class="div2">Text for box 2</div>
<div class="div1">Text for box 1</div>
Demo: http://jsfiddle.net/u3Ng3/1/
In CSS, I can do something like this:
http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png
But I've no idea how to change that to something like:
http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png
The height is not fixed
Please help me do it! Thank you all in advance!
I use this, pure css.
The html:
<div id="container" class="holder">
<div id="column-one" class="even-height">TEXT</div>
<div id="column-two" class="even-height">TEXT</div>
</div>
The css:
.holder {
overflow: hidden;
clear: both;
}
.holder .even-height {
float: left;
padding-bottom: 100000px;
margin-bottom: -100000px;
}
#column-one { width: 30%; }
#column-two { width: 70%; }
The columns can be any width you want actually. Anyway, super simple and cross-browser friendly.
Variable height wrapper with equal-height columns
HTML
<section class="wrapper">
<section>a</section>
<aside>b<br>c</aside>
</section>
CSS
/* Set #max-column-height to greater than the maximum height of the tallest column */
.wrapper {
overflow:hidden;
margin:10px;
}
.wrapper > section {
background:red;
width:50%;
float:left;
padding-bottom:1000px; /* #max-column-height */
margin-bottom:-1000px; /* #max-column-height */
}
.wrapper > aside {
background:orange;
width:50%;
float:left;
padding-bottom:1000px; /* #max-column-height */
margin-bottom:-1000px; /* #max-column-height */
}
I like broh's/manonatelier's better (+1 to each), but if you really want a solution that is utterly independent of the amount of content inside, I would use the old technique of design 'hooks': http://jsfiddle.net/GTY8P/
...Uses more markup and CSS.
Make a wrapper with a div like this :
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
Apply a style like that :
.wrapper {
height: 400px;
}
.wrapper .box{
float: left;
height: 100%;
width: 200px;
background-color: red;
margin-right: 10px;
}
Didn't try, but will work.
EDIT jsFiddle : http://jsfiddle.net/NXjk4/
Check this
HTML
<div class="box" >
<div class="box1">TEXT</div>
<div class="box2">TEXT</div>
</div>
CSS
.box{
background:#000;
height:60px
}
.box1{
float: left;
background-color: #fff;
margin: 10px;
text-align:center;
}
.box2{
float: left;
background-color: red;
margin: 10px;
margin-left:5px;
text-align:center;
}
See the demo here : http://jsfiddle.net/X3UY9/1/