I am writing an html calendar and got stuck on positioning divs. I generate the divs dynamically and they stack on top of each other which is ok most of the time. Some times I need to create a div and have it placed at the top of the page right next to the first created div. If I use float it moves over too far and does not go to the top. I could use position to accomplish this, but it gets complicated. Just seems it should be easy to drop it up to the top like it would in a table using valign=top. I added some css positioning to show where I want the div, but if possible, I would like to do it without position. Any suggestions on good ways to position a div would be much appreciated.
#container{
width:200px;
height:200px;
background-color:blue;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
float: right;
position:relative;
top:-100px;
left:-100px;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
</div>
Let's call the calendar tiles "source divs", and for the div you want to appear positioned to the right of the 1st "source div", we'll ascribe the term "target div".
I recommend that you position your target div inside of the source div. This semantic relationship will make it very easy to position the target div correctly, using left: 100%;:
.calendar { font-size: 0; }
.src {
position: relative;
font-size: 14px;
display: inline-block;
width: 30px; height: 30px;
outline: 1px solid #000;
}
.src:hover:after {
content: "";
position: absolute;
display: block;
width: 100%; height: 100%;
left: 100%; top: 0;
background-color: #ff0000;
}
<div class="calendar">
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
</div>
Hover any source div to see the corresponding target div.
Perhaps you should look at using a grid layout in the cell . you would have much better control of how the content appears in the cell without having to work with floating div's .Also a layout in a grid container keeps things uniformed and prevents overlapping using
grid-template-columns: auto auto auto;
If you only want 2 columns at the top just change it to
grid-template-columns: auto auto ;
here is a link grid layouts
and
flexbox vs grid
#container{
width:200px;
height:200px;
background-color:blue;
display: grid;
grid-gap: 2px;
grid-template-columns: auto auto auto;
grid-template-rows: 60px auto auto;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
<div id=item3></div>
<div id=item3></div>
<div id=item1></div>
<div id=item1></div>
<div id=item1></div>
</div>
Related
I am trying to creating responsive 3 boxed layout zoom in/zoom out on mouseover, but can't.
Example: https://www.americaneagle.com/
In American eagle website homepage slideshow below we can find above examples.
Please suggest any example or links.
For starters you could try like this.. But do not expect someone else to write your code..
Try yourself first and then ask for specific doubts and clarifications here. :)
* {
box-sizing: border-box;
}
body {
margin-top: 100px;
}
.grid:after,
.grid:before {
display: 'table' content:'';
}
.col {
float: left;
width: 33%;
padding: 0px 10px;
}
.block {
background-color: #eee;
border: 1px solid #ddd;
transform: scale(1);
transition: all 0.3s ease;
height: 200px;
z-index: 1;
position: relative;
}
.block:hover {
transform: scale(1.5);
z-index: 10;
}
.block-hidden {
display: none;
text-align: center;
padding: 20px;
}
.block:hover .block-hidden {
display: block;
}
<div class="grid">
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
<div class="col">
<div class="block">
<div class="block-hidden">
Hidden Content
</div>
</div>
</div>
</div>
each box you can use bootstrap col for responsive
col-lg-4 col-md-4 col-sm-4 col-xs-12
or
col-lg-4 col-md-4 col-sm-6 col-xs-12
I'm working on a simple little project right now and I can't seem to figure out the styling.
Basically, what I need to do is position a 'div' a certain number of pixels down from the top of its parent. To do this I made its position absolute and set top to whatever pixel offset I need. The problem with this is sometimes two 'div's will be at the same vertical position (or close to it) in the parent and will overlap. I need to have them line up side by side horizontally when they are overlapping. I know how to do this with a position of relative and the float property but this then breaks the vertical positioning.
The boxes are inserted dynamically with jQuery and their positions can change frequently.
Here is a jsfiddle to demonstrate.
HTML
<div class="main">
This is okay
<div style="top: 25px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 100px;" class="sub">
<h3>
test
</h3>
</div>
<div style="position: absolute; top: 200px;">
This is the problem
</div>
<div style="top: 250px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 260px;" class="sub">
<h3>
test
</h3>
</div>
</div>
CSS
.main {
background-color: grey;
height: 700px;
}
.sub {
border: thin solid black;
position: absolute;
}
you may make the sub div's inside other div and give this one absolute position
.main {
position:relative;
background-color: grey;
width:100%;
height:auto;
}
.sub {
position: absolute;
top:100px;
width:100%;
}
.child {
border:2px solid black;
width:500px;
height:500px;
margin:10px auto;
}
<div class="main">
<div class="sub">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
if you want them horizontally add to .child
float:left;
width:47%;
margin:1%;
As far as I can tell this isn't solvable with CSS. I ended up doing some decently complex javascript to detect collisions and reposition the div's appropriately.
Goodmorning developers,
I am new in frontend development. I'm stuck with the following problem:
I want to have a head div with 4 sub divs inside the head one. How can I do it with fitting the screen? (see sketch)
Kind regards
I think you need this please check:
See Fiddle Demo
.container {
border: 3px solid;
float: left;
width: 100%;
}
.custom_box {
float: left;
width: 100%;
}
.custom_box1 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 35%;
}
.custom_box2 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 55%;
}
<div class="container">
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
</div>
Here is the fiddle: https://jsfiddle.net/9Lum94me/
There are other ways as well with CSS floats, flexbox and table-cell which you can explore.
HTML:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
<div class="row">
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
CSS:
.container{
border: 1px solid gray;
}
.row{
padding: 10px;
}
.row .column{
display: inline-block;
min-width: 45%; min-height: 150px; border: 1px solid gray; margin: 0 4% 0 0;
}
EDIT:
You will have to manage the widths of the columns as per needs.
A bootstrap responsive example without any style...(Except bordering).
Fiddle example
.content{
border:2px solid green;
height:100px;
width:92%;
margin:20px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row no-gutter-2">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header2</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header4</div>
</div>
</div>
</div>
</div>
To test the responsiveness, plz re-size the browser window.
Above example is responsive on small, medium and large scale.
Please run the snippet on full page.
I have several divs inside another div and I want the user to be able to resize those divs but they should stay in percentage width. This example shows 6 divs with 18% width which is more than 100% together and the 6th div starts a new line:
http://jsfiddle.net/v3o3vqqo/
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
}
.inner {
width: 18%;
float: left;
margin: 1px;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.purple {
background-color: purple;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container"><div class="inner red"> </div><div class="inner orange"> </div><div class="inner yellow"> </div><div class="inner green"> </div><div class="inner blue"> </div><div class="inner purple"> </div>
<!-- Plus arbitrarily many more boxes... -->
</div>
I want it to show 2 children since their width is 100% togheter and 2 children in overflow (which means I need to scroll to see the other.
The problem is, if the parent's width is 100% and the sum of the children is more than 100%, they start a new line rather then cause a horizontal scroll.
So my question is how do I cause a horizontal scroll?
You can't achieve this with floats. You will have to use different layouts.
You can use flexbox. By default it has flex-wrap: nowrap, so there is no line wrap.
You will need to use flex-shrink: 0 to prevent shrinking when the flex items occupy more space than the available one.
.container {
display: flex;
overflow: auto;
}
.inner {
width: 18%;
height: 2em;
flex-shrink: 0;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
<div class="inner" style="background: red"></div>
<div class="inner" style="background: orange"></div>
<div class="inner" style="background: yellow"></div>
<div class="inner" style="background: green"></div>
<div class="inner" style="background: blue"></div>
<div class="inner" style="background: purple"></div>
</div>
Alternatively, you can use inline-block, and prevent line wrapping with white-space: nowrap. However, be aware of How to remove the space between inline-block elements?
.container {
overflow: auto;
white-space: nowrap;
}
.inner {
display: inline-block;
width: 18%;
height: 2em;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
<div class="inner" style="background: red"></div
><div class="inner" style="background: orange"></div
><div class="inner" style="background: yellow"></div
><div class="inner" style="background: green"></div
><div class="inner" style="background: blue"></div
><div class="inner" style="background: purple"></div>
</div>
One possible solution to what I understand your problem to be is the following.
Basic idea: use display: inline-block, and prevent white space issues by putting the closing > on the next line.
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
}
.inner {
display: inline-block;
width: 20%;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.purple {
background-color: purple;
}
<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>
<div class="container">
<div class="inner red"> </div
><div class="inner orange"> </div
><div class="inner yellow"> </div
><div class="inner green"> </div
><div class="inner blue"> </div>
<!-- Plus arbitrarily many more boxes... -->
</div>
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?