I created a div based table. I'm trying to take a image, put it in top left table cell and make it responsive. I've made it responsive, but its not in the table cell I want it to be. Any help?
JSFiddle:
https://jsfiddle.net/benjones337/3c4fkb78/18/
HTML
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell"><p class="rspimg1"></p></div>
<div class="hmTableCell"><p class="rspimg2"></p></div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
CSS
.hmTable {
margin: 0 auto; /* or margin: 0 auto 0 auto */
display: table;
width: 50%;
}
.hmTableRow {
display: table-row;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
position:relative;
}
.hmTableBody {
display: table-row-group;
}
.rspimg1{
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png");
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
position:absolute;
}
.rspnimg2{
}
When using background-image, the div doesn't grow with the image, so you will need to give it a height/width, either to the cell or the image div (btw, I changed your p to div, as p is for text rather than image).
Below sample I'm pretty sure look close to what you are after, and If not, drop me a comment and I'll fix it for you.
html, body {
margin: 0;
height: 100%;
}
.hmTable {
margin: 0 auto;
display: table;
width: 50%;
height: 30%;
}
.hmTableRow {
display: table-row;
height: 10%;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
}
.rspimg1{
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png") center no-repeat;
background-size: contain;
width:100%;
height:100%;
}
.rspnimg2{
}
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell">
<div class="rspimg1">triangle</div>
</div>
<div class="hmTableCell">
<div class="rspimg2">square</div>
</div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
Remove position:absolute or add top:0 to .rspimg1.
Result
Related
Is there any way to make the content to flow to left/right instead of down while the container doesn't have enough space for it in CSS?
.container1 {
width: 70%;
float: left;
}
.container2 {
width: 30%;
float: left;
}
.content {
width: 50%;
float: left;
}
.overflowContent {
width: 20%;
float: left;
}
/* You can add background colors to see where every part is */
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>
I want a way that makes the overflow part go on the right side of the container instead of below it.(i want the third part to be displayed on/over the container 2)
My idea was to add something to a link with [ display : hidden ] that only shows up [ display : block ] on the right side of the link on the other parts of the website while we hover on the link.
Add a div inside the container that will hold the overflowing content, and apply overflow-x: auto to the container.
The flexbox code is just a friendly suggestion, much easier to work with than floats for layout.
* { box-sizing: border-box; }
.container {
width: 70%;
border: 5px solid red;
overflow-x: auto; /* this causes anything inside that is wider to overflow horizontally */
}
.inner {
display: flex;
}
.content {
flex: 0 0 50%;
padding: 20px;
background: papayawhip;
}
.overflowContent {
flex: 0 0 20%;
padding: 20px;
background: dodgerblue;
}
<div class="container">
<div class="inner">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
</div>
You can do this considering inline-block and white-space:nowrap. Don't forget to reset the whitespace between inline element (I used the font-size trick here)
.container1 {
width: 70%;
display:inline-block;
outline:1px solid red;
}
.container2 {
width: 30%;
display:inline-block;
outline:1px solid green;
}
.content {
width: 50%;
display:inline-block;
font-size:initial;
}
.overflowContent {
display:inline-block;
font-size:initial;
}
body {
font-size:0;
white-space:nowrap;
}
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I've got a div, I need the bottom div to fill the remainder of the screen and show a scroll bar. The bottom div is not showing a scroll bar.
JSFiddle
.page {
position: fixed;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: $menu-height 0 0 0;
box-sizing: border-box;
}
.sidebar {
width: 500px;
float: left;
height: 100%;
box-sizing: border-box;
background: #ddd;
border-right: 1px solid red;
}
.top {
height: 200px;
background: #eee;
}
.bottom {
background: #ccc;
overflow-y: auto;
}
.filler-content {
height: 2000px;
}
<div class="page">
<div class="sidebar">
<div class="top">
top
</div>
<div class="bottom">
<div class="filler-content">
bottom
</div>
</div>
</div>
</div>
If I understood your problem correctly, display: flex is your friend.
Add display: flex; flex-direction: column; to your .sidebar and flex: 1; to your .bottom and that should do it. If I misunderstood, just let me know in a comment and I'll try to help otherwise
Demo: http://jsfiddle.net/qy5fL29t/23/
I would use a flexbox solution as it will make it a lot simpler and get rid of the need for using floats (we shouldn't be abusing them in the day of css3)
html,
body {
height: 100%;
margin: 0;
}
.page {
height: 100%;
display: flex; /* this one is so that you don't need to float the sidebar and can insert a main area that will take up the rest of the width */
flex-direction: column;
flex-wrap: wrap;
}
.sidebar {
width: 500px;
height: 100%;
display: flex; /* this is so we can get bottom to take any height top doesn't need */
flex-direction: column;
background: #ddd;
border-right: 1px solid red;
}
.top {
flex-basis:200px;
min-height: 200px; /* these two are to force top to be 200px otherwise flex may recalculate based on available space */
max-height: 200px;
background: #eee;
}
.bottom {
flex-grow: 1; /* this forces bottom to grow to fill the space top doesn't take */
overflow-y: auto;
}
/* test and example below */
.filler-content {
height:1000px;
}
.main {
flex-grow: 1;
background: white;
}
<div class="page">
<div class="sidebar">
<div class="top">
top
</div>
<div class="bottom">
<div class="filler-content">
bottom
</div>
</div>
</div>
<div class="main">
</div>
</div>
Replace your css with this
.sidebar {
width: 500px;
float: left;
height: 100%;
box-sizing: border-box;
background: #ddd;
border-right: 1px solid red;
}
.top {
height: 200px;
background: #eee;
}
.bottom {
background: #ccc;
overflow-y: scroll;
height:200px
}
.filler-content {
height:2000px;
}
<html>
<body>
<div class="page">
<div class="sidebar">
<div class="top">
top
</div>
<div class="bottom">
<div class="filler-content">
bottom
</div>
</div>
</div>
</body>
</div>
</html>
You can use this code for bottom div srollbar.
.bottom {
background: #ccc;
overflow-y: auto;
height:200px;
}
I want 100% wide divs containing images to go down my page.
On top of these divs, I want one 1210px wide div where I can put my content.
Example:
http://mudchallenger.com/a-responsivee.html
Question:
How can I get the blue box to touch the green box, while red box stays above the two?
Thank you!
I currently have this:
}
#green{
position: absolute;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: green;
}
#blue{
position: relative;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: blue;
}
#red{
position: relative;
float:center;
height: 800px;
width: 1210px;
margin: 0 auto;
z-index:2;
background-color: red;
}
Use background-images to accomplish what you want. Just stack your divs and it should work just fine. If you want your content to span two containers with background images, that's a different story, but the example you cite doesn't do that.
Here's a fiddle giving close to an implementation of what you want. Just replace the container background-colors with background-images and you'd have what you want.
http://jsfiddle.net/CfZu4/
HTML:
<div class="container">
<div class="content">
Blah
</div>
</div>
<div class="container red">
<div class="content">
Blah
</div>
</div>
CSS:
.container{
background-color:#00f;
height:200px;
clear:both;
}
.content{
float:right;
width:40%;
height:150px;
margin-top:20px;
background-color:#0f0;
}
.red{
background-color:#f00;
}
EDIT: Scaled down version for fiddle:
http://jsfiddle.net/dc2bar/asy8Y/2/
HTML:
<div class="background-banner green">
<div class="main-content red">
<!-- content -->
</div>
</div>
<div class="background-banner blue">
</div>
CSS:
.background-banner {
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
}
.main-content {
position: relative;
height: 800px;
width: 70%;
margin: 0 auto;
z-index:2;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
EDIT yet again: removed invalid css rule.
What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.
When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.
I have an example here of what I have so far, and here if the code:
<html>
<head>
<title>Columns</title>
<style>
div {
margin: 0;
padding: 0;
}
.container {
background: #DDD;
width: 1200px;
margin: 0 auto;
padding: 2% 0;
}
.block {
background: #555;
width: 100%;
display: block;
}
.col {
width: 49%;
display: inline-block;
background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
</div>
</div>
</body>
</html>
Your problem is being causes by inline-block, using this makes a space appear inbetween.
Try using float:left to get around this:
See on jsFiddle
.col {
width: 50%;
float: left;
box-sizing: border-box;
background: #333;
}
Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.
Remember to include a clear fix afterwards also to "clear" the floats.
CSS
.clear {
clear:both;
}
HTML
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
<div class="clear"></div>
</div>
Try replacing these classes:
.block {
background: none repeat scroll 0 0 #555555;
display: block;
overflow: auto;
width: 100%;
}
.col {
width: 49%;
float: left;
background: #333;
}
.container {
background: #DDD;
width: 900px;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.block {
background: #555;
width: 100%;
display: block;
}
.block:after {
content: "";
display: table;
clear: both;
}
.col {
width: 50%;
float: left;
background: #333;
}
I've got two div containers.
Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?
.left {
float: left;
width: 83%;
display: table-cell;
vertical-align: middle;
min-height: 50px;
margin-right: 10px;
overflow: auto;
}
.right {
float: right;
width: 16%;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->
See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)
HTML:
<div class="right"></div>
<div class="left"></div>
CSS:
.left {
overflow: hidden;
min-height: 50px;
border: 2px dashed #f0f;
}
.right {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed #00f;
}
You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.
.box {
display: flex;
}
.left {
flex: 1; /* grow */
border: 1px dashed #f0f;
}
.right {
flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
border: 1px dashed #00f;
}
<div class="box">
<div class="left">Left</div>
<div class="right">Right 250px</div>
</div>
You can use calc() Function of CSS.
Demo: http://jsfiddle.net/A8zLY/543/
<div class="left"></div>
<div class="right"></div>
.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}
.right {
width:200px;
height:200px;
background:red;
float:right;
}
Hope this will help you!!
If you can flip the order in the source code, you can do it like this:
HTML:
<div class="right"></div> // needs to be 250px
<div class="left"></div>
CSS:
.right {
width: 250px;
float: right;
}
An example: http://jsfiddle.net/blineberry/VHcPT/
Add a container and you can do it with your current source code order and absolute positioning:
HTML:
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
#container {
/* set a width %, ems, px, whatever */
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
right: 250px;
}
.right {
position: absolute;
background: red;
width: 250px;
top: 0;
right: 0;
}
Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.
Example: http://jsfiddle.net/blineberry/VHcPT/3/
If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).
1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width
.left
{
***width:300px;***
float: left;
overflow:hidden;
}
.right
{
overflow: visible;
***margin-left:300px;***
}
<div class="wrapper">
<div class="left">
...
</div>
<div class="right" >
...
</div>
</div>
Hope this works for you!
There are quite a few ways to accomplish, negative margins is one of my favorites:
http://www.alistapart.com/articles/negativemargins/
Good luck!
set your right to the specific width and float it, on your left just set the margin-right to 250px
.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto
}
.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}
If you need a cross browser solution, you can use my approach, clear and easy.
.left{
position: absolute;
height: 150px;
width:150px;
background: red;
overflow: hidden;
float:left;
}
.right{
position:relative;
height: 150px;
width:100%;
background: red;
margin-left:150px;
background: green;
float:right;
}
Use the simple this can help you
<table width="100%">
<tr>
<td width="200">fix width</td>
<td><div>ha ha, this is the rest!</div></td>
</tr>
</table>