Essentially I am looking for this:
Two Divs next to each other, that then stack with responsive change
However, the difficulty lies in that I need Div #2 (the right div) to stack on top of Div #1 (the left div), instead of being pushed below it.
What I have to put the divs side by side is as follows:
<div class="container" style="width: 1100px">
<div class="left-div" style="float: left; width: 700px;"> </div>
<div style="float: left; width: 300px;"> </div>
</div>
What I have tried is doing a css media query that simply pushes the left div down 300px, using the following:
#media screen and (max-width: 1100px) {
.left-div {
position: relative;
top: 350px;
}
}
However, this doesn't cause the right div to snap to the left and stack on top.. Any ideas?
Use float:right and change the order of your html.
.right-div {
float: right;
width: 30%;
background-color: red;
}
.left-div {
float: right;
width: 70%;
}
#media screen and (max-width: 1100px) {
.container > div {
width: 100%;
}
}
<div class="container" style="max-width: 1100px;">
<div class="right-div">RIGHT DIV</div>
<div class="left-div">LEFT DIV</div>
</div>
Try this https://jsfiddle.net/1aj7wvyz/
HTML
<div class="container">
<div class="divs div-2">Div 2 </div>
<div class="divs div-1">DIV 1 </div>
</div>
CSS
.divs {
display: inline-block;//<-Here you only need this
padding: 100px;
border: 1px solid black;
margin: 20px;
}
.div-2 {
float: right:
}
.div-1 {
float: left;
}
#media screen and (max-width: 400px) { //You will change width of course
.divs {
display: block;
margin: 0 auto;
}
}
Related
I have three divs in a column format that have widths as a percent of the window. Once the screen gets to 1300 px or less, I want the two rightmost divs to stop getting smaller and basically overtake the leftmost div (there will be content in the right and middle divs but nothing in the left one). I made a media query that says when the screen gets to 1300px, the left div's width becomes 0, and the middle and right have fixed widths and float right. However, when I do this, the middle and right divs always switch places so that the middle one is all the way to the right and the right one jumps to the left of the middle. How do I stop the two divs from switching places?
I have tried changing the display of the divs to block or inline but nothing has worked.
.column {
float: left;
padding: 10px;
height: 600px;
display: inline-block;
}
.left {
width: 20%;
background-color: red;
}
.middle {
width:60%;
background-color: orange;
}
.right {
width:20%;
background-color: yellow;
}
#media screen and (max-width: 1300px) {
.left {
width: 0px;
}
.middle {
width:765px;
float: right;
}
.right {
width: 255px;
float: right;
}
}
<div class="columns">
<div class="column left"></div>
<div class="column middle">
<h3>Lorem Ipsum </h3>
</div>
<div class="column right">
<div class="form-box"></div>
</div>
</div>
After the window becomes less than 1300px, I just want the middle and right columns to float right with the middle one to the left of the right one, but instead they always switch places.
You will be better suited using flexbox to do what you are trying to do. Also, you used the CSS class .column instead of the .columns definition you have in your css.
Try this:
.columns {
padding: 10px;
height: 600px;
display: flex;
flex-direction: row;
/*flex-wrap: wrap;*/
}
.left {
flex: 1 1 auto;
width: 20%;
background-color: red;
}
.middle {
flex: 1 1 auto;
width: 60%;
background-color: orange;
}
.right {
flex: 1 1 auto;
width: 20%;
background-color: yellow;
}
#media screen and (max-width: 1300px) {
.left {
display: none;
}
.middle {
width: 500px;
flex: 1 0 auto;
}
.right {
width: 500px;
flex: 1 0 auto;
}
}
/*#media screen and (max-width: 650px) {
.middle {
width: 100%;
}
.right {
width: 100%;
}
}*/
<div class="columns">
<div class="column left"></div>
<div class="column middle">
<h3>Lorem Ipsum </h3>
</div>
<div class="column right">
<div class="form-box"></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 want to create a container so that i have a simple layout with a nav bar at the top and a nav bar on the left side which is about 150px. As the screen gets smaller though, i want the left nav to entirely disappear and have the following occur:
1) Replace the 150px (icon + text) nav bar with just an icon nav bar on the left
or 2) remove/hide the nav bar entirely and have a burger bar in the top nav which will expand a vertical menu down. This would be the exact same menu as the one before on the left except it would not be displayed from the top nav rather than the side.
What i've done so fat?
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Awesome Bootstrap 3 Sidebar Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
/* MORE THAN 75 */
body {
background-color: skyBlue;
}
/* LESS THAN 75 */
#media (max-width: 74.9em) {
body {
background-color: pink;
}
}
/* LESS THAN 62 */
#media (max-width: 61.9em) {
body {
background-color: blue;
}
}
/* LESS THAN 48 */
#media (max-width: 47.9em) {
body {
background-color: green;
}
}
/* LESS THAN 34 */
#media (max-width: 33.9em) {
body {
background-color: red;
}
}
.navbar-outer {
width: 600px;
}
.aav {
background-color: black;
color: white;
border-style: solid;
border-color: red;
}
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row aav">
<div class="col-xs-6 col-md-2" style="width:100px; border:solid; color:white;">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-4</div>
</div>
I'm trying to create the left nav and the content pane. I'm thinking too much of java i guess because i'm not sure how to go about the implementation. Any feedback is appreciated.
I'm stuck because i don't want the left bar to scale, i want it to be a fixed width until the screen gets too small for it.
This is a complicated question, but the gist of it is that you can set a container (or just set styles on the body element itself) to hold your nav, sidebar, and general content area, and then modify their widths and heights with media queries.
So given your page is 100vw across, for example, your sidebar could be 150px wide as you mentioned, and that would leave 100vw - 150px for the width of the main content area. You'd float them next to each other.
main {
width: 100vw;
}
aside {
float: left;
width: 150px;
}
section {
float: left;
width: calc(100% - 150px);
}
When you want the sidebar to narrow, you can adjust the width of the sidebar and the calc expression for the main content area. (You'd also hide the labels next to your icons.)
#media all and (max-width: 900px) {
aside {
width: 40px;
}
section {
width: calc(100% - 40px);
}
}
When you get to mobile view, your sidebar can simply become 100% width of the screen, and then you'll need additional CSS to change the display of the icons and whatnot.
#media all and (max-width: 600px) {
aside {
width: 100%;
}
section {
width: 100%;
}
}
That's the general principle you'll want to work with, but a lot of the other CSS will probably depend exactly on your site. Below is an example.
main {
width: 100vw;
height: 100vh;
}
nav {
background-color: #5BA1CB;
height: 80px;
}
nav .title {
width: 130px;
height: 60px;
margin-top: 10px;
margin-left: 10px;
background-color: rgba(255, 255, 255, 0.2);
float: left;
}
nav .burger {
float: left;
margin-left: 20px;
height: 100%;
}
nav .burger img {
margin-top: 10px;
}
aside {
background-color: #144360;
width: 150px;
height: calc(100% - 80px);
float: left;
}
aside .icon {
margin-left: 5px;
margin-top: 50px;
}
aside .icon:first-child {
margin-top: 100px;
}
aside .icon span,
aside .icon img {
vertical-align: middle;
display: inline-block;
}
section {
float: left;
width: calc(100% - 150px);
height: 100%;
background-color: #DAEAF4;
}
#media all and (max-width: 900px) and (min-width: 601px) {
aside {
width: 40px;
}
aside .icon span {
display: none;
}
section {
width: calc(100% - 40px);
}
}
#media all and (max-width: 600px) {
aside {
width: 100%;
height: 150px;
}
aside .icon {
float: left;
width: 100px;
}
aside .icon:first-child {
margin-top: 50px;
}
section {
width: 100%;
}
}
<main>
<nav>
<div class="title"><span>Title Area</span></div>
<div class="burger">
<img src="http://placehold.it/60x60?text=BURGER" />
</div>
</nav>
<aside>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
</aside>
<section>
<h1>Body</h1>
</section>
</main>
I am making a comment section for my project and I've added display: none to answear__avatar on max-width: 980px and after that those divs are overlaping each other. How do I stop them from overlapping?
Here's my code:
.answear__wraper {
margin-bottom: 10px; }
.answear__answear, .answear__answear--dissucsion {
position: relative;
height: 100%; }
.answear__answear {
width: 100%; }
.answear__answear--dissucsion {
width: 89.4%;
float: right;
}
#media screen and (max-width: 980px) {
.answear__answear--dissucsion {
width: 95%; } }
.answear__avatar {
display: inline-block;
width: 100px;
height: 100%;
}
#media screen and (max-width: 980px) {
.answear__avatar {
display: none; } }
.answear__content {
text-align: left;
position: absolute;
}
<div class="answear_container">
<div class="answear__wraper">
<div class="answear__answear">
<div class="answear__avatar"><img src="images/user0.jpg" class="image__lg" /></div>
<div class="answear__content">
<div class="answear__user">
</div>
</div>
</div>
<div class="answear__answear--dissucsion">
<div class="answear__avatar"><img src="images/user0.jpg" class="image__lg" /></div>
<div class="answear__content">
<div class="answear__user">
</div>
</div>
</div>
</div>
</div>
Use visibility: hidden; the element will still take up the same space as before. The element will be hidden, but still affect the layout.
By using display: none; the page will be displayed as if the element is not there.
I have this code:
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.wrapper {
max-width: 500px;
margin: 0 auto;
background: grey;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}
<section class="wrapper clearfix">
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</section>
DEMO
The container won't wrap around its elements when media query gets activated. The same thing happens with floated children (which is normal, I guess).
Demo
one option is to add an "inner" wrapper; just a wrapper within your wrapper. you can make it display inline-block and set text-align center on the parent wrapper. Finally, remove the grey background from the wrapper and apply to the inner wrapper.
just one drawback is that when you make the window really small the .col divs are not lined up on the left. not sure if that's an issue for you
html
<section class="wrapper clearfix">
<div class='inner-wrap'>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</div>
</section>
css
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.inner-wrap {
display: inline-block;
background: grey;
}
.wrapper {
text-align: center;
max-width: 500px;
margin: 0 auto;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}