I need to make two .tinted-containers the same height as each other (using CSS if possible) but each one is under a grid column.
I can't tint the grid columns because they use padding to create the
gutters and I'd have no white space between the tinted containers if
I tint the background.
It's a %-based grid so adding a margin to both
columns takes the width to over 100%.
<div class="grid-row">
<div class="grid-column-half">
<div class="tinted-container">
<p>Taller</p>
<p>column</p>
<p>on</p>
<p>left</p>
</div>
</div>
<div class="grid-column-half">
<div class="tinted-container">
<p>This container should be the same height as the other one.</p>
</div>
</div>
</div>
How can I make the containers the same height?
Flexbox can do that:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid-row {
display: flex;
}
.grid-column-half {
border: 1px solid grey;
width: 50%;
padding: 10px
}
.tinted-container {
height: 100%;
background: pink;
}
<div class="grid-row">
<div class="grid-column-half">
<div class="tinted-container">
<p>Taller</p>
<p>column</p>
<p>on</p>
<p>left</p>
</div>
</div>
<div class="grid-column-half">
<div class="tinted-container">
<p>This container should be the same height as the other one.</p>
</div>
</div>
</div>
You will need to set heights of the div elements to get them to the same size.
The reason you need to do this is because the divs are not all set as one specific height or width, it depends on what is contained within them, and what they are contained in. With a simple example like this, simply setting it to a static height of 200px and putting a border, you can see that the divs are the same height. Without declaring a height, both divs would be different heights, and you could play with that on the fiddle.
To see this working, check out the fiddle here: https://jsfiddle.net/john_h/rnnjx28m/
You can add this CSS to set the heights on your class:
.tinted-container {
height: 200px;
border: 1px solid black;
}
.grid-column-half {
float: left;
display: inline-block;
}
And your html can stay the same:
<div class="grid-row">
<div class="grid-column-half">
<div class="tinted-container">
<p>Taller</p>
<p>column</p>
<p>on</p>
<p>left</p>
</div>
</div>
<div class="grid-column-half">
<div class="tinted-container">
<p>This container should be the same height as the other one.</p>
</div>
</div>
</div>
You will need to play with your spacing to get your intended look!
Related
I'd like my div to be 175px width if the text inside is shorter than this value or to take 100% of cointainer width if the text is bigger than 175px. How can I achieve this?
So far I tried to play with width, min-width and max-width but can figure it out.
.text-div {
min-width: 175px;
max-width: 100%;
border: dotted 2px;
}
<div id="container">
<div class="text-div">
Short Text
</div>
<div class="text-div">
Loooooooooooooog Text
</div>
</div>
A hacky approximation using clamp(). You need an extra wrapper that has a shrink-to-fit behavior (I used float but you can consider inline-block). 100% of the child width will refer to its own width since its parent is shrink-to-fit.
I use clamp and compare 100% with 175px.
If 100% > 175px we have (100% - 175px)*10000 a big positive value clamped to 100vw, your full width behavior (we have to hide the overflow)
If 100% < 175px we have (100% - 175px)*10000 a big negative value clamped to 175px
#container {
overflow:hidden;
}
.text-div {
width: clamp(175px, (100% - 175px)*10000, 100vw);
background:yellow;
margin:5px;
}
.wrap {
float: left;
clear: left;
}
<div id="container">
<div class="wrap">
<div class="text-div">
Short Text
</div>
</div>
<div class="wrap">
<div class="text-div">
Looooooooooooooooooooooooooong Text
</div>
</div>
</div>
Here is how you could achieve the desired result by adding some Javascript.
document.querySelectorAll('.text-div').forEach( div => {
if(div.clientWidth > 175){
div.classList.add('long-text');
}else{
div.classList.add('short-text');
}
})
.text-div {
display: table;
border: dotted 2px;
}
.short-text{
width: 175px;
}
.long-text{
width: 100%
}
<div id="container">
<div class="text-div">
Short Text
</div>
<div class="text-div">
Looooooooooooooooooooooooong Text
</div>
</div>
guys, I'm trying to achieve a layout, where I have a container with 2 cols, however, the right col needs to be positioned to the right of the screen, and not to the right of the container... if that makes sense?
<div class="container">
<div class="row">
<div class="col-lg-6">
this content is inside the container normally
</div>
<div class="col-lg-6">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
</div>
</div>
Try putting text in div and then add class mr-0 to it.
This is how you can do it.
Working Example
<div class=".parent">
<div class="child">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
<div class="abs">
<div class="container">
<div class="row">
<div class="col-sm-6">
this content is inside the container normallythis content is inside the container normally
</div>
</div>
</div>
</div>
</div>
.parent {
position: relative;
}
.child {
float: right;
width: 50%;
background: red;
}
.abs {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.container {
border: 1px solid green;
}
I am having an issue aligning two different elements to where they are parallel horizontally. I am wanting the second grid right_service_wrap to appear on the right side of the page just like the left_service_wrap. I am not sure what I am doing wrong that the float right is appearing below the left_service_wrap.
Anyone have any ideas??
.left_service_wrap {
}
.right_service_wrap {
float: right;
display: inline;
}
.title_left {
margin-left: 20%;
}
.title_right {
}
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
<div class="left_service_wrap">
<div class="title_left">A LIST OF OUR SERVICES</div>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Flooring</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofing</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
</div>
<div class="right_service_wrap">
<div class="title_right">A LIST OF OUR SERVICES</div>
</div>
Set the width of both to 50% and do:
.left_service_wrap {
float:left;
width:50%;
}
.right_service_wrap {
float: left;
width:50%;
}
Working demo here: https://jsfiddle.net/usrce45v/
Consider that your requirement of an extra left margin to be applied to the left container requires you to rearrange the width of both left and right containers. So, for a left-margin of 20% the equation becomes:
whole parent width (100%) minus margin (20%), half the result (40%).
I am not sure if I fully understand your question, but if it is what I think, you have to add float: left to the .left_service_wrap class rule. (and define a width for it that allows the elements in it to be displayed as desired)
I hope that someone can help me about this problem. I have structure like this
<div id="Div1" style="height:auto">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" style="height:100%;"></div>
</div>
</div>
Also I put in my css file
html,body
{
height: 100%;
}
Problem is that neither Div3 nor Div4 have the expected height of 100%, I check size of first two divs with firbug and they are ok, filling the whole screen.
Sorry for my bad English, I hope that you understand my question :)
Have a look at this. When using a percentage, each div will be affected by the height of it's parent.
In this example the html,body has a height of 100% and the percentage of each div child is then relative to it's parent. Note how each div is half the size of it's parent div, each step it shrinks by half the size.
Updated with all percentage example
Simple example
HTML
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
div {
height: 100%;
background: #F00;
}
div div {
background: #FF0;
height: 50%;
}
div div div {
background: #000;
height: 50%;
}
div div div div {
background: #F30;
height: 50%;
}
First of all write height in inline style
<div id="Div4" height:100%;"></div>
change to
<div id="Div4" style="height:100%;"></div>
The key is to set the height of the div with id "Div1" to something other than "auto". Try 100% or a specific value like this
<div id="Div1" style="height:100%;">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" height:100%;"></div>
</div>
</div>
I need to create a centered grid of squares with text inside it. With jQuery help user will be able to add or remove squares (in row and column).
Basically the code would be:
<style>
div.square{
padding: 5px;
margin: 5px;
border: 1px solid green;
/*display: inline-table; /* IE fail*/
/*display: inline-block; /* IE fail*/
float: left;
}
div.row{
margin: 0 auto;
}
</style>
<div style="width:500px; border:1px solid red; margin: 0 auto">
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
</div>
What is the best way to do it?
Are you looking for something like this:
http://jsbin.com/etunuk/1/
Floated elements shrink wrap, so they need a width attached.
To center floated elements you need to add their width + paddings + margins + borders and assign that width to the wrapper, in this case .row and center .row.
If you remove the border, you need to remove the width, 1px * 6 from the row width and so on.