Responsive Design. Grid layout for floating divs, but one exception

Responsive Design. Grid layout for floating divs, but one exception - javascript

maybe it´s a tricky question, maybe not. I have a grid layout with floating divs. I would like to build a responsive design. When you adjust the size of the browser window the divs will float in the hidden area. This is easy.
BUT what i try is that the last "more" div will always be the last div in the grid.
Heres the example code
HTML
<div class="bar">
<div id="1" class="square">1</div>
<div id="2" class="square">2</div>
<div id="3" class="square">3</div>
<div id="4" class="square">4</div>
<div class="more">more</div>
</div>
</div>
CSS
div.more {
width: 60px;
height: 60px;
background: red;
color: #000;
text-align: center;
float: left;
}
div.container {
position: relative;
width: 100%;
height: 60px;
}
div.square {
position: relative;
background: green;
width: 60px;
height: 60px;
float: left;
margin-right: 5px;
}
div.bar {
width: 100%;
height: 60px;
background: #000;
overflow: hidden;
}
Here i have a simple fiddle Demo. When you adjust the grid, the divs are floating. But the last more div is also floating, which is not what i need here.
fiddle demo
Can this be done by pure css or is js needed? Thank you for any help.
Ruven

I would use media queries like this http://jsfiddle.net/DIRTY_SMITH/2s4zr470/4/
HTML
<div class="bar">
<div id="one" class="square">1</div>
<div id="two" class="square">2</div>
<div id="three" class="square">3</div>
<div id="four" class="square">4</div>
<div class="more">more</div>
</div>
</div>
CSS
div.more {
width: 60px;
height: 60px;
background: red;
color: #000;
float: right;
text-align: center;
float: left;
}
div.container {
position: relative;
width: 100%;
height: 60px;
}
div.square {
position: relative;
background: green;
width: 60px;
height: 60px;
float: left;
margin-right: 5px;
}
div.bar {
width: 100%;
height: 60px;
background: #000;
}
#media (max-width: 340px){
#four{display: none;}
}
#media (max-width: 280px){
#three{display: none;}
}
#media (max-width: 220px){
#two{display: none;}
}
#media (max-width: 160px){
#one{display: none;}
}

Related

How to position text and Div on top of eachother and align them in center?

So I can't figure this out.
I'm trying to get a red vertical box to display in middle of page. I've set the div's margin to auto.
And then there's another div that holds a centered text.
Setting margin auto on both.
They are both stacking on top of eachother fine in middle of page.
However I want it to be responsive to all heights. Right now it's just responsive to the x-axis and not the height.
HTML & CSS:
.parentDiv {
position: relative;
width: 250px;
height: 450px;
margin: auto;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
#CSText {
position: absolute;
top: 45%;
width: 250px;
color: black;
text-align: center;
}
<div class="parentDiv" style="margin-top: auto;">
<div id="CSText" class="TextAlignCenter">
</div>
<div id="RedBox">
</div>
</div>

flexbox would be a great solution to this:
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.red-box {
background-color: red;
padding: 100px;
color: white;
}
<div class="container">
<div class="red-box">text</div>
</div>

I did this for you.
https://jsfiddle.net/95ssv6q1/
HTML
<div class="parentDiv">
<div class="inner">
<div id="RedBox">
</div>
</div>
</div>
CSS
.parentDiv {
display:table;
width: 100%;
height: 100%;
position: absolute;
}
.inner{
display: table-cell;
vertical-align:middle;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}

How to create two columns (one with two rows and other with one) without using fixed sizes?

I've successfully created two columns with various number of rows, however, I don't want to use fixed sizes. Is it possible without Javascript?
Here's my code:
HTML:
<body>
<div class='table'>
<div class='cell'>
<div class='row'>test</div>
<div class='row'>test</div>
</div>
<div class='cell'>
test
</div>
</div>
</body>
CSS:
body
{
font-size: 20px;
color: white;
background-color: black;
}
.table
{
width: 100%;
height: 500px;
background-color: yellow;
}
.row
{
background-color: red;
height: 50%;
}
.cell
{
width: 50%;
float: left;
height: 100%;
background-color: blue;
}
Preview: https://jsfiddle.net/XyYND/22/

You just need to add height:100% to your other elements.
Here's an updated fiddle: https://jsfiddle.net/XyYND/23/
And the CSS:
html {
height:100%;
}
body
{
font-size: 20px;
color: white;
background-color: black;
height:100%;
}
.table
{
width: 100%;
height: 100%;
background-color: yellow;
}
.row
{
background-color: red;
height: 50%;
}
.cell
{
width: 50%;
float: left;
height: 100%;
background-color: blue;
}
And the HTML:
<body>
<div class='table'>
<div class='cell'>
<div class='row'>test</div>
<div class='row'>test</div>
</div>
<div class='cell'>
test
</div>
</div>
</body>

You could use flexbox (Fiddle link):
.table
{
display: flex;
width: 100%;
height: 500px;
}
.cell
{
flex: 1;
height: 100%;
background-color: blue;
}
flex: 1; will make the divs take as much space as possible.

separate div to 3 columns

I asked same question 2 days ago but now i still don't get it.
I have 1 div and i want it to be separate into 3 columns of div. I know how to do this for 2 column but, when i am trying 3 column(right, center and left) i get this:
Problem: The pink square is not in the center
Here is my code:
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
CSS:
#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: right;
margin: 5px;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: right;
margin: 5px;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 5px;
}

Try with display:inline-block; instead.
exemple

