I'm trying to make this layout (I've made a picture to explain what i want to do):
So I've 4 divs where I'm going to put some text inside. I've used flexbox and justify content to align them center, but i want to put a text "Latest News" that is aligned with the first div (in this case Element 1).
I'm not able to think about an elegant solution to my problem, so I'm here to ask for help.
.wrapper{
display: flex;
justify-content: center;
}
.box{
height: 200px;
background-color: red;
margin: 10px;
width: 200px;
}
<p class="section-title">Latest News</p>
<div class="wrapper">
<div class="box">Element 1</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
There are a few ways you can do it, and it depends how dynamic your box elements are going to be.
One simple solution that works for n boxes is to include the section title to the first box and give it position: absolute whilst adding margin-top to the wrapper to make space for the title.
https://codepen.io/anon/pen/MJpOrM
.wrapper {
display: flex;
justify-content: center;
margin-top: 40px;
}
.box {
height: 200px;
background-color: red;
margin: 10px;
width: 300px;
}
.section-title {
position: absolute;
top: 0px;
}
<div class="wrapper">
<div class="box">
<p class="section-title">Latest News</p>
Element 1
</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
Considering that you have a fixed width for your boxes, the easiest solution is to make the section-title a fixed width too:
.section-title {
width: 1260px; //This is merely 300 * 4 + the margin
margin: auto;
}
https://codepen.io/anon/pen/BpWmJV
Related
This question already has answers here:
Better way to set distance between flexbox items
(40 answers)
Closed 9 months ago.
I'm trying to manipulate divs without using float, using display: inline-block; in my css allows me to get the siblings next to each other within a container div, but with inline-block, I can't space them apart using margin-left: 20px;, margin-right :20px; ... and so on.
I'm sure there's a really simple solution, even if it doesn't involve using display: inline-block;, I just want to avoid floats and preferably avoid padding too.
you can try flex-box method to create space between two div which is inside a div (I conclude that from your question )
.parent{
border:2px solid red;
display:flex;
justify-content:space-around;
}
.parent div{
border:3px solid black;
}
<div class="parent">
<div class="child1">
child1
</div>
<div class="child2">
child2
</div>
</div>
you can also add many child div as you want , they will automatically make place in the parent container.
Here you can see below how i managed to do so without display:inline-block; and this will not break on any device unlike inline-block.
.box {
width: 200px;
height: 200px;
background: #F3F3F3;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.container {
display: flex;
margin-bottom: 40px;
}
.container.two {
justify-content: space-between;
}
.container.three {
justify-content: space-evenly;
}
Margin 20px in between
<div class="container">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align boxes on left and right according to width
<div class="container two">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align even spacing on left and right
<div class="container three">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Given a .mainContainer which display was flex, I wanted to make a box with vertical separation lines. The restriction was that the separators shouldn't use all the vertical space, so my approach was giving it a fixed margin and making the separator use all the vertical space posible using min-height: 100% .
Like this:
<div class="mainContainer">
<div class="flexContainer">
<div class="text"> Text 1</div>
<div class="separator"></div>
<div class="text"> Text 2</div>
<div class="separator"></div>
<div class="text"> Text 3</div>
</div>
</div>
With the following styles:
.mainContainer {
display: flex;
}
.flexContainer {
display: flex;
}
.text {
background-color: #000;
color: #fff;
padding: 8px;
}
.separator {
min-height: 100%;
margin: 8px 0;
width: 4px;
background-color: red;
}
However, the separator did end overflowing the container using 100% of its height and adding the fixed margin over it.
The weird part is that changing the display of the .mainContainer from flex to block solved this issue. Can someone explain me this behavior?
I am having two problems with the checkboxes shown above. The styles applied on the parent and child are essentially:
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
outline: 1px solid black;
margin-right: 0.5em;
}
.child {
width: 80%;
height: 80%;
flex: none;
background-color: red;
}
The first problem is: when I go read the child's width via getBoundingClientRect().width, it shows me 19.1875, while it should be 24 * 80% = 19.2.
Secondly, how do I make the child square dead center? I have no idea why but they are all slightly to the left and the top. Side note: the parent and child in this case are both <div> elements.
EDIT:
const child = document.querySelector('.child')
console.log(child.getBoundingClientRect().width)
.parent-container {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 50px;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
outline: 1px solid black;
margin: 1em;
font-size: 1.5em;
}
.child {
width: 80%;
height: 80%;
flex: none;
background-color: red;
}
<div class='parent-container'>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
</div>
<h1> H1 ELEMENT </h1>
<div class='parent-container'>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
</div>
The above snippet is my best effort at replicating the problem. Firstly, the logged value of the child div's width seems to be incorrect (19.1875 instead of 19.2), though it might not actually affect their appearance.
Secondly, as I have discovered, the child component is only misaligned when there's nearby element that affects their positions. As seen in the snippet, the child element in the row of checkboxes above the <h1> are perfectly centered. But the child div in the ones below it are slightly closer to the top than the bottom. While it might not look obvious, it becomes very apparent when they are scaled up, like the photo at the top.
This is observed in most browsers, though in Firefox this effect is actually reversed (closer to the bottom than top). Are there anything I can do to prevent this behavior?
I lack the in-depth knowledge about how different browsers handle subpixel rounding and rendering. But in this case, the margins and other properties expressed in em or % can cause elements to render at inconsistent positions (as we may be dealing with fractions of pixels, while still being limited by the actual pixels of the screen).
I am not aware of a general solution to this problem, but you could simply ensure that the difference of width and height between the parent and the child is divisible by 2. This difference can then be evenly distributed between left/right and top/bottom. In your case, you could for example try:
.child {
width: calc(100% - 4px);
height: calc(100% - 4px);
background-color: red;
}
I have the parent's block (red) that should change its size by height relatively the content filling inside the green block.
The green block has an absolute position, and this is a must.
The question is about the content filling of the green block and the logical automatical size changing of the red block.
So, 2 question:
How to center the green block by the horizontal/center?
How to automatically change the red block's height relatively the content filling of the green block?
<body>
<div class="some"></div>
<div class="container">
<div class="main">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
</body>
body {
background: purple;
}
.some {
height: 100px;
}
.container {
width: 1030px;
height: 600px;
background: red;
position: relative;
margin: auto;
}
.main {
position: absolute;
background: green;
margin-top: -50px;
width: 400px;
}
.content {
width: 300px;
height: 100px;
background: blue;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
http://jsfiddle.net/xtupmyvf/2/
I have created a sample solution here https://jsfiddle.net/saksham_malhotra/upnrfjm0/
There is a lot going on in your code which is unnecessary and I have written a simplified version of it. The crux is to take care of the display properties to get a good layout.
You need not make the left section absolute positioned to stick it to the left. Just make the wrapping container display: block to not to take the whole width.
I have this simple setup:
.container {
display: table;
width: 70%;
text-align: center;
}
div {
border: 1px solid #336;
}
.column {
display: table-cell;
}
<div class="container">
<div class="column">Column 1.</div>
<div class="column">Column 2 is a bit longer.</div>
<div class="column">Column 3.</div>
</div>
jsFiddle: http://jsfiddle.net/aqk1yy1d/
This table-cell behavior expands with window resize. I would like the center cell/div to be fixed to its content and not expand. Basically the sides should expand but not the inner cell, wich should be the size of its content.
I don't see how I can do this without setting a defined width somewhere, but that in not ok, because I will have different length of content in that middle cell....
Any pointers?
The trick is to set both the left and right column to take up 50% of the width of the table. The center column gets a width of 1px. If there is content larger than 1px in the center column it will force the center column to grow.
The first example only has text inside it, which will wrap at the first moment. To mitigate this add something like white-space: nowrap to keep all text on a single line or make sure that you have content with a width.
.container {
display: table;
width: 70%;
text-align: center;
margin-bottom: 10px;
}
div {
border: 1px solid #336;
}
.column {
display: table-cell;
}
.left,
.right {
width: 50%;
}
.center {
width: 1px;
}
.center-content {
white-space: nowrap;
}
<div class="container">
<div class="column left">Column 1.</div>
<div class="column center">Column 2 is a bit longer.</div>
<div class="column right">Column 3.</div>
</div>
<div class="container">
<div class="column left">Column 1.</div>
<div class="column center"><div class="center-content">Column 2 is a bit longer.</div></div>
<div class="column right">Column 3.</div>
</div>
If you can't find a better solution, you could try using javascript to set the width dynamically. Change your html to something like this:
<div class="container">
<div class="column">Column 1.</div>
<div id="column2Outer" class="column">
<div id="column2Inner" style="display: inline-block">Column 2 is a bit longer.</div>
</div>
<div class="column">Column 3.</div>
</div>
The javascript would be as follows:
$("#column2Outer").css("width", document.getElementById("column2Inner").clientWidth);
You would call this on $(document).ready() or whenever the content changes. You would of course also have to remove the border from the inner column so you can't tell it's a nested div