This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 5 years ago.
I have a form whose fields should fall on two columns. I decided to try and use flex boxes to achieve the effect.
HTML :
<form class="hbspt-form">
<fieldset class="form-columns-2">
<div class="hs_firstname field hs-form-field">...</div>
<div class="hs_lastname field hs-form-field">...</div>
</fieldset>
</form>
CSS :
form {
display:flex;
max-width: 100%;
width:100%;
}
form fieldset {
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
max-width: 100%;
min-width:0;
}
form fieldset .field.hs-form-field {
clear:none;
display:flex;
flex-direction:column;
float:left;
min-width:0;
width:45%;
}
form fieldset.form-columns-2 .field.hs-form-field {
flex-basis:calc(50% - 1rem);
}
And here's what it gives. The div.field's refuse to display as columns, they stubbornly each fall on their separate lines. When I hover the element in DevTools, it looks like an artificial margin-right is created to fill the row, forcing the next div on another line.
This only happens on Chrome (I have version 60.0). On Firefox and Edge, it goes on two columns as expected.
Thanks for your input !
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 4 years ago.
This is my problem:
I have different DIVs with all the same widths but different heights.
On a large viewport these DIVs should be arranged as a grid with two columns.
The margin between the DIVs should be equal (vertically and horizontally).
Since the DIVs should be displayed in one column with the correct order on mobile it is not possible to have its own parent elements for each column.
Here is an image of what I want to achieve:
Is there any way to solve this with pure html/css?
The only solution I found so far is to use some kind of masonry javascript. But I feel like there must be a better solution...
What I've tried so far:
Using float/inline-block: I get perfect rows but 4 always starts at the same height as 3. So the margins are not equal. (See: https://codepen.io/OsmaGiliath/pen/vaPqro)
// EXAMPLE I
.parent {
width:230px;
}
.children {
display:inline-block;
width:100px;
}
Flexbox: Same (See: https://codepen.io/OsmaGiliath/pen/ajMgjR)
// EXAMPLE II
.parent {
display:flex;
flex-wrap: wrap;
}
.children {
flex:none;
}
Vertical flexbox: Works – but only with a fixed height on the parent element which is not possible in my example since this would limit the elements in the growth (See: https://codepen.io/OsmaGiliath/pen/ZjPdVx)
// EXAMPLE III
.parent {
display:flex;
flex-wrap: wrap;
flex-direction:column;
}
.children {
flex:none;
}
You can add columns that will warp up in one column if there is no enough width. This will allow you to display it as one column on mobiles. See working example here: https://codepen.io/anon/pen/BPEaXQ . You can see it working by changing the width of parent "grid" element to simulate mobiles.
<div class="grid">
<div class="column">
<div class="element higher">1</div>
<div class="element">2</div>
</div>
<div class="column">
<div class="element">3</div>
<div class="element">4</div>
</div>
</div>
.grid {
display:flex;
flex-wrap:wrap;
flex-direction:row;
margin:0 auto;
width:230px;
border:1px solid blue;
}
.column {
display: flex;
flex-direction: column;
}
.element {
width:100px;
height:140px;
margin:5px;
background: red;
}
.higher {
height:160px;
}
I finally found a solution thanks to the comment by #tobias-k.
For Desktop:
Using columnt-count: 2 on the parent element
Change the order of the 2nd and 3rd element
For Mobile:
Position the elements in a column using flexbox
Use flexbox's order to swap back the 2nd and 3rd element
https://codepen.io/OsmaGiliath/pen/vaMYPY
Thank you for all the quick responses!
This question already has answers here:
html/css responsive 3-column layout - stack right column below left column
(2 answers)
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 5 years ago.
I have a grid system that uses flexbox. At present I'm trying to work out if I can make it work with the following scenario.
<div class="flex-outer">
<div class="flex-inner span-all red-box">
<h2>Title</h2>
</div>
<div class="flex-inner span-1of2 green-box">
<div>Some text</div>
</div>
<div class="flex-inner span-1of2 blue-box">
<p>A table perhaps</p>
</div>
</div>
.flex-outer {
display:flex;
flex-wrap:wrap;
}
.span-all {
width:100%;
}
.span-1of2 {
width:50%;
}
.red-box {
background-color:Red;
}
.green-box {
background-color:Green;
}
.blue-box {
background-color:blue;
}
The html above could be used to create the following layout:
However on a certain breakpoint, I'd be looking to change the layout to something like this:
I can change the order of the green and blue boxes to suit, but on wrapping, the second box is position below the blue box. This is the behaviour I expected.
So, are there any flexbox tricks I can use to tuck the green box immediate beneath the red one?
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Place input box at the center of div
(5 answers)
Closed 5 years ago.
I have attempted multiple times, with multiple different possible solutions from around Stack Overflow to accomplish this task, yet frustratingly, I cannot seem to be able to center the input box in the div.
My code essentially looks like this at the moment:
div {
width: 100vw;
position: relative
}
h1 {
text-align: center;
}
<div>
<h1>Title</h1>
<input type='text'>
</div>
As of the moment, the word "Title" is centered on the screen, but the input box is still on the left hand side.
Is there any way to be able to center the horizontally in the div?
Apply flexbox to the container div.
Note: centring the h1 becomes unnecessary after applying flex
div {
width: 100vw;
position: relative;
display: flex;
flex-flow: column wrap;
align-items: center;
}
<div>
<h1>Title</h1>
<input type='text'>
</div>
Try this:
input[type="text"] {
display: block;
margin : 0 auto;
}
Example: Demo
Display block. input elements are inline.
<input type='text' style="display:block; margin : 0 auto;">
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 8 years ago.
I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: link
i tried change float:right; on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!
HTML:
<form method="post" action="" class="jcart">
<fieldset>
// item details here
</fieldset>
</form>
<div class='cartbox'>
<div id="jcart"><?php $jcart->display_cart();?></div>
<div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div>
</div>
CSS:
#jcart {
position:relative;
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
.jcart {
width:135px;
margin:0 20px 20px 0;
padding-top:20px;
border:solid 2px #E5E5E5;
float:left;
background:#F0F0F0;
text-align:center;
}
.cartbox {
float:left;
position:relative;
top:0;
width:500px;
margin:0;
padding:0;
}
You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).
From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.
In terms of the code you need to write directly in order to get this to change, do the following:
#centre {
width: 1000px;
}
.cartbox {
display: inline-block;
}
EDIT: I modified these changes to your website locally and it appears to have worked.
add float:left to your css code in #jcart:
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
You can use display property to inline or inline-block as #Sam Holmes said
or you can do something using float. like this:
.cartbox div{
float:left;
}
or
.cartbox div{
display:inline;// or display:inline-block;
}
here is the Demo
It is because you don't have enough space in the parent Divs.
I tried to set it to 10px and it allinged fine.
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some divs lined up horizontally and the content in the div is pushing it out of line with the others. How can I make them line up regardless the amount of content? I intend to add overflow:hidden so large content will not destroy the layout. No javascript involved. Needs to work in IE9+ and chrome.
MARKUP
<div class="panels">1</div>
<div class="panels">2</div>
<div class="panels"><img src='\images\img.png' height='64px'></div>
<div class="panels">4</div>
CSS
.panels {
/*line-height:200px; */
display: inline-block;
width:22%;
height: 200px;
margin:5px;
border: 1px solid blue;
}
I have a fiddle
Another saturday stolen by work. :(
Use vertical-align: top on .panels.
http://jsfiddle.net/y9pEV/2/