Position of div blocks (simple css issue) - html

I have an issue in my project:
<div id="div1"></div>
<div id="div2"></div>
I do in css for desctop #media (min-width:768px) options display block and float left. For first with 70% for second 30%.
In mobile I need 100% width both of them and need to display div2 on top div1. Float right for first and float left for second not working. Need your help guys.

How about this? Flex box allows you to specify the direction of it and also if you are really picky you can specify order number on the item itself.
#container {
display: flex;
}
#div2 {
width:30%;
height:300px;
background:red;
}
#div1 {
width:70%;
height:300px;
background:green;
}
#media only screen and (max-width: 768px) {
#div1, #div2{
width: 100%;
}
#container {
flex-flow: column-reverse;
}
}
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>

If you want div2 on top, your html have to move div2 on top of div1
#div2 {
width:30%;
height:300px;
background:red;
float:right
}
#div1 {
width:70%;
height:300px;
background:yellow;
float:left
}
#media only screen and (max-width: 768px) {
#div1, #div2 {
width:100%;
}
}
<div id="div2">div2</div>
<div id="div1">div1</div>

Related

How to set a DIV on the right side of the browser with percentage margin that make it get closer to the edge when resizing the browser?

I will try to explain it better here
An element placed on the page and have 10% from the left
when the page size changes the size of the margin to the left getting smaller
10% from 1400px - 140px , 10% from 1000px - 100px (pretty basic)
Now how do I make it happen to an element to the right
so when browser 1400px the margin to the right will be 140px
and when changing the width of the browser to 1000px the margin to the right will be 100px
sorry I don't have an example to show
You can use viewport width to accomplish this.
.element {
margin-left:10vw;
}
I think your question doesn't provide enough information. But I will give you several possible answers.Hope they help you.
First solution
body
{
position:relative;
}
.element
{
position:absolute;
right: 10%
}
Second solution
body
{
position:relative;
}
.element
{
position:absolute;
margin-right:10vw;
}
Third solution
body
{
padding-right:10%;
}
body
{
background-color:#FEFEFE;
height:650px;
direction:rtl;
position:relative;
}
.container
{
width:100%;
padding-right:10%;
height:100%;
}
.element
{
width:200px;
height:100px;
}
.first
{
background-color:red;
}
.second
{
position: absolute;
background-color: blue;
margin-right: 10%;
top: 120px;
right: 0;
}
.third
{
position:absolute;
background-color:green;
right:10%;
top:240px;
}
<body>
<div class="container">
<div class="element first">
<h3>first div</h3>
</div>
<div class="element second">
<h3>second div</h3>
</div>
<div class="element third">
<h3>third div</h3>
</div>
</div>
</body>

css two columns - one fixed width

I want to have two columns (content and sidebox), where sidebox will have fixed width and content will shrink as necassary.
At some point, they will both stack to 100% width, but i want to have content first. The problem with this solution is that sidebox comes first.
I don't want to use floats and percentage because i don't want to shrink the sidebox.
html:
<aside class="sidebox"> <!-- i don't want this to come first after media query applied -->
sidebox
</aside>
<section class="content">
content
</section>
css:
.content {
margin-right:200px;
height:100px;
background-color:red;
}
.sidebox{
width:180px;
float:right;
height:100px;
background-color:yellow;
}
#media (max-width: 500px) {
.sidebox {
float:none;
width: auto;
}
.content {
margin-right:0px;
}
}
DEMO: https://jsfiddle.net/72Lad2zf/
You can use the following:
.container {
display:table;
width:100%;
}
.content {
display:table-cell;
height:100px;
background-color:red;
}
.sidebox {
display:table-cell;
width:180px;
height:100px;
background-color:yellow;
}
#media (max-width: 500px) {
.content, .sidebox {
width:100%;
display:block;
}
}
<div class="container">
<section class="content">content</section>
<aside class="sidebox">sidebox</aside>
</div>
Updated Fiddle
You need change the html structure and need to use float in .content but float doesn't shrink the width.
html
<section class="content">
content
</section>
<aside class="sidebox">
sidebox
</aside>
css
.content {
height:100px;
background-color:red;
float:left;
width:calc(100% - 200px);
}
working Demo

How to apply remaining width to a div in the middle of 2 other divs

