Consider we have 10 boxes. After hovering at say 5th box, the ones on its left move -81px(to the left), and the ones on its right move 81px(to the right).
So the one that has not been transformed (the one which we are hovering onto) still has the same width as it had before even though its width is set to 100%. Can someone please explain to me why can't the space left from the transformed elements be used from the one in the middle ?
You can see it in action here
//css:
.boxwrapper{
display:block;
>div{
display:inline-block;
border: solid 1px grey;
width:auto;
padding:20px;
background-color:white;
&.before{
transform:translateX(-20px);
}&.after{
transform:translateX(20px);
}
}
}
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<div class="boxwrapper">
<div data-number="1" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 1</div>
<div data-number="2" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 2</div>
<div data-number="3" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 3</div>
<div data-number="4" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 4</div>
<div data-number="5" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 5</div>
</div>
</body>
</html>
Thanks.
Transformations don't affect the flow of elements, only the visual rendering. I know it looks like the div should have more space and be able to expand but in reality it doesn't.
Related
I have a structure like this:
<body>
<div id="root">
<div>
<div>Not tis one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
Somehow script + div didn't work for me, possibly due to some extensions that I have or a similar reason.
I'm trying to give uBlock Origin a target for a "One more story" or whatever overlay at the bottom of the page over here.
You can use either nth-child or last-child depending on whether your code structure changes.
And if you want to make sure it's not too generic, you can specify the parent elements. With the HTML that you have, the CSS could look something like this:
#root div div:last-child {
color: red;
}
Quick Example:
#root div div:last-child {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root">
<div>
<div>Not this one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
</html>
I have this kind a scenario:
<div id=area>
<div id=box>
</div>
</div>
<div id=footer>
</div>
div "area" is center and it is 700px width and has shadows at right and left.
there is then a div box, which is 500px width and has text and options in it.
And at bottom I have footer where is one line of text.
So, my shadow effect at div "area" stops at same spot as box does. At next page, i have ~2000px amount of text in same box, and there "area" div's shadow is as it should be.
I want to have "area" div whole screen size, and more if there is more text inside of it.
Try something like this :
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="area">
<div id="box">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
html {height:100%}
body {height:100%;margin: 0;padding: 0;}
#area {height: 100%;background-color: blue}
I have a div that will not stay put, it travels outside of the parent. The div I'm having trouble with is marked "6". It travels outside the parent to the right.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html{
border:1px solid;
height:99%;
}
body{
height:100%;
margin:0;
padding:0;
}
#pageWrapper{
padding:0;
margin:0;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;">
<div style="width:100%;height:30%;border:1px solid;">1</div>
<div style="width:100%;height:40%;border:1px solid;">2</div>
<div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div>
</div>
<div style="width:50%;border:0px solid;height:100%;float:right;">
<div style="width:100%;height:40%;border:1px solid;">4</div>
<div style="width:100%;height:40%;border:1px solid;">5</div>
<div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div>
</div>
</div>
</body>
</html>
Add position:relative to the parent div or remove position:absolute from the div you marked
Get rid of the position:absolute;bottom:0 on the lower two divs - It's unnecessary and causes your erratic behaviour.
I've been working with this for awhile and I'm pretty sure its unsolvable. Just thought I'd throw it out to find out if someone smarter than I can figure it out (without changing the markup! :)
The layout below is a typical tableless css based design with header and footer sandwiched between two columns (content and sidebar) using floats and relative positioning.
This particular layout is a WordPress theme that I've designed dozens of sites around solely with css and images. That's why my requirement is that the markup remain as is.
I'd like the "avatar" div to stay anchored to the top of the header div regardless of the height of "featured" and without using "position:fixed" or changing the markup order. If you copy the code below and save it as an .html file, you'll see that it does just that right out of the box. However, once you add or subtract height from "featured", "avatar" will move accordingly up or down. That's the challenge, I need avatar to stay at the zero position relative to the body, regardless of the dimensions of "featured".
Setting "sidebar" to absolute positioning would be the obvious solution, however, it suffers in that it will screw up the flow of the footer div below content and sidebar (whichever is taller).
I'm thinking that the answer might lie in one of the table display properties (since this is essentially creating an unmerged cell out of sidebar and setting its top margin relative to its parent container), but that's one area of css that I've largely left alone.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; margin-top:-150px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
*{margin:0;padding:0;}
body{margin:0;padding:0;}
.wrapper{width:977px;margin:0 auto;}
.header{height:100px;background:red;}
.leftColumn{float:left;width:700px;}
.featured{background:green;height:50px;}
.content {min-height:300px;border:1px solid #777;}
.sidebar {background:blue;width:250px;float:left;margin-left:27px;min-height:400px}
.avatar {width:200px; background:orange;margin-top:-100px;}
.clear {clear:both;}
.footer{background:gold;height:100px;clear:both;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="leftColumn">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
</div><!--.leftColumn-->
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div><!--.sidebar-->
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div><!--.main-->
</div><!--.wrapper-->
</body>
</html>
How about something like this:
Avatar and Sidebar relative to the header floated right to stay in the flow?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;z-index:1000;position:relative;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; /*margin-top:-150px;*/ }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div id="header_stuff" style="float:left;">header</div>
<div id="side2" style="float:right;background-color:blue;"><div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div class="sidebar">
<div>This content should flow below avatar relative to avatar's height</div>
</div>
</div>
</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
Edit: Perhaps this is closer. The blue sidebar can be tweaked if the header sections need to be on top (z-index, etc).
Hi this is a simplified version of an issue I'm having with IE7. Basically the divs following the cleared div (green) don't behave as expected (in IE7). It works as expected in Safari, FF etc and IE8.
Does anybody have any advice for a fix. Thanks for any help :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#wrap {width:600px;height:1000px;background:black;}
.box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
.clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
.fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
<div id="wrap">
<div class="box first"></div>
<div class="box small second"></div>
<div class="box xsmall third"></div>
<div class="box clear fourth "></div>
<div class="box fifth"></div>
<div class="box sixth"></div>
</div>
</body>
</html>
You can...
A) insert a "divider" clear element between 3rd and 4th which will do clear:both, span a height of 1px, take up the entire width, and then margin-top:-1px on 4, 5, 6 so there's no vertical 1px gap in between.
B) use inline-block instead of floats, like this: http://jsfiddle.net/gLcNm/16/
This requires markup change so there are no whitespace between your box divs, AND a css hack for IE which doesnt natively do inline-block without redeclaring inline for block levels.
C) make each of those box divs be contained by a "row" div:
<div class="row">
<box><box><box>
</div>
Then make row clear so it'll contain the boxes.