I have an HTML table realized as a bunch of divs (for making a scrollable table).
In one of the cells (a div), I want to show a popup which overlaps other cells.
Like so:
http://jsfiddle.net/pFx6m/
My markup:
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
<div id="someBigContent"></div>
<div class="clearRight"></div></div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
</div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">lilili</div>
</div>
My CSS:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: table-cell;
height: 30px;
z-index: 0;
overflow:hidden;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: relative;
top: 0px;
left: -50px;
float:right;
z-index: 999;
}
Now I'm doing something wrong, because it doesn't overlap the cells left of the someBigContent (cells one and two) and it makes some rows bigger than they're supposed to be.
See this fiddle for an overview of the situation.
How can I just make the cells overlap (and maybe the content that is under there — not just the table)?
With that CSS the block #someBigContent will not affect the rows or cells sizes:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: relative;
float: left;
height: 30px;
z-index: 0;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
}
Now you can adjust the position of this block relative to parent cell.
It is very strange to see an table made out of div's...
but try in CSS to add
max-width: 100px !important;
For the div/table thing that breaks out ?
Related
I have one outer div and two children divs. I want the outer div fixed to the window, one child div to the left most of the parent div and another to the right most of the parent div.
When I position: fixed the parent, it is fixed to the window but the two child divs stick to the left and overlap. If I position: relative the parent, the two child divs stick to the left and right respectively but it is not fixed to the top of the window.
How can I do it? Thanks!
<div class="nav-wrapper">
<div class="child1"></div>
<div class="nav-pages"></div>
</div>
My css:
nav {
#media only screen and (min-width: 0) {
height: 3em;
.nav-wrapper {
padding: .7em 1em 0 1em;
}
}
#media only screen and (min-width: $medium-screen) {
height: 500px;
.nav-wrapper {
padding: 0em 1em 0 1em;
height: 64px;
position: relative;
background-color: rgba(60,63,65,0.22);
}
}
}
nav {
background-image: url("http://image.insider-journeys.com/overview/china.jpg");
background-size: cover;
}
.navbar-non-link {
padding: 0 15px;
}
.nav-pages {
padding-right: 0px;
}
.side-nav {
width: 500px;
}
Try This:
body {
height: 1200px;
}
.parent {
position: fixed;
background-color: red;
height: 100px;
width:100%;
}
.child1 {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.child2{
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Something like this:
body {
width: 100%;
min-height: 1000px;
margin:0px;
padding:0px;
}
div {margin:0px;padding:0px;}
.wrapper {
border: 1px solid black;
width: 100%;
position: fixed;
height:50px;
top:0px;
}
.parent {
position: fixed;
width: 20%;
height: 50px;
background: red;
overflow:hidden;
top:1px;
right:40%;
}
.child1 {
position: fixed;
left: 20%;
top: 1px;
height: 50px;
width:20%;
background: green
}
.child2 {
position: fixed;
right: 20%;
top: 1px;
height: 50px;
width: 20%;
background: green
}
<body>
<div class="wrapper">
<div class="parent">parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</div>
</body>
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>
I am not sure how to properly phrase this question, so bear with me while I try and explain.
I am working on a layout that is two columns but with three divs and using the Bootstrap framework. The first div is pushed to the right, the second div is pulled to the left. The third div I want it pulled to the right and set flush to the bottom of the first div. Right now the top of the third div is sitting at the bottom of the second div.
The reason why I want it laid out this way is so when viewing on a desktop there will be two columns but when viewing on a mobile devices it will shrink down to one column and the third div will be below the content in the second div.
<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
Full CSS here: http://jsfiddle.net/m8z37q0y/1/
Remove the position: relative; properties or add it to the container as well. Then actually use float: right; on div1 and div3 and remove the right/left properties:
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}
See the DEMO
http://jsfiddle.net/m8z37q0y/7/
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background:green ;
left: 300px;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: blue;
right: 100px;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: red;
float: right;
}
View Demo jsFiddle
Remove position: relative property in .div2{...} and .div3 {...} class.
Change property value float: left to float: right in .div3{...} class to archive this.
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float: left;
position: relative; /* Remove this */
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float: left; /* Set float Right */
position: relative; /* Remove this */
}
Look this demo: http://jsfiddle.net/abruzzi/m8z37q0y/8/
You should remove the all css property below:
position: relative; left...
and set correct float property like below:
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}
<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
left: 300px;
float:right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float:left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float:right;
}
I have the following code shown in this fiddle.
For the life of me I cannot get them to align the way I want them to. It is pretty easy to see where each div should be by looking at the code but here is some more help:
| topLeft | topRight | |
----------------------------------| right |
| bottomLeft | bottomRight | |
Please help me with this!
Ex 1. swapping the right positions in front of the left: http://jsfiddle.net/pTDEX/1/
html:
<div class="top">
<div class="topRight">
topRight
</div>
<div class="topLeft">
topLeft
</div>
</div>
A box floating right after a left floating box will be positioned below the box and then right.
Or ex 2. swapping the float: right for float:left: http://jsfiddle.net/pTDEX/3/
.topLeft {
background: green;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
float: left;
width: 100px;
height: 80px;
}
It'll float the right boxes left against the left boxes.
There are more possibilities but it's all about understanding what float does, play with it!
On a side-note, you can safely ditch display: inline when specifying fixed blocks.
I used absolute positioning on the subelements and relative positioning on your container, this is easy as long as you know the dimensions of your elements (in px or %)
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
position:relative;
}
.top {
background: purple;
position:absolute;
top:0;
left:0;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
width: 300px;
height: 80px;
position:absolute;
top:0;
left:0;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
position:absolute;
top:0;
left:300px;
}
.bottom {
background: black;
display: inline;
width: 400px;
height: 20px;
position:absolute;
top:80px;
left:0;
}
.BottomLeft {
background: blue;
display: inline;
width: 300px;
height: 20px;
position:absolute;
top:0;
left:0;
}
.bottomRight {
background: red;
display: inline;
width: 100px;
height: 20px;
position:absolute;
top:0;
right:0;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
position:absolute;
top:0;
left:400px;
}
Check out the updated fiddle:
http://jsfiddle.net/pTDEX/2/
(Note that the position relative attribute on the container is just so that a) absolutely positioned elements within it will position relative to the container. b) it respects your margin 0 auto; (which it wouldn't if you gave it position:absolute)
You main problem in your html code, just an order of div tag Right
<div class="container">
<div class="right">right</div> <!-- replaced top with right -->
<!-- your mistake was fixed here -->
<div class="top'">
<div class="topRight">topRight</div>
<div class="topLeft">topLeft</div>
</div>
<div class="bottom">
<div class="bottomRight">bottomRight</div>
<div class="bottomLeft">BottomLeft</div>
</div>
</div>
Your Css style
//Css Style
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
}
.top {
background: purple;
float: left;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
}
.bottom {
background: black;
display: inline;
float: left;
width: 400px;
height: 20px;
}
.BottomLeft {
background: blue;
display: inline;
float: left;
width: 300px;
height: 20px;
}
.bottomRight {
background: red;
display: inline;
float: right;
width: 100px;
height: 20px;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
}
i want to place the div according to the image displayed . The top ones have been done however not able to place the bottom two my current style sheet is as follows:
#container {
position: relative;
height: 400px;
width: 100%;
min-width: 400px;
margin: 0 auto;
}
#left, #right {
position: absolute;
bottom: 201px;
}
#left {
left: 0;
width: 484px;
height: 195px;
}
#right {
right: 0;
width: 508px;
height: 196px;
}
One more thing my container contains all the divs
Someone please help
Something similar to this - JSFiddle ?
HTML:
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
CSS:
.row{ overflow: hidden; margin: 4px; }
.col1, .col2{ float: left; width: 250px; height: 100px; }
.col1{ background: red; }
.col2{ background: green; }