I am trying to achieve 3 column layout with responsive divs (16/9), and on smaller screens make this 2 column, or single column layout.
The problem is guessing padding for divs based on their width, which is in percentage. Is this possible?
Test on jsfiddle so you can resize body to see behavior with different columns: https://jsfiddle.net/cLr010kz/6/
body{
margin:0;
}
.wrap{
max-width:960px;
}
.a{
position:relative;
top:0;
left:0;
width:100%;
float:left;
padding-bottom: 47%;
overflow:hidden;
cursor: pointer;
background:red;
}
.a:nth-child(1){
background:blue;
}
.a:nth-child(2){
background:green;
}
#media (min-width: 500px) {
.a{
width: 50%;
padding-bottom: 27%;
}
}
#media (min-width: 700px) {
.a{
width: 33.3333333%;
padding-bottom: 19%;
}
}
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
Related
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>
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/
I've been working on a two row and 1 column layout with flexbox, I'm using flexbox because I don't think css2.1 can fill the remainding space for box-B. In my example of my jsFiddle, I can't get box-C to shift up on the right hand side and also I can't get box-B to flex vertically and fill the contents can someone please help me with this layout
jsFiddle here
#container {
background-color:red;
width:100%; height:100%
}
#three-box-layout {
display:flex;
display:-ms-flex;
display:-webkit-flexbox;
display:-moz-flex;
height:100%;
-ms-flex-direction:column;
-webkit-flex-direction:column
}
.shuffle-box {
}
#box-a {
background-color:#f601ff; -ms-flex-order:1; -webkit-flex-order:1;
margin-right:30%;
}
#box-b {
-ms-flex:3;
-webkit-flex:3;
-moz-flex:3;
flex:3;
background-color:#37fe02;
margin-right:30%;
}
#three-box-layout #box-c {
-ms-flex:3;
-webkit-flex:3;
-moz-flex:3;
flex:3;
background-color:#02effe;
margin-left:70%; float:right;
}
<div id="container">
<div id="three-box-layout">
<div id="box-a" class="shuffle-box">
<div style="height:425px; background-color:pink">A</div>
</div>
<div id="box-b">B</div>
<div id="box-c">C</div>
</div>
</div>
You can do this with CSS tables (Flexbox isn't necessary)
Resize the browser to see the media queries in action!
FIDDLE1 (little content) / FIDDLE2 (lots of content)
Markup
<div class="container">
<div class="row1">
<div>A</div>
<div></div> /* give this div table cell 50% width on wide screens */
</div>
<div class="row2">
<div>B</div>
<div>C</div>
</div>
</div>
CSS
--
.container {
width: 800px;
height: 500px;
display:table;
text-align: center;
position: relative;
}
.row1 {
display:table-row;
max-height: 425px;
background: pink;
}
.row1 div {
display:table-cell;
width:50%;
}
.row2 {
display:table-row;
height: 100%;
}
.row2 div {
width: 100%;
height: 100%;
float:left;
background: green;
}
.row2 div + div {
background: aqua;
width: 50%;
height: 100%;
position: absolute;
top:0;
right:0;
}
#media (max-width: 1024px) {
.row1 {
width: 100%;
}
.row1 div + div {
display: none;
}
.row2 div {
width: 50%;
}
.row2 div + div {
position: static;
}
}
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/