I want to stack some div elements like the picture below without having to manually enter the position of every new div I add. Is there some way I can write a style tha will stack my elements like this? I would like to avoid javascript.
Doing something like:
div{
left:-30px;
}
will not work because its gonna move all of them by the same amount.
What I know I can probably do is have smaller divs as big as the gap next to each other and have them contain the bigger ones. The problem with this tho is I want to be able to change the stack order by manipulating the big element's z-index which wont work if they are children of different divs.
Here is a stack snippet:
div {
position: relative;
float: left;
width: 200px;
height: 300px;
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: yellow;
}
#div_4 {
background-color: green;
}
<body>
<div id="div_1">div1</div>
<div id="div_2">div2</div>
<div id="div_3">div3</div>
<div id="div_4">div4</div>
</body>
Is this what you are asking for ?
div {
position: relative;
float: left;
width: 200px;
height: 300px;
margin-right: -50px;
z-index: 0;
box-shadow: 0 0 2px 2px rgba(0,0,0,0.8);
}
div:hover {
z-index: 100
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: yellow;
}
#div_4 {
background-color: green;
}
<body>
<div id="div_1">div1</div>
<div id="div_2">div2</div>
<div id="div_3">div3</div>
<div id="div_4">div4</div>
</body>
Use dispaly:inline:block float:left;
body {
background: #d300ff;
margin: 0;
padding: 0;
}
.strip {
width: 100px;
height: 700px;
display: inline-block;
margin: 0;
padding: 0;
float: left;
}
.strip1 {
background: #fe0000;
}
.strip2 {
background: #ffa901;
}
.strip3 {
background: #41ff01;
}
.strip4 {
background: #01b7ff;
}
.strip5 {
background: #011eff;
}
<div class="strip strip1"></div>
<div class="strip strip2"></div>
<div class="strip strip3"></div>
<div class="strip strip4"></div>
<div class="strip strip5"></div>
Related
I need to position two of my elements on the right hand side of the parent element, however, when using the float: right property, it makes the elements to switch positions.
I had a look at this thread: Prevent Right Floated Elements from Swapping however, adding the display: inline-block and text-align: right didn't solve the problem.
Here is a
.container {
width: 300px;
height: 20px;
background-color: red;
margin: 0 auto;
}
.element1 {
float: right;
height: 20px;
width: 10px;
background-color: blue;
color: white;
padding: 10px;
}
.element2 {
float: right;
height: 20px;
width: 10px;
background-color: yellow;
padding: 10px;
}
<div class="container">
<div class="element1">1</div>
<div class="element2">2</div>
</div>
My desired result would be blue element followed by yellow element.
UPDATE:
I do understand that this is expected behaviour and the second element is send all the way to the right after the first element, and I do know that changing the elements around would fix the problem, however, just wondering if there is a CSS solution for it.
.container {
display: flex;
}
.element4 {
margin-right: auto;
}
.element5 {
margin-left: auto;
}
.container {
width: 300px;
background-color: red;
}
.element {
height: 20px;
width: 10px;
padding: 10px;
}
.element1 {
background-color: blue;
color: white;
}
.element2 {
background-color: yellow;
color: black;
}
.element3 {
background-color: green;
color: white;
}
.element4 {
background-color: gold;
color: black;
}
.element5 {
background-color: magenta;
color: black;
}
.element6 {
background-color: goldenrod;
color: white;
}
<div class="container">
<div class="element element1">1</div>
<div class="element element2">2</div>
<div class="element element3">3</div>
<div class="element element4">4</div>
<div class="element element5">5</div>
<div class="element element6">6</div>
</div>
This is expected behaviour, either switch your elements around in your HTML or use another method of positioning besides float.
It floats the first element first, then it sees the next one and this then needs to be floated over again so it moves past the original one.
use this.
.container{
width: 300px;
height: 20px;
background-color: red;
margin: 0 auto;
position:relative;
}
.element1 {
position:absolute;
right:0;
height: 20px;
width: 10px;
background-color: blue;
}
.element2 {
position:absolute;
right:10px;
height: 20px;
width: 10px;
background-color: yellow;
}
<div class="container">
<div class="element1">
</div>
<div class="element2">
</div>
</div>
I have three divs in a row, all with display: inline-block. The left one (green) contains an image. Because of that image, two other divs (blue and yellow) and the div below them (grey) are all positioned lower by height of the image.
Why does an image in one div affect positions of other divs in an inline-block row? How can I avoid it?
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
display: inline-block;
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
}
div.div2 {
background: blue;
}
div.div3 {
background: yellow;
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
<body>
<div class="wrapper">
<div class="div1">
<img src="" width="25px" height="25px">
</div>
<div class="div2">b</div>
<div class="div3">c</div>
<div class="div4">d</div>
</div>
</body>
Try float:left; display:block; instead of inline-block for div's: Demo
CSS:
.div1, .div2,.div3 {
display: block;
float:left;
width: 300px;
height: 70px;
}
There already is discussons about inline-block-elementes still have weird heights (like here): Why does inline-block cause this div to have height?
Honestly, instead of solving those, i would adress this issue with floats:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
/*display: inline-block;*/ /* Not necessary when using floats! */
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
float: left; /* Added float left here */
}
div.div2 {
background: blue;
float: left; /* Added float left here */
}
div.div3 {
background: yellow;
float: left; /* Added float left here */
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
I have a container with a defined height containing two divs, the first which has a pixel-defined height and the second which I would like to fill the remaining space of its container, i.e. 100% minus first div's pixel-defined height.
Is there a solution to this problem which doesn't involve JavaScript? I can use a JavaScript solution (and in fact JavaScript changing the container's height is what brought me here), but this seems like it should have lower-level support, and this looks like it might become quite a cascading problem.
Example
http://jsfiddle.net/h3gsz/1/
HTML
<div id="container">
<div id="top_content"></div>
<div id="remaining_content"></div>
</div>
CSS
#container {
width: 400px;
height: 400px;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
}
Edit
An answer was already provided for the original fiddle, but in simplifying the question I allowed the answer to introduce new problems: http://jsfiddle.net/h3gsz/6/
I had removed the inline-block styling and a max-width value. Given the absolute positioning of the remaining content, the container's width is no longer defined by said content (from inline-block), so a horizontal scrollbar is introduced where there shouldn't be one.
I'm not sure if I should simply make a new question or not.
#container {
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
top: 50px;
bottom: 0;
position: absolute;
}
http://jsfiddle.net/h3gsz/4/
How about using overflow:hidden;?
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow:hidden;
}
JSFiddle.
Why not just use auto?
http://jsfiddle.net/h3gsz/3/
CSS:
#container {
width: 400px;
height: auto;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: auto;
}
you could also do it by using display:table; fiddle here
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
Someone more experienced might have a better option but you can try this :
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow: hidden ;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
margin-bottom: 0;
}
Depending on what you want to use this for you could remove the #remaining_content <div>
HTML:
<div id="container">
<div id="top_content"></div>
</div>
CSS:
#container {
background-color: green;
width: 400px;
height: relative;
min-height:400px;
border: 5px solid black;
overflow:none;
word-wrap:break-word;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}