Responsive CSS div positioning priority - javascript

first of all I would like to thank the members of this community for the huge amount of help I
found here in last few month. There wasn't a single project of mine which I finalized without your tips and tricks.
Right now I got a problem with a responsive layout where I need your kind help:
I got a layout like this:
http://codepen.io/Buzzjump/pen/tfeys
<div class='outer'>
<div class='sidebar_links'>Div1</div>
<div class='mitte_rechts'>
<div class='d2'>Div2</div>
<div class='d1'>Div3</div>
</div>
</div>
Now the current CSS
div{
display:inline-block;
background-color:#cdcdcd;
margin:0px; 0;padding:0px;width:150px}
.d1{
float:right;
background: blue;
color: white;
}
.d2{
background: orange;
}
.mitte_rechts{
padding:0;
width:70.81%;
float: left;
margin-left:0px;
}
.sidebar_links{
height: 200px;
float: left;
background: red;
}
.outer{
height: 230px;
min-width: 80%;
background-color:yellow;
margin-left: 20px;
overflow: hidden;
}
There is an outer box (outer) and two inner boxes (Div1 and mitte_rechts). In 'mitte_rechts' there are two more boxes(Div 2, Div3) and they are all aligned. What I want is that when the window is scaled down to a breakpoint (768) first Div3 is display under Div2 in mitte_rechts. Maybe I'm just blockheaded but is there a solution for this?
To this point no JS is used.
Thanks in advance.

Try out the following:
.d1 {
float: right;
background: blue;
color: white;
}
.d2 {
background: orange;
float: left;
}
#media screen and (max-width: 768px) {
.d1, .d2 {
float: none;
display: block;
}
}
By the way: You don't need inline-block on your divs. Inline-block is an alternative to floating. So either use floating or inline-block. I'm not a fan of inline-block because IE6 and IE7 don't support it.

try the following:
1) remove width:70.81%;' from '.mitte_rechts
2) add the following styling:
.d1, .d2{
float:left;
}
#media (min-width: 768px){
.mitte_rechts{
width:70.81%;
}
.d1{
float:right;
}
}

Related

how can I align three divs together and have one of them be disappear if the page size is of certain limit?

So I have three div with class as shown in the code snippet.
/* CSS Question #4 */
.box1 {
background-color: green;
width: 200px;
}
.box2 {
background-color: grey;
width: 200px;
}
.box3 {
background-color: aqua;
width: 200px;
}
<div>
<h1>Arrage the div:</h1>
<div>
<div class="box1">This one should be on the left side of the page</div>
<div class="box2">This one should be on the right side of the page</div>
<div class="box3">This one should be at the center of the page and it should disappear if the page become less than 800px.</div>
</div>
</div>
Im trying to make the box1 be on the left side, and make the box2 be on right side, and for box3 it needs to be in the middle and disappear if the page become less than 800px, as described in the divs themselves.
I have assigned float:left to box1 and float:right to box2 to have them each align to the left and right. But Im not sure about how I can get the box3 to be in the middle and disappear when the page is less than 800px.
I think, you should use media query.
Here below is some reference link for media query.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://learnlayout.com/media-queries.html
Above solution,
.box1 {
background-color: green;
width: 50%;
float:left;
}
.box2 {
background-color: grey;
width: 50%;
float:right;
}
.box3 {
background-color: aqua;
width: 100%;
clear:both;
}
media query
#media screen and (max-width: 800px) {
.box3 {
display:none;
}
}
Css all depends on what sizes you want the various boxes to be, personally I would set percentages to all three divs, say '33.33333333%' for the widths then write a media query that targets #media( max-width: 800px ) then set your middle div to display none and the left and right to 50% widths. This should give you the desired effect.
You should also move your third div to be in the second position or utilize flex to order them differently: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="boxes">
<div class="box1">This box should be on the left side of the page</div>
<div class="spacer"></div>
<div class="box3">This box should be at the center of the page and should disappear if the page is less than 800px.</div>
<div class="spacer"></div>
<div class="box2">This box should be on the right side of the page</div>
<br/>
</div>
.boxes {display: flex;}
.box1 {
background-color: green;
width: 200px;
float: left;
}
.box2 {
background-color: grey;
width: 200px;
float: right;
}
.box3 {
background-color: aqua;
width: 200px;
flex: auto;
}
.spacer {flex-grow: 1}
#media screen and (max-width: 800px) {
.box3 {
display:none;
}
}
That's how I did it anyway...

How to cut off div gradually

How do I cut off "A Outer" or others such as div/img/some elements as the browser screen goes under "A"?
A pic is better than thousand words, so here's a pic...
A and A outer are the same class. it just A outer is the area that expand by the children.
If, as you said, the width of divs are fixed values, then you can use #media queries for this very easily.
#media (max-width=...px){
}
Andrew not sure if this is what you are trying to accomplish, but take a look at this fiddle - https://jsfiddle.net/moojjoo/ppz8et2r/2/
I made the width to be 300px instead of 100px. Simply resize the Window to see the effects. Your outer columns will be hidden.
HTML
.container {
width: 100%;
}
#left {
width: 33%;
float: left;
}
#middle {
width: 33%;
float: left;
}
#right {
width: 33%;
float: left;
}
#media screen and (max-width: 500px) {
body {
background-color: lightblue;
}
#left {
visibility: hidden;
}
#middle {
width: 100%;
float: left;
}
#right {
visibility: hidden
}
}
<div class="container">
<div id="left">This is my left outer div</div>
<div id="middle">This is my middle div</div>
<div id="right">This is my right outer div</div>
</div>

