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>
Related
I have two divs displayed inline-block beside each other, each with 45% width. At a certain break-point their widths are both changed to 100%, causing them to stack. This is obviously super simple. My question is this: how can I alter the markup at said break-point to cause what would be the bottom div to appear on top?
My existing markup relies heavily on inline-block level display, and I'd prefer to not switch things over to flexbox site-wide at this time. Thus, I am after a solution which uses inline-block.
Consider this simple example:
.left, .right {
display:inline-block;
width:45%;
text-align:center;
}
.left {
background-color:tomato;
}
.right {
background-color:aquamarine ;
}
p {
padding:50px 0;
}
#media only screen and (max-width: 550px) {
.left, .right {
width:100%;
}
}
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
Everything works great here, but my desired result is that the RIGHT div appears on top of the LEFT div after the break-point. I can obviously achieve this using flexbox to reorder the divs, but that would require hours and hours of work to switch everything over to support this display property. I need an inline-block solution. Thoughts appreciated.
You can use display: flex; css property. The basic approach would be to set the parent element (e.g., container) to display: flex; this generates the flexbox and allows you to set different parameters for the children like
.right{
order: 1;
}
.left{
order: 2
}
Depending on what browsers you need to support your website, you could use the flex-box. check the flex box support here
.left,
.right {
display: inline-block;
width: 50%;
text-align: center;
}
.left {
background-color: tomato;
}
.right {
background-color: aquamarine;
}
p {
padding: 100px 0;
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#media only screen and (max-width: 550px) {
.left,
.right {
width: 100%;
}
.container {
flex-direction: column
}
.right {
order: 1;
}
.left {
order: 2
}
}
<div class='container'>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
</div>
Update
You can use rotate() transform functions to get your desired result. Working demo below:
.left,
.right {
display: inline-block;
width: 45%;
text-align: center;
}
.left {
background-color: tomato;
}
.right {
background-color: aquamarine;
}
p {
padding: 50px 0;
}
#media only screen and (max-width: 550px) {
.left,
.right {
width: 100%;
}
.container {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.container>div {
display: block;
margin: 0 auto 5px;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
}
<div class='container'>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
</div>
Update 2 Using jQuery
$(window).resize(function() {
if ($(window).width() <= 550) {
$('.left').remove().insertAfter($('.right'));
} else {
$('.left').remove().insertBefore($('.right'));
}
})
.left,
.right {
display: inline-block;
width: 45%;
text-align: center;
}
.left {
background-color: tomato;
}
.right {
background-color: aquamarine;
}
p {
padding: 50px 0;
}
#media only screen and (max-width: 550px) {
.left,
.right {
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
</div>
Use float to specify the placement of the div, then switch the divs on your html so that the right is above of the left
.left, .right {
display:inline-block;
width:45%;
text-align:center;
}
.left {
background-color:tomato;
float:left;
}
.right {
background-color:aquamarine ;
float:right;
}
p {
padding:50px 0;
}
#media only screen and (max-width: 550px) {
.left, .right {
width:100%;
}
}
<div class="right">
<p>RIGHT</p>
</div>
<div class="left">
<p>LEFT</p>
</div>
I would suggest you can use display flex since they provide a lot of benefits in aligning, positioning etc.
I've created a solution for your problem, By wrapping the .left and .right inside a flex container, and changing the flex-direction accordingly.
.container
{
display:flex;
flex-direction:column;
justify-content:flex-start
}
#media only screen and (max-width: 550px) {
.container
{
display:flex;
flex-direction:column-reverse;
justify-content:flex-start
}
}
I've created a working fiddle for better understanding: https://jsfiddle.net/Baliga/pqo69s3t/2/
If you want a solution without using flex, they the only way you can achieve by using css is by making the div absolute positioning, but the height and top|bottom value has to be defined accordingly.
Otherwise, Using javascript is the only way to do it. Example:
leftDiv = document.getElementById( 'left' );
rightDiv = document.getElementById( 'right' );
fd.parentNode.removeChild( leftDiv );
sd.parentNode.insertAfter( leftDiv, rightDiv );
You can trigger this at a particular viewport width and get your div's order switch.
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...
I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).
I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.
In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.
How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.
The image:
CSS:
#parent {
text-align: center;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
#child1-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
display: inline-block;
}
#child2-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
position: relative;
margin: 0 25px 0 25px;
display: inline-block;
}
#child3-row2 {/* The one with the red border */
vertical-align: middle;
height: 452px;
width: 949px;
overflow: hidden;
position: relative;
display: inline-block;
}
You can use flexbox to do this by using the flex-grow property.
HTML :
<div id="main">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
CSS :
#main {
display: flex;
flex-flow: row;
width:100%;
min-height:50px;
}
#box1{
background-color:red;
width:100px;
}
#box2{
background-color:blue;
width:100px;
}
#box3{
background-color:green;
flex-grow: 1;
}
Here is a working JSFiddle
You can use css calc function for this. Support for calc seems to be quite good now.
As you have mentioned, the left side divs are of fixed width, say 120px each. Also suppose the margin between them is 30px. So, the total width left for your red div is 100% - (2*120 + 2*30)px i.e. (100% - 300px ).
#red-div
{
width: calc(100% - 300px);
}
Add % width or you can do following :
$(window).resize(function() {
var window_width = $(window).width();
var w1_width = $('.div1').width(); // The first element width
var w2_width = $('.div2').width(); // The second element width
var main_div_width = window_width - (w1_width+w2_width+gutter[i.e margin between all 3 elements]);
$('.main_div_width').css('width', main_div_width);
});
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;
}
}
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.