I want to have higher z-index for childrens .bricks so they could always overlap other parents (red square). Parent has to be positioned absolute.
Live example: http://jsfiddle.net/yJ62e/
html
<div class="cont">
<div class="draggable" id="b2">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="draggable" id="b2">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
css
.cont {
position:relative;
background-color: #747373;
height: 300px;
width: 300px;
margin:0 auto;
}
.draggable {
background-color: red;
right:100px;
cursor:pointer;
z-index:1;
position:absolute;
}
#b2 {
height: 100px;
width: 100px;
}
.brick {
background-color: blue;
height: 50px;
width: 50px;
float: left;
z-index:999 !important;
}
The only solution I can think of would be to position the .brick-Children absolute as well. Otherwise z-index won't work.
Related
I've got the below div structure
<div id="news">
<div id="innerNews">
<div id="newsLeft" style="width:10%; height:100%"></div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" style="width:10%; height:100%"></div>
</div>
</div>
#news{
width:30%;
position: relative;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
How can I get #newsLeft to be aligned to the left and #newsRight to be aligned to the right of #news?
CSS Table
Because of your structure I'd recommend to use display: table; thereby you'll get equal column height. Also depending on what you are trying to do you can substitute middle column by another div and set a background to it, so you would be able to place some content in it.
#news {
display: table;
height: 150px;
}
#innerNews {
display: table-row;
}
#newsLeft, #newsThumb, #newsRight {
display: table-cell;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 11%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
Floating
Another way to do that is using float: left;. There is no point to use float: right; on the third div because you have total width of three blocks equal 100%: [10%][80%][10%].
#innerNews {
height: 150px;
width: 400px;
}
#newsLeft, #newsThumb, #newsRight {
float: left;
}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
You can remove width from ##innerNews to achieve certain effect, but again - it depends on what you want.
Position
If you'd like to stick with position
#innerNews {
height: 150px;
width: 400px;
position: relative;
}
#newsLeft, #newsThumb, #newsRight {
position: absolute;
top: 0;
}
#newsLeft {left: 0;}
#newsThumb {left: 10%;}
#newsRight {left: 90%;}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
You can use the css float, like
#newsLeft {
float: left;
}
#newsRight {
float: right;
}
Here is how you can do it. Use position attribute as required.
#news{
width:50%;
height:200px;
position: relative;
background:#ccc;
margin-left:100px;
display:inline-block;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
#newsLeft
{
position:absolute;
height:200px;
width:200px;
left:-30px;
background:#444;
display:inline-block;
width:30%; height:100%
}
#newsRight
{
position:absolute;
height:200px;
width:200px;
left:230px;
background:#444;
display:inline-block;
width:30%; height:100%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft" >newsleft</div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" >newsright</div>
</div>
</div>
So i have 3 box:
Box 1 = red
Box 2 = blue
Box 3 = yellow
Box 1 contains Box 2
Box 2 contains Box 3
Box3 are floated divs and have been cleared using extra div style="clear:both"
I want to have Box 2 as an absolute position to Box 1 like this :
http://i301.photobucket.com/albums/nn42/b1rk0ff/done_zpsd3cd25c0.png
I have tried like this but won't work :
Html :
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Style :
.box1 {
width:300px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
Here's the codepen :
http://codepen.io/anon/pen/Kkirs?editors=110
Anybody could help?
Thank you
what about removing position:relative from .box1, and change position:absolute to .position:relative in .box2
See snipet below, and take a look at the comments in .box2
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Why can't you just set a fixed height for .box1?
.box1 {
width:300px;
background-color: red;
position: relative;
height:250px;
}
.box2 {
width: 200px;
background-color:blue;
position: absolute;
right:-100px;
top:30px;
}
.box3 {
height:50px;
width: 50px;
background-color:yellow;
float:left;
margin:10px;
color:black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
Just replace position: absolute by position: relative.
since box2 is absolute box 1 does not know the height of it's children,
you will need to revert to using both relative elements (or no position definition at all) and solve this problem with margin-left and margin-top
Thank you all, this is what i want.
Hope it helps another newbie like me. :)
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
.box1 {
width: 300px;
background-color: red;
}
.box2 {
width: 200px;
background-color: blue;
position: relative;
right: -150px; /* changed this value to -150px » was -100px */
top: 10px; /* changed this value to 10px » was 30px */
padding:10px /* add padding as you need and if you need */
}
.box3 {
height: 50px;
width: 50px;
background-color: yellow;
float: left;
margin: 10px;
color: black;
}
<div class="box1">
<div class="box2">
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div class="box3">box-3</div>
<div style="clear:both;"></div>
</div>
testing
</div>
I'm trying to make the first div child below use up 100% of the available space minus 20px and then use the second div child to use 20px and be on the same line as the first child div.
<div style="width: 10%;">
<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>
<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>
</div>
This should be able to be done with CSS level one (that means no position lame-outs) though I know I'm missing something. Also there will be anchors in both div elements that must use 100% of the available width so there is a trick here to get the float to behave a certain way...
Solution #1
Make use of overflow: hidden (or overflow: auto) to fill the remaining horizontal space.
(NB: For this to work you need to place the element on the right hand side first in your markup)
FIDDLE
<div>
<div class="div2">DIV 2</div>
<div class="div1">DIV 1</div>
</div>
CSS
.div1 {
background:yellow;
overflow: hidden;
}
.div2 {
background:brown;
float:right;
width: 50px;
}
Solution #2
You can do this with box-sizing: border-box
FIDDLE
<div>
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
CSS
.div1 {
background:yellow;
float:left;
padding-right: 50px;
margin-right: -50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.div2 {
background:brown;
float:left;
width: 50px;
}
Solution #3
Use css tables:
FIDDLE
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
.container
{
display:table;
}
.div1 {
background:yellow;
display: table-cell;
width: 100%;
}
.div2 {
background:brown;
width: 50px;
display: table-cell;
word-break: break-word;
min-width: 50px;
}
Solution #4 (CSS3 required)
use calc
FIDDLE
On the first child set width: calc(100% - 50px)
On the second div set width: 50px;
.div1 {
background:yellow;
width: calc(100% - 50px);
float: left;
}
.div2 {
background:brown;
width: 50px;
float: left;
}
Can you change the HTML structure a bit?
<div style="width: 10%;">
<div style="display: block; width: 100%;">
<div style="width: 20px; float: right;"></div>
</div>
</div>
Here's another approach using display:table.
<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
I've created a parent div with four divs inside of it. The first div (grey)contains an image, the second (red) is to be below this div with a description. The two other divs are to float right of these two.
This is the closest I can get:
I want the 3rd/4th divs to sit flush up top. I could use a negative top-margin but I would like for it to naturally go up. Also, I cannot rearrange the order of the divs. It is a basic problem/misunderstanding but I can't give a clear enough definition for google.
Here is my html:
<div id="container">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
And here is the CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.imgbox {
width: 218px;
height: 100px;
float: left;
clear: none;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
float: left;
clear: left;
background-color: red;
}
.pick#second {
float: left;
background-color: blue;
}
.pick#third {
float: right;
clear: right;
background-color: purple;
}
Simply wrap the two sides in a div with common CSS.
HTML:
<div id="container">
<div class="l">
<div class="imgbox">0</div>
<div class="pick" id="first">1</div>
</div>
<div class="l">
<div class="pick" id="second">2</div>
<div class="pick" id="third">3</div>
</div>
</div>
-
CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.l { width: 218px; float: left; }
.imgbox {
width: 218px;
height: 100px;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
background-color: red;
}
.pick#second {
background-color: blue;
}
.pick#third {
background-color: purple;
}
Demo here
Put all your DIV's on the left side into a container div and float it to the left. Then put all your right side DIV's into a container and float it to the right.
You might have to specify the width of .left_side and .right_side too.
HTML:
<div id="container">
<div class="left_side">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div class="right_side">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.left_side {
float:left;
}
.right_side {
float:right;
}
.imgbox {
width: 218px;
height: 100px;
float: left;
clear: left;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
float: left;
clear: both;
background-color: red;
}
.pick#second {
float: left;
background-color: blue;
}
.pick#third {
float: right;
clear: right;
background-color: purple;
}
First, you need to wrap the divs you want on the left into one container, and the divs on the right in another:
<div id="container">
<div id="left">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div id="right">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
Then, you can remove the individual float assignments from each div and assign them instead to #right and #left:
#left {
float: left;
}
#right {
float: right;
}
Finally, you need to take the correct widths into account. Your #container has 440px of room. Each child div is assigned 218px; however, each of those divs also has a 1px border on each side, making them take up 218 + 2(1) = 220px of room. Reduce the width of #imgbox and .pick to 216px.
Everything together can be seen at this jsFiddle.
Create two sub-containers and float them.
<div id="container">
<div class="sub-container">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div class="sub-container">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
.sub-container{
margin: 0;
padding:0;
display: inline-block;
float: left;
}