Gallery of divs with float-left

In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will go just 1 under another) so that's why I think that float is the best option here.
I am not sure how to do it and I would like your help as I want it to be to the center covering a specific percentage of area (so it can be more responsive). I would like you to just tell me what steps I should follow.
I was thinking on making a custom class .gallery set float to left but I don't know how to set everything else in order to work nice.
HTML
<script> document.write('<div class="js">'); </script>
<nav><ul><li id="buttonc">click</li></ul></nav>
<div class="vidar-bg">
<div id="vidar">
<span>my divs×</span>
</div>
</div>
<script> document.write('</div>'); </script>
CSS
.js .vidar-bg{
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:100;
background-color:rgba(50,50,50,0.5);
display:none;}
#vidar{
position:absolute;
top:50%;
left:50%;
z-index:101;
width:80%px;
height:80%px;
left:10%;right:10%;
top:10%;bottom:10%;}
#vidar span{
display: block;
background:#5DC3A7;
padding: 10px;
color: #fff !important;
background: #f00;
z-index:100;}
#closevid{
float: right;
color: #fff;
font-family: serif;
font-size: 18px;}
#closevid:hover{color: #000;}
Live code here: http://codepen.io/mariomez/pen/OPBVxY
thank you all in advance for your help :)
This CSS should do it:
.gallery-item {
width: 150px;
height: 150px;
background-color: #F00;
color: #FFF;
text-align: center;
font-size: 2em;
line-height: 150px;
margin: 5px;
float: left;
}
Then you just have to add the following HTML to your page:
<div id="gallery">
<div class="gallery-item">DIV</div>
</div>
Actually, most of the CSS properties are there just to create the red square with centered white text in the image you provided. To do what you want you just need the float: left property like you said yourself.

link is not working if i give margin-top exceding -16px

I am using enjoy instagram plugin. I made indicators display none. I have page navigation previous and next which is center aligned.
I wrote link more using a tags below the page navigation not included in plugin. Such that it will redirect to instagram page. Now I would like to make more tag in same line of page nav.
So i gave margin-top -25px such that they are in same line but the link is not working. I created a div for more link and made it to float right,gave width:60px, margin-top:-25px , height:20px, display:inline-block. I have not made any changes in plugin. I wrote more link when plugin code ends. If any one have solution kindly help me.If any errors in grammar and spelling forgive me.If instamor div is moving to plugindiv then more link is not working.
Thanks in advance.
<div class="insta_block">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar( __( 'Instagram Section', 'aasim' ) ) ) : ?>
<?php endif; ?>
<div class="insta_more_link">
More...
</div>
</div>
css
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
}
.insta_block .widget-container {
margin-top: 30px;
}
.owl-item .box img{
width:98%;
}
.owl-pagination{
display:none;
}
.owl-theme .owl-controls .owl-buttons div{
background:#0c4c8c!important;
opacity:1!important;
font-weight:600;
}
.insta_more_link {
font-weight: 600;
float: right;
width:60px;
display: inline-block;
height:20px;
margin-top:-25px;
}
.insta_more_link a{
color:#0c4c8c;
}
.
insta_more_link {
font-weight: 600;
/* float: right;*/
width:60px;
/* display: inline-block;*/
height:20px;
position:absolute;
right:0;
bottom:0;
}
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
position: relative;
}
By making main div relative and making my morediv positon absolute I got it

Stretch a div to fill whitespace

I have 3 divs aligned horizontally.
Div 1 is my sidebar
display:block;
float:left;
width:180px;
height:100%;
Div 2 is the middle (sub-content)
display:block;
float:left;
width:200px;
height 100%;
Div 3 is the right part
width:100% on Div 3 places it below Divs 1 and 2. How can I make it stretch up the right side of the page instead?
If you don't want to use the calc() function, try the following:
<div class="wrapper">
<div class="sidebar">sidebar</div>
<div class="panel">panel</div>
<div class="main">main</div>
</div>
.wrapper {
border: 1px dotted blue;
height: 400px;
}
.sidebar {
width: 100px;
height: 100%;
background-color: tan;
float: left;
}
.panel {
width: 200px;
height: 100%;
background-color: pink;
float: left;
}
.main {
width: auto;
height: 100%;
border: 1px solid red;
overflow: auto;
}
See demo: http://jsfiddle.net/audetwebdesign/6qdYK/
The overflow: auto on .main will keep the div as a column without wrapping around the floated elements, which may be what you need.
The problem occurs because the remaining width isn't 100% but 100% is the width of full window.
So you could use css3 calc() function
.div3{
width: calc(100% - 180px - 200px)
}
See this before using calc() function can i use calc
Or if you want to use the width by calculating yourself define the width in pixel deducting main container width to (180+200)px.
Else, you can define the width auto which might be better for you.

Categories

Resources