I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green;
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
Edit
Classically, this would look like this:
CSS:
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
#div3 {
float:right;
width:400px;
height:200px;
background-color: green;
}
HTML:
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
DEMO: http://jsfiddle.net/NicoO/5AJkn/
P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.
If your browser support calc, you coudl try:
#div2 { float:left; width:calc(100% - 800px); height:200px; }
Add the margins too, if any.
<style>
.box{display: table;width: 100%;}
#div1{width:400px; height:200px;background: #000;display: table-cell}
#div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
#div3{width:400px; height:200px;background: #000;display: table-cell}
</style>
<div class="box">
<div id="div1"></div>
<div id="div2">ds</div>
<div id="div3"></div>
</div>
It is the same questions that :
Positioning two divs, one with fixed width(left div) and other in percentage(right div)
Two divs side by side, one with google map and second with fixed width
This Codepen fix your problem
Apply position: relative for their parent (if it is not positioned already) and
apply the following to div2:
#div2{
position:absolute;
left:400px; /* width of div1 */
right:400px; /* width of div3 */
height:200px;
}
JSFiddle
You can use css3 calc() function if older browser support is not an issue.
#div2{
display:inline-block;
width: calc(100% - 800px); /*100% - width of div1 and div3 */
height:200px;
}
JSFiddle

One fixed width div and two variable

I am trying to get three divs lined up beside each other. the left div has a fixed width, the middle has a percent width, and the third should take up the remaining space. Here is the code I have come up with:
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
background-color:#CCC;
height:40px;
}
I have made the two left divs transparent so you can see that the background of the right div extends all the way to the left of the page. How can I fix this? I have tried floating the right div however it doesn't fill the rest of the space. here is a fiddle I used.
The easiest solution would be to just wrap the 3 div Elements in a container, like this:
<div id="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
And then just make the child elements display: table-cell and the parent display: table and width: 100%.
#left, #middle, #right {
display: table-cell;
}
#container {
display: table;
width: 100%;
}
I order to force the #left Element to keep it's width even when there is very little space, I'd suggest to also add min-width: 200px to it's CSS.
Demo: http://jsfiddle.net/eMbV7/11/
S.B. provided a great answer, but here's an alternative method just for fun. You could have everything display:block; like normal, then float:left;, and use calc() to get the width of the final column. It would just be 100% - 55% - 200px, or compressed, 45% - 200px.
Benefit to this is that you don't need to have the #container. Potential issue is browser support, mostly mobile browsers. See: http://caniuse.com/calc
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#container {
width: 100%;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float:left;
background-color:#CCC;
height:100px;
width:calc(45% - 200px);
}
Demo: http://jsfiddle.net/eMbV7/9/
Use this code, I have wrapped all div in a container div.
<div class="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
& css
.container{
display:block;
padding:0 0 0 200px;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
margin:0 0 0 -200px;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float : right;
width: 45%;
background-color:#CCC;
height:40px;
}
Here is jsFiddle link DEMO

Problems with float and max-width

I try to build a layout with 2 floating DIVĀ“s on higher resolution and without floating on small resolution. One (subnavigation) with a fixed width and one (content) with a max-width.
here is an example code of the HTML:
<div id="subnavigation">
lorem ipsum...
</div>
<div id="content">
lorem ipsum...
</div>
and here the CSS:
#subnavigation {
float:right;
width:320px;
}
#content {
max-width:730px;
}
#media only screen and ( max-width:800px ) {
#subnavigation, #content {
float:none;
width:auto;
}
}
My problem now is that I need the subnavigation below the content without the float. Have someone an idea?
I tried a little bit with the calc() in CSS to get a fixed width for the content (to be able to float that), but it doesn't really work on my android-phone.
You could possibly use some negative margin sorcery.
Heres one way to approach it (probably a bit overcomplicated)
HTML
<div class="page">
<div class="content-wrapper">
<div class="content">
..content..
</div>
</div>
<div class="sidebar">
..content..
</div>
</div>
CSS
.page {
width:1050px; /*320px + 730px*/
max-width:100%;
margin:0 auto;
background:grey;
}
.content-wrapper {
float:left;
width:100%;
}
.content {
margin-right:320px;
background:orange;
}
.sidebar {
float:left;
width:320px;
margin-left:-320px;
background:green;
}
#media (max-width:480px) {
.content-wrapper {
float:none;
width:auto;
margin-bottom:20px;
}
.content {
margin-right:0;
}
.sidebar {
float:none;
margin:0;
width:auto;
}
}
Fiddle: http://jsfiddle.net/Varinder/vV4LT/