This grid works fine except that when I center the text on the right the br stops working so a ends up on its own line... Tho it works fine without the link or without the center.
I can fix this with a p or div wrapper around that collection of text but maybe a better way?
Sorry for ignorance.
Thanks.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.right {
background-color: lightgray;
display: flex;
align-items: center;
}
.left {
background-color: darkgray;
}
<div class=container>
<div class="left">
left<br>left<br>left<br>left
</div>
<div class="right">
google<br>right<br>right
</div>
</div>
<div class=container>
<div class="left">
left<br>left<br>left<br>left
</div>
<div class="right">
google<br>right<br>right
</div>
</div>
Rewrite your code so it looks like this, using <br> is not a good way to seperate seperate lines of text
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.right {
background-color: lightgray;
display: flex;
align-items: center;
flex-direction: column;
}
.left {
background-color: darkgray;
}
/** This will remove the space between the p tags **/
p {
margin: 0;
}
<div class=container>
<div class="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>google</p>
<p>right</p>
<p>right</p>
</div>
</div>
Related
I'm programming a web application with collapsible sidebar inside a CSS grid. The CSS grid divides the whole UI into sections, and the sidebar panel is a sub-component of one of those sections.
The issue I am running into is that I want the side panel to automatically shrink to the minimum size of it's contents, which it does fine until it's added to a CSS grid cell, at which point it expands to fill the entire cell.
Here is a quick example of the issue:
<style>
#myGrid{
display: grid;
grid-template-areas:
"g1 g2";
}
#panel{
grid-area: g2;
display: inline-block;
background: #FFAAAA;
height: 100%;
width: auto;
min-width: minmax(0, 1fr);
}
#panelContents{
display: flex;
flex-direction: row;
height: 100%;
}
#collapseArrow{
align-self: center;
right: 0;
top: 50%;
}
#block{
grid-area: g1;
width: 200px;
height: 100%;
background: #AAAAFF;
}
</style>
<body>
<div id="myGrid">
<div id="block">
Contents
</div>
<div id="panel">
<div id="panelContents">
<div id="collapseContents">
<div class="item">
Item1
</div>
<div class="item">
Item2
</div>
<div class="item">
Item3
</div>
<div class="item">
Item4
</div>
<div class="item">
Item5
</div>
</div>
<div id="collapseArrow"><</div>
</div>
</div>
</div>
</body>
Any idea how to solve this? I am trying to get the red panel to shrink to fit it's contents. I tried changing the min-width to 0, but that didn't seem to help.
EDIT: This is a more complex UI for an HTML5 game engine. The left grid cell is an asset browser, and the red panel is a simple properties panel for the right editor window (right grid cell), which I'm trying to display only on the left portion of the cell, so the rest of the right cell can be the editor window.
Use the other column to squeeze the panel down to its content width.
#myGrid {
display: grid;
grid-template-columns: 1fr auto; /* 1fr consumes all free space on the row */
grid-template-areas: "g1 g2";
}
#block {
grid-area: g1;
background: #AAAAFF;
}
#panel {
grid-area: g2;
background: #FFAAAA;
}
#panelContents {
display: flex;
}
#collapseArrow {
align-self: center;
}
<div id="myGrid">
<div id="block">
Contents
</div>
<div id="panel">
<div id="panelContents">
<div id="collapseContents">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
</div>
<div id="collapseArrow"><</div>
</div>
</div>
</div>
Currently, this is what it looks like: https://jsfiddle.net/r8zgokeb/1/
However, I am trying to place another small image underneath the text as well, but i want it to start right underneath the text. Therefore, the image underneath the text should not go past the bottom of the left image.
HTML:
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS:
.image-txt-container {
display:flex;
align-items:center;
flex-direction: row;
}
Here is a simple code (not flex, but float of first img):
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>Text here</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
And CSS:
.image-txt-container {
width: 100%;
}
.image-txt-container img:first-child {
float: left;
padding-right: 40px;
width: 450px;
}
.image-txt-container img:last-child{
max-width: 50px;
}
Hi think this is onw of the way to do
HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
CSS
.image-txt-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
grid-auto-flow: row;
}
.image-txt-container img:nth-child(3) {
grid-column-start: 2;
}
I have two divs (div1 and div2) side by side and I would like to place a third div (div3) under div2.
I've tried adding a margin to div3 to try and line it up, but div1 width is dynamic. I've also tried floating div3 to the right but then the content is too far and doesn't line up with the start of div2 like in the image above
.row {
display: flex;
}
.div1 {
margin-right: 1em;
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
The default behaviour is div3 being under div1. I am trying to put div3 below div 2
You can do this with below:
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.div {
flex-basis: 50%;
min-height: 100px;
}
.div1 {
background: red;
}
.div2 {
background: blue;
}
.div3 {
background: aqua;
}
<div class="wrapper">
<div class="div div1">div1</div>
<div class="div div2">div2</div>
<div class="div div3">div3</div>
</div>
And here is a codepan
Use float and inline-block:
[class*="div"] {
display:inline-block;
border:2px solid;
}
.div1 {
float:left;
margin-right: 1em;
margin-bottom:10px; /*mandatory margin to push the div3*/
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
You can make use of the CSS Grid structure. In this way you can have all child elements inside a single parent container.
.row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.div1 {
grid-area: 1 / 1 / 2 / 2;
}
.div2 {
grid-area: 1 / 2 / 2 / 3;
}
.div3 {
grid-area: 2 / 2 / 3 / 3;
}
/* Snippet styling */
.row > div {
background: #6A67CE;
color: white;
text-align: center;
text-transform: capitalize;
font-family: sans-serif;
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
<div class="div3">
<p> some content under div2 </p>
</div>
</div>
Here is a flex solution, you can use the slider to change the width of the left box to see that the width doesn't matter.
In case you are not familiar with flex, here is what happens.
display: flex; tells the container to act as a flex container, flex is just another display behavior just like float.
flex-flow: row wrap;, now that the container is flex, tells the children to display in a row, and wrap if necessary, not in this case.
That is all, after adding two boxes in the right div, and set some demo width and height, we are done.
window.addEventListener('DOMContentLoaded', e => {
let left = document.querySelector('.left')
let range = document.querySelector('.range')
range.addEventListener('input', e => {
left.style.width = e.target.value + 'px'
})
})
div {
border: 3px solid green;
}
.container,
.right {
border: none;
}
.container {
display: flex;
flex-flow: row wrap;
}
.left,
.one,
.two {
min-width: 50px;
min-height: 50px;
}
.left {
margin-right: 1em;
}
.one {
min-width: 80px;
}
.two {
margin-top: 1em;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
<input class="range" type="range" min="50" max="300"></input>
Since div do not share the same parent , you could use display:contents and set a grid-layout one level upper , unfortunately, display:contents is not yet supported every where .
here is an example (body is the wrapper and .row not seen anymore)
body {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px;
}
.row {
display: contents;
/* removed from the tree */
}
div {
border: solid;
/* show me */
grid-column: 2;
/* make it the defaut column position */
width: max-content;
}
.div1 {
grid-column: 1;
/*a single reset enough here */
}
#supports (display:grid) {
.disclaimer {
display: none;
}
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
<p class="disclaimer">Your browser do not support <code>display:contents</code>.</p>
Another possibility is the table-layout algorythm
example with display:table (widely supported) , but every cell of each columns are of the same width.
body {
display: table;
border-spacing: 10px;
}
.div3,
.row {
display: table-row;
}
.row>div,
.div3>p,
.div3::before {
display: table-cell;
border: solid;
}
.div3::before {/* it stands in column 1 */
content: '';
border: none;
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
Nothing is perfect ;)
hi i coded this if that helps
.first-container {
display: flex;
flex-direction: row;
}
.first-container div{
margin: 10px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="first-container">
<div class="first">first</div>
<div class="second">second</div>
</div>
<div class="third">third</div>
</div>
Im a new in css and html. How can I separate 2 divs equally from left and right?? Here's my html code.
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
you can try this. Learn Bootstrap grid or flexbox that would be easy for these kinds of task.
.container{
width:100%;
display:flex; /* for display it's child div beside each other */
}
.first-div,.second-div{
width:50%; /* for divide container into 2 equal divs */
border: 1px solid black; /* for border around divs */
}
<div class="container">
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
</div>
You have several options and it all depends on your exact use case.
The first option is to set both to 50% of the available width (left and right):
.first-div {
display: inline-block;
width: 50%;
}
.second-div {
display: inline-block;
width: 50%;
}
<div class="first-div">
<h1>About</h1>
</div><div class="second-div">
<h1>Services</h1>
</div>
Another option is to use flex:
.wrapper {
display: flex;
}
.first-div {
flex-grow: 1;
}
.second-div {
flex-grow: 1;
}
<div class="wrapper">
<div class="first-div">
<h1>About</h1>
</div>
<div class="second-div">
<h1>Services</h1>
</div>
</div>
If you're not familiar with flex, flexbox froggy is a great interactive way to learn.
And a final option is to use grid:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
<div class="wrapper">
<div class="first-div">
<h1>About</h1>
</div>
<div class="second-div">
<h1>Services</h1>
</div>
</div>
If you're not familiar with grid, grid garden is a great interactive way to learn.
Sidenote: make sure to also properly close the <h1> tags with a </h1>.
Try this code. Hope it useful for your question.
/* CSS */
.container-box{
width:100%;
display:flex;
}
.first-div,.second-div{
width:50%;
border:1px solid #ddd; //just to look
}
<!-- HTML -->
<div class="container-box">
<div class="first-div">
<h1>About<h1>
</div>
<div class="second-div">
<h1>Services<h1>
</div>
</div>
Check Css FlexBox .
FlexBox Tutorial
<div class="mainContainer" style="
display: flex;
justify-content: space-around;
">
<div class="first" style="
border: 1px solid;
">
<h1>About</h1><h1>
</h1></div>
<div class="second-div">
<h1>Services</h1><h1>
</h1></div>
</div>
https://codepen.io/masm/pen/MxWBEB
Hello there,
I am trying to create a basic, responsive layout using CSS Grid and Flexbox. However I'm coming across some issues with the header. I don't full understand why the logo and nav aren't spanning across the 960px width.
HTML:
<div id="hd">
<div class="container">
<div class"ct">
<div class="logo">
Logo
</div>
<div class="nav">
one
two
three
four
five
</div>
</div>
</div>
CSS:
.container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "top top"
"main side"
}
.ct {
grid-area: top;
}
.logo {
background: #ddd;
}
.nav {
background: #ddf;
}
Secondly, I am trying to make it so that the logo and nav are side by side. My idea was to set .ct to display:flex, however it does not work.
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
Lastly, I want the background colors of the header to span the full width of the page, and the content (logo, nav, main, side) to take up no more than the 960px width, which is why I added a container in between the #hd and #main divs. My question here is, is this a good approach?
Issues I have noted in your code are the following,
you forgot to add "=" before the class name. ie " "
then you put "flex-direction: column;"
Please check the following fiddle. Hope that's what you are looking for
Try this fiddle
.ct {
grid-area: top;
display: flex;
flex-direction: row;
}
For side by side, you need to place them row-wise and in the center align the content of the div vertically, Also give some predefined height to it:
.ct{
height: 80px;
display: flex;
justify-content: flex-start;
align-items:center;
flex-flow: row;
}
Remove flex-direction: column; and there is no = after class ct
<div class="ct">
#hd {
background: #444;
}
.container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "top top"
"main side"
}
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
.logo {
background: #ddd;
}
.nav {
background: #ddf;
}
.main {
background: #ee0099;
grid-area: main;
}
.side {
background: #efefef;
grid-area: side;
}
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
<div id="hd">
<div class="container">
<div class="ct">
<div class="logo">
Logo
</div>
<div class="nav">
one
two
three
four
five
</div>
</div>
</div>
</div>
<div id="mn">
<div class="container">
<div class="main">
<p>hello</p>
</div>
<div class="side">
<p>hello</p>
</div>
</div>
</div>