.table {
display: table;
width: 10rem;
background-color: yellow;
}
.table-row {
display: table-row;
height: 100%;
width: 100%;
}
.table-cell {
display: table-cell;
height: 100%;
width: 50%;
position: relative;
}
.cell-top-div {
height: 1.5rem;
border-left: 1rem solid red;
}
.cell-bottom-div {
position: absolute;
top: 1.5rem;
bottom: 0;
width: 100%;
border-left: 1rem solid black;
}
.cell-right-div {
background-color: green;
height: 5rem;
}
<div class="table">
<div class="table-row">
<div class="table-cell">
<div class="cell-top-div"> </div>
<div class="cell-bottom-div"> </div>
</div>
<div class="table-cell">
<div class="cell-right-div"> </div>
</div>
</div>
</div>
Chrome & Firefox:
Internet Explorer:
Height of cell-top-div is fixed whereas height of cell-bottom-div is variable and depends on right cell. I want to add a left border to cell-bottom-div but in IE browser height is calculated as 0.
Simplest solution I've found is to remove position:relative from .table-cell and add it to .table. I think by doing this the table is determining the height vs. the table-cell which is only being given height by its contents.
.table {
display: table;
width: 10rem;
background-color: yellow;
position: relative;
}
.table-row {
display: table-row;
height: 100%;
width: 100%;
}
.table-cell {
display: table-cell;
height: 100%;
width: 50%;
}
.cell-top-div {
height: 1.5rem;
border-left: 1rem solid red;
}
.cell-bottom-div {
position: absolute;
top: 1.5rem;
bottom: 0;
width: 100%;
border-left: 1rem solid black;
}
.cell-right-div {
background-color: green;
height: 5rem;
}
<div class="table">
<div class="table-row">
<div class="table-cell">
<div class="cell-top-div"> </div>
<div class="cell-bottom-div"> </div>
</div>
<div class="table-cell">
<div class="cell-right-div"> </div>
</div>
</div>
</div>
Related
I want to set an image as the border of my div's
The main rule is: border should be outside the box and not increasing the size of a box. Also note that div's (items) have the same width, but not the same height.
The result i want to see: https://dc579.4shared.com/img/JjmymoBWiq/s23/17d090e2630/result
Border image: https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 20px;
border-image: url("https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1")
}
<div class="container">
<div class="product1 item">
123
</div>
<div class="product2 item">
123
</div>
<div class="product3 item">
123
</div>
</div>
I think you have to specifiy the color and mode as well:
.item{
border: 20px solid #555;
...
}
Might work might not, I'm not not a web developer but have played with it and this might solve it
Probably, the border-image is not ideal for you in this case.
I created an alternative way to achieve the look you want.
Essentially, I added a <span>NEW</span> element with absolute positioning inside each .item element. If you need to move around the span, modify the top and right css attributes.
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 10px solid rgb(255, 107, 107);
position: relative;
}
.item span {
position: absolute;
top: -20px;
right: -25px;
background-color: red;
padding: 5px;
border-radius: 5px;
color: white;
z-index: 10;
}
<div class="container">
<div class="product1 item">
<span>NEW</span>
123
</div>
<div class="product2 item">
<span>NEW</span>
123
</div>
<div class="product3 item">
<span>NEW</span>
123
</div>
</div>
I need to give vertical height for the right element with full background. I tried by setting
height:100%;
max-height: 100%
but the element takes only content height
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
Try giving the .clearfix class a display:flex and height:100%
.clearfix {
display: flex;
height: 100%;
}
Example below
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
.clearfix {
display: flex;
height: 100%;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
See this:
I have added display: flex for .full_container
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.full_container {
height: 350px;
border: 1px solid #ddd;
display: flex;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
I want to create two divs, one under other without JS and with IE8 support.
Each has 100% width.
Each with relative or absolute positioning for nested layout.
Top div have height by content, not fixed (it is important) and bottom div on whole leftover space.
In my example bottom div is too short, how i can stretch it to bottom?
<html>
<head>
<style type="text/css"><!--
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
position: absolute;
height: 100%;
}
#top {
position: relative;
}
#bottom {
position: relative;
top: 0px;
bottom: 0px;
}
--></style>
</head>
<body>
<div id="super">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
You can use css table properties to create this layout.
HTML:
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom
</div>
</div>
</div>
Necessary CSS:
html,
body {
height: 100%;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#super > div {
display: table-row;
}
#top {
background: green;
}
#bottom {
background: blue;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#top {
background: green;
overflow: hidden;
height: 1%;
}
.content {
padding: 10px;
}
#bottom {
background: blue;
}
#super > div {
display: table-row;
}
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom</div>
</div>
</div>
Output Image:
You can use display: table for wrapping container and table-row for top and bottom divs:
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
display: table;
position: absolute;
height: 100vh;
}
#top {
display: table-row;
height: 1px;
position: relative;
background: orange;
}
#bottom {
display: table-row;
position: relative;
top: 0px;
bottom: 0px;
background: teal;
}
<div id="super">
<div id="top">top<br>top text</div>
<div id="bottom">bottom</div>
</div>
Use flex-box
.parent{
display: flex;
flex-direction: column;
min-height: 100vh
}
.child2{
flex: 1;
background: blue;
}
<div class="parent">
<div class="child1"> first child</div>
<div class="child2"> second child</div>
</div>
Demo here
Try this :
#bottom {
position: relative;
top: 0px;
bottom: 0px;
HEIGHT: 800px;
}
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/