#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: left;
margin: 1.5%;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: left;
margin: 1.5%;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 1.5%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
afs
</div>
<div id="product2">
asf
</div>
<div id="product3">
asf
</div>
</div>
</div>
You had float right as well on one of the boxes

use float left to 1st and 2nd div also. and give margin on percentage. I think this will solve your problem.

I don't know of any way you can do this purely with html/css techniques. You can arrange the items with javascript after the dom (or this part at least) has loaded.
On the other hand, this gets you a little closer to what you want, although the distances between rows won't be equal to the distances between firs/last row and beginning/end of the orange rectangle:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div class="smth">
<div id="product1" class="product">
</div>
</div>
<div class="smth">
<div id="product2" class="product">
</div>
</div>
<div class="smth">
<div id="product3" class="product">
</div>
</div>
</div>
<style>
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
.smth {
width: 33%;
height: 75%;
float: left;
}
#try{
background-color:orange;
width:50%;
height:50%;
margin:auto;
}
.product {
width: 90%;
height: 100%;
margin: auto;
}
#product1{
background-color:green;
}
#product2{
background-color:pink;
}
#product3{
background-color:blue;
}
</style>
</div>

As far as I understand:
If you don't want any spaces between you'd have to set the width property to (100/3)%
It all depends on your layout of what you want, if you want margin spaces between them all so that they're equally spaced between each other and the edges of their container div you'll have to work out what to do there. So in the case now you have 30% width for each, that leaves you with 10% spacing width which you can spread to 2.5% for margin-left: of your first 2 divs and then for the 3rd div use 2.5% for margin-right: (for a space between the right side and the 3rd div) margin-left:
But as I said, it all depends on what exactly you want for your layout, so if this doesn't answer your question could you tell me more about your expected layout?
If you want a very simple fix based off of what you have at the moment you could set the margin: property to auto and that should center the middle div between what you have now.
Edit: You should also edit the float properties so that they all float one way.

Check the example below:
Code:
#our_services {
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 31%;
height: 200px;
background-color: green;
float: left;
margin: 1%;
}
#product2 {
width: 31%;
height: 200px;
background-color: pink;
float: left;
margin: 1%;
}
#product3 {
width: 31%;
height: 200px;
background-color: blue;
float: left;
margin: 1%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
Example

add the following css:
html, body {
width: 100%;
height: 100%;
}
and add the following properties to #our_services css:
width: 100%;
height: 100%;
further set box-sizing: border-box; and margin: 0% 0% 0% 2.5%; (top as you need, right 0%, bottom as you need and left 2.5%) for the prouctu divs. Btw. you should extract common style to a product class and apply the class on the product divs...

One nice solution is to use display:table and display:table-cell. Which will works for 2 and 3 div both.
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1" class="product">
</div>
<div id="product2" class="product">
</div>
<div id="product3" class="product">
</div>
CSS:
#our_services {
background-color: rgb(224, 224, 224);
color: black;
font-family: "open_sans_hebrewregular","alefregular",arial,"Times New Roman";
height: 450px;
margin: auto;
overflow: auto;
text-align: center;
}
#try {
background-color: orange;
display: table;
height: 50%;
margin: auto;
width: 50%;
border-collapse: separate;
border-spacing: 10px;
}
.product{
display: table-cell;
height: 75%;
margin: 5px;
width: 30%;
}
#product1 {
background-color: green;
}
#product2 {
background-color: pink;
}
#product3 {
background-color: blue;
}
Check Fiddle here.

Screen width for desktops and laptops applied to navbars

How do many of these websites like facebook, twitter and even stack exchange get their navbar to automatically be the size of the desktop/laptop screen width, I know they are not using width: 100%, hence a navbar resizing would take place. What technology are they using? is it media queries? or some javascript function that gets the screen width then apply that as the navbar width.

Try this code it behaves exactly like stackoverflow nav-bar.
body {
text-align: center;
}
#navbar {
height: 30px;
width: 100%;
background-color: black;
text-align: center;
}
#fwcenter {
width: 800px;
height: inherit;
position: relative;
text-align: center;
background-color: red;
}
#right {
width: 49%;
text-align: right;
display: inline-block;
height: 30px;
}
#left {
width: 49%;
text-align: left;
display: inline-block;
height: 30px;
}
<div id="navbar">
<center>
<div id="fwcenter">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</center>
</div>

How to fill remaining div?

Well i have the following: http://jsfiddle.net/a9VDa/12/
I am trying to make the jquery tree fill the remaining contents of the div "a" but also include a scroll if there isn't enough space.
<div class="a">
<div class="b"></div>
<div class="c" id="tree"></div>
</div>

My suggested solution: http://jsfiddle.net/Bt2sL/2/
Without orange part scrolling.
HTML
<div class="b"></div>
<div class="a">
<div class="c" id="tree"></div>
</div>
CSS
.a {
height: 60px;
background-color: red;
height: auto;
overflow: scroll;
height: 200px; // adjust this to your need
}
.b {
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
}

Can you just make div b fixed and add some padding to a with overflow scroll set?
.a {
height: 60px;
background-color: gray;
position: relative;
overflow: scroll;
padding-top: 22px;
}
.b {
position: fixed;
top: 0;
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
height: auto;
overflow: scroll;
}

Develop Reference

JavaScript is the programming language of the Web.

Responsive Design. Grid layout for floating divs, but one exception - javascript

Related

How to position text and Div on top of eachother and align them in center?

How to create two columns (one with two rows and other with one) without using fixed sizes?

separate div to 3 columns

Screen width for desktops and laptops applied to navbars

How to fill remaining div?

Categories

Resources