I am using a table and table cell in my website. The left most column needs to start from the top. Instead it goes to the bottom. Below is a link to that issue where the grey div starts from the very bottom.
http://jsfiddle.net/HtAJw/9/
It's not clear what end result you're looking to achieve. However, by adding a pixel width to every element, where it adds up to something less than or equal to the container width, will prevent the wrapping you see.
http://jsfiddle.net/HtAJw/10/
HTML:
<div class="parent">
<div class="child">
<fieldset>
a
</fieldset>
</div>
<div class="child" >
<div class= "newChildLeft">
a <br/> b<br/> b<br/> b<br/>
</div>
<div class= "newChildRight">
b<br/> b<br/> b
</div>
</div>
</div>
CSS:
.parent {
width: 100px;
display: table;
border: 1px solid green;
height: 100%
}
.child {
background: blue;
display: table-cell;
height: inherit;
width: 50px;
}
.newChildLeft {
float: left;
width: 25px;
}
.newChildRight {
float: right
width: 25px;
}
.child + .child {
background: red;
width: 50px;
}
fieldset {
height: 100%;
background-color: #666;
width: 50px;
}
Related
I'm trying to achieve the following:
I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.
My HTML structure is the following:
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
In the .interface CSS I have the following:
.interface
{
position: absolute;
top: 15%;
}
With this CSS I'm unable to see the green rectangle. If I remove the position: absolute (and therefore the top: 15% stops applying) I'm able to see the green rectangle.
You can see the issue in this JSFiddle: https://jsfiddle.net/v9euwdz3/
So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?
Here is what you're trying to achieve using flex:
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.navetc {
background-color: white;
height: 15vh;
}
.top {
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="navetc">
SPACE
</div>
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
You could also use margin-top: 15%; instead of a placeholder div
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.top {
margin-top: 15vh;
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
(I used vh instead of % to get it to show up correctly in this code snippet)
as we know the content that have height which is 100% means is 100% of its parent and while the height of the parent is not defined will cause an error that's what you was stuck with you set the with of body to 100% but was not right you would set it to 100vh to fit the screen if you are on computer and the other mistakes that I found was in your calculation where you used to subtract the measurement which is in parcentages from the one in pixels height: calc(100% - 150px); and the others where simple mistakes
html,
body {
height: 100vh;
}
.app {
position: relative;
height: 100%;
display: flex;
}
.interface {
position: absolute;
height: 100%;
top: 15%;
}
.view {
position: fixed;
height: 100%;
background-color: #ccc;
width: 350px;
}
.body {
position: relative;
height: 100%;
}
.body .top {
height: 15%;
border: 1px solid #000;
}
.body .middle {
height: 60%;
border: 1px solid red;
}
.body .bottom {
height: 20%;
border: 1px solid green;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
to see the result in the snippet you should observe it in full page and also when you see the result through jsfiddle there at the result section there is bar downward which hide some part of footer
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>
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;
}