How can i make my div background height at 100% depending on the height of it parent :
that's what i have for now :
and i want to fill all the space with the red color with the background color:
this is my HTML code :
<div class="row" style="margin-bottom: 20px">
<div class="col-6"><img style="width: 100%" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg"></div>
<div class="col-6 class1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg" style="width:100%">
</div>
</div>
and that's my css :
.class1{
background-color: yellow;
height: 100%;
}
and thanks for help :-)
Please refer to below link:
https://jsfiddle.net/ulric_469/7mh4vs6p/6/
add height 100% to the image
.row {
display: flex;
align-items: stretch;
}
.row > div {
flex: 1
}
Related
This question already has answers here:
Two inline-block elements, each 50% wide, do not fit side by side in a single row
(9 answers)
Closed 12 months ago.
I am trying to fit the two div tags side by side
I want to text to only go to 50% page width,
and image to be 50% page width.
I also do not want the image to be so large. just a normal size and will form to page size
Thank You!
html
#hero .container {
display: flex;
flex-direction: column;
}
#hero .col-left {
width: 50%;
}
#hero .col-right {
width: 50%;
}
<section id="hero">
<div class="hero container">
<div class="column-left column">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="col-right column">
<img src="image.jpg" alt="">
</div>
</div>
</section>
Use flex with flex: 50% on the flex-children.
#hero {
width: 100%;
}
.container {
width: 100%;
display: flex;
align-items: baseline;
}
.column {
flex: 50%;
}
.column-left {
display:flex;
flex-direction: column;
}
#hero .col-left{
width: 100%;
}
#hero .col-right{
width: 100%;
}
<section id="hero">
<div class="hero container">
<div class="column-left column">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="col-right column">fooooooooo
<img src="image.jpg" alt="">
</div>
</div>
</section>
Flex defaults to a flex-row placing items in a row, so to put something side by side, you want to have them in a flex-row instead of flex-column. To size the image appropriately you have to set a width/height. To have the image scale, set the image width and height to take up whatever percentage of the available space. In this instance I just let the image take 100% of the space.
#hero .container{
display:flex;
}
#hero .col-left{
width: 50%;
background-color: lightblue;
}
#hero .col-right{
width: 50%;
}
#hero .col-right #eclipse {
width: 100%;
height: 100%;
}
<section id="hero">
<div class="hero container">
<div class="col-left column">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="col-right column">
<img
id="eclipse"
src="https://upload.wikimedia.org/wikipedia/commons/2/22/Solar_Eclipse_May_20%2C2012.jpg" alt="">
</div>
</div>
</section>
On bootstrap 3,I can't make the layout how I want to and I can't see why.
My HTML :
<div class="container">
<div id="row1" class="row">
<div class="col-lg-4 col-lg-push-8 col-md-4 col-md-push-8 col-sm-push-8 col-sm-4">
<div class="round"></div>
</div>
<div class="col-lg-8 col-lg-pull-4 col-md-8 col-md-pull-4 col-sm-8 col-sm-pull-4 intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
<div id="row2" class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="round"></div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
My CSS :
#row1 {
opacity:0.3;
background-color: red;
}
#row2 {
opacity:0.3;
background-color: yellow;
}
.intro-text {
text-align:center;
}
.round {
background:#bfd70e;
border-radius:50%;
width:160px;
height:160px;
border:2px solid #679403;
margin:0 auto;
}
#media(min-width:767px) {
.intro-text {
margin-top:60px;
}
#row2 {
margin-top:-15px;
}
}
I want to keep the same structure as the first JS fiddle but gain some space by making the row 2 over the first one. So I tried a margin-top but it break all the structure, I don't know why.
This is JS fiddle without :
#row2 {
margin-top:-15px;
}
JS fiddle
This is JS fiddle with
#row2 {
margin-top:-15px;
}
JS fiddle
How do I fix that ?
Change your:
margin-top: -15px;
to:
margin-top: 15px;
Otherwise you're pulling it down.
https://jsfiddle.net/584wcaa5/1/
It's because the elements are positioned statically, therefore colliding with the elements above it.
If you give your second row position:absolute it should stop it colliding with the elements as the position is set regardless of what other elements are doing.
https://jsfiddle.net/584wcaa5/2/
This image shows desired layout:
"Lorem ipsum" div is placed on top and "Dolor sit" div sits under it. Right "P" div sets minimal height (first part) of whole main wrapper section unless "Dolor sit" div increases height (second part).
Implementation is shown in this Plunker:
Plunker demonstration
<section id="wrapperMain" style="display:table; width:100%">
<div style="background-color:#2e3338; display: table-cell; min-width:50px; width:50px;">
<h1 style="margin-left:25%; margin-right:25%">P</h1>
</div>
<div style="background-color:dodgerblue; display: table-cell;">
<!--This section should fill its parent: dodgerblue div-->
<!--So no blue color could be seen above "Lorem ipsum" div-->
<section style="display:table; width:100%; background-color:crimson; margin-top:0;">
<div style="display:table-row">
<div style="background-color:darkslategray;">Lorem ipsum</div>
</div>
<div style="background-color: #1c1e22; border-style: none; resize: none; width: 100%;">Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit </div>
</section>
</div>
And with any combination of setting margins, heights, displays I wasn't able to dock 2nd table section inside table cell without margin on top. Right now I'm not sure if this is correct approach.
I think this is what you are after, you just need to add vertical-align:top to the table cell on the right
I have also fixed your second table styles as you had block mixed with table-rows and no table-cells which may cause issues for some browsers:
<section id="wrapperMain" style="display:table; width:100%">
<div style="background-color:#2e3338; display: table-cell; min-width:50px; width:50px;">
<h1 style="margin-left:25%; margin-right:25%">P</h1>
</div>
<div style="background-color:dodgerblue; display: table-cell; vertical-align:top"> <!-- add vertical align:top here -->
<!--This section should fill its parent: dodgerblue div-->
<!--So no blue color could be seen above "Lorem ipsum" div-->
<section style="display:table; width:100%; background-color:crimson; margin-top:0;">
<div style="display:table-row">
<div style="background-color:darkslategray; display:table-cell">Lorem ipsum</div>
</div>
<div style="background-color: #1c1e22; border-style: none; resize: none; width: 100%;display:table-row;">
<div class="display:table-cell">Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit</div>
</div>
</section>
</div>
</section>
I want to center an floated image and a container (paragraph + heading):
.row {
display: block;
/* width: 100%; */
}
.left {
float: left;
}
.right {
float: right;
}
<div class="row">
<div class="container">
<img class="right" src="" width="300" height="300" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
<div class="row">
<div class="container">
<img class="left" src="" width="300" height="156" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
Here is also a live version of the problem. I have cleared the floats but now I can't center the .img and .container element. What would you slove the problem?
You have no luck with floated elements since they don't obey vertical-align. You can instead use display: table-cell along with vertical-align: middle and that would work perfectly. Albeit you will need to modify your HTML structure a little bit to place the content first before the image and vice versa depending on the way you want the content and images to appear on the front-end.
.container {
display: table;
}
.content {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image img {
width: 100%;
}
<div class="row">
<div class="container">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
Basically what you can do to vertically align text is change the display of the container to table then the paragraph to table-cell and then set the vertical-align to middle looking like this:
.row {
display: table;
overflow: hidden;
}
.left, .right {
display: table-cell;
vertical-align: middle;
}
You might also need to set overflow to hidden on the container so that the height is maintained because of the floats.
We have a fix set of CSS rules, but when we modify the HTML markup to include a canvas, a weird padding appears on the neighboring cell. Here is the CSS:
.wrap{
width:100%;
display: table;
}
.row {
display: table-row;
}
.left{
width: 100px;
display: table-cell;
background-color: #0f0;
}
.right{
background-color: #f00;
display: table-cell;
}
Normal case:
See the fiddle here. Note the position of the text in the red cell: top, aligned with the top of the cell.
<div class="wrap">
<div class="row">
<div class="left">
Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Canvas case:
See the fiddle here. We swapped the Lorem text in the left cell for a 90x90 canvas. See how the text on the red cell is now aligned with the bottom of the canvas and a padding is applied to the cell.
<div class="wrap">
<div class="row">
<div class="left">
<canvas width='90px' height='90x'></canvas>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Question: Could you explain why this padding appears on the left cell, and if this is an expected behavior? Also, could you propose a solution that gets rid of this 'bug'?