I need to move all div inside of container up to a div above it
<div class="gb-box-holder">
<!-- GUIDE BOX -->
<div class="gb-box gb-box-1">
<div class="gb-header">
<span class="gb-decor-top"></span>
<div class="gb-logo">
<img class="gb-img" src="http://www.scim.si/wp-content/uploads/2015/01/apply.jpg" alt="">
<div class="gb-logo-cover"></div>
</div>
<h3>Lorem ipsum dolor</h3>
<!-- <span class="gb-decor-top"></span> -->
</div>
<div class="gb-container">
<span class="gb-decor-container"></span>
<p>
Lorem
</p>
<a class="gb-btn-guide" href="#"> Reed more</a>
</div>
</div>
<!-- GUIDE BOX -->
</div>
BOXES SECTION END -->
#gd-section .gb-box-holder {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: top;
-webkit-justify-content: top;
}
#gd-section .gb-box-holder .gb-box {
display: block;
width: 246px;
background-color: #303030;
margin: 5px;
float: left;
}
.gb-box class of each div
ps. Sorry for my spalling, English not my mother language
There are multiple ways You can approach this. The wrap that flex creates is only horizontal and not vertical - therefore, you won't be able to stack an item upwards. So it must be done in a column-wise manner. You just have to invert things in order for it to work like You want it to.
Here is a way to do this using Flex.
Another way of doing this is using HTML Columns which is your quickest option here but it will not be responsive in all browsers, therefore you will need to use prefixes and manual adjustments.
div {
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
}
You can find a good tutorial on this here.
The other more fool-proof way is to use a plugin called CSS Masonry which uses JavaSript to align your items in a certain way. The only con here is that it will add a bit of js bulk to your code and it will be a bit time consuming. But it will be responsive and perfectly aligned.
If you decide to go along the CSS column path, this CodePen will do you good as well.
You can not achieve this with flexbox but you might want to try using css columns although they are meant to be used for text.
.gb-box-holder {
columns: 200px 3;
}
http://codepen.io/ingvi/pen/EgAZwz/
Related
I need to create an information section that includes an image and content next to it.
It should look like this:
I have already written a little bit of code, but it does not seem to be the best solution: everything works fine, but code is not graceful.
Please, have a look:
/* Simple reset */
img {
display: block;
max-width: 100%;
}
body {
background-color: black;
}
.information {
display: flex;
gap: clamp(5rem, 10vw, 8rem);
}
.information > * {
width: 50%; /* Using the 'width' property. */
}
.information-content {
align-self: center;
color: white;
}
.information-image {
align-self: flex-start;
object-fit: cover;
aspect-ratio: 1 / 1.10;
border-radius: 5px;
}
<section>
<div class="container">
<div class="information">
<img
class="information-image"
alt="Products for companies & Startups"
src="https://s3-alpha-sig.figma.com/img/6630/3672/40959a0086f9fbb8418c0829b277dd93?Expires=1670198400&Signature=gpQ5NqRXp9omRHkjCl718I9WPLqfx4xPKp1CQSMKbEnRCU7izmQIXkcn6zI6Z17p8Q7Li-wBAXb3P2Jg9qEuJauFeKqErbl4jgW950K35-LeX394hN7fJ7UEPmkgGSqB-drY1QdU7NZVV4QKTrZ0QBuw47xVBPOOfJMQO8NPOpZkx43UbbkS1yGgnxN5tELyriz9e8pH6pXO8AnJx7zvGz4mm3InyHOySUcb3ibVPa9XKJ8fyxPnkBeVoYFvwpiVddEs7uVNqCkCRuN2dJIIQg78FB-6TYX13nQ~NxvhG2059ks2q52a9p0N-DSmSYE-Yt-jedbJ1fEt3cZVnIfzUw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
/>
<div class="information-content">
<h2>
My main goal is to keep my customers satisfied.
</h2>
<p>
Even with skills that are primarily mental, such as
computer programming or speaking a foreign language.
</p>
<p>
Even with skills that are primarily mental, such as
computer programming or speaking a foreign language.
</p>
</div>
</div>
</div>
</section>
My concern is the width property set on each child of my flex parent. As far as I know, using width inside flexbox is not the best idea? However, when I try to use the flex-basis property, everything breaks.
Note: I cannot use display: grid because the image can be after the content - with grid I will have to change the order and the code will become more complicated.
Im creating a grouped list with sticky header. Really would like to use virtualization with it. But the virtualization doesnt work when i set fixed height and overflow on the top level table-content-container. Virtualization only works when fixed height and overflow is set to group-body-container.
Here's the html i got what does not work:
<div class="table-container">
<div class="table-header grid-row-template">
<div class="header-item">Id</div>
<div class="header-item">Name</div>
</div>
<div class="table-content-container" style="height:50vh; overflow-y:scroll">
#foreach (DataGroup group in dataGroups)
{
<div class="group-header">
<MudToggleIconButton
#bind-Toggled="#group.IsExpanded"
Icon="#Icons.Filled.ExpandMore"
Color="Color.Secondary"
ToggledIcon="#Icons.Filled.ExpandLess"
Size="Size.Small"
ToggledSize="Size.Small"/>
<MudText Color="#Color.Primary">#group.GroupName</MudText>
</div>
#if (group.IsExpanded)
{
<div class="group-body-container">
<Virtualize Items="group.DataRow" Context="row" ItemSize="20">
<div class="grid-row-template data-row">
<div class="data-item">#row.Id</div>
<div class="data-item">#row.Name</div>
</div>
</Virtualize>
</div>
}
}
</div>
</div>
Here the virtualization works: https://try.mudblazor.com/snippet/GEcwagOjgXcmYqFL
Here its not working: https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY
The goal would be to have the virtualization working with the second example, when scrolled only the top header would be "sticky".
EDIT:
Here's recording of what i would like to achieve but with working virtualization (https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY):
Is this even possible with blazors virtualization component?
It is because the Virtualize component needs a limiting height - either explicit or implicit. As you have it now, each Virtualize can just grow to consume as much space as it needs.
You can make your container use flexbox and your group container have a min/max height of 100% to achieve this:
.table-content-container {
display: flex;
flex-direction: column;
gap:0;
}
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
Updated demo #2 where the expanded group matches the container height - but without more information about what you are trying to do this could go on forever....:
https://try.mudblazor.com/snippet/wOQwEKbUdhZHlbiE
To round things off - I do not recommend this design, but to show it is possible, you can also hide the scrollbars on the expanded/virtualised groups with CSS
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
.group-body-container {
scrollbar-width: none; /* Firefox */
}
.group-body-container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Here is a demo: https://try.mudblazor.com/snippet/cammugcNEmPoITgg - with a scrollbar only on the main container, so you can only scroll the virtualized groups contents with mousewheel/touch - which is why I don't like it.
I have a div container which contains 3 different divs. I want to place inner divs in a row.
Here is html code:
This is what it should look like.
.partners {
display: inline-block;
display: flex;
flex-direction: row;
width: 100%
}
<div class="partners">
<div>
<img src="media/handshake.png" alt="handshake" class="handshake">
<h1>10+</h1>
<p>partners investing their time and effort to support our mission</p>
</div>
<div>
<img src="media/social-care.png" alt="social care" class="social-care">
<h1>150+</h1>
<p>members working hard to be able to support our mission</p>
</div>
<div>
<img src="media/respect.png" alt="respect" class="respect">
<h1>243+</h1>
<p>donors supporting our community and making impossible possible</p>
</div>
</div>
But the last inner div goes beyond the screen and when I inspect the page it shows that "partners" div contains only first and second inner divs.
How can I solve this?
This is what it looks like when I inspect.The third one is not included in "partners" div
This often happen if you forget to close a tag in html.
Please check the rest of your code to be sure you didn't forget to close any tag. You also can use online unclosed html tags checker like this one :
https://www.aliciaramirez.com/closing-tags-checker/
Did you tried to use something like metroui or even bootstrap ?
I.E.:
With metroUI you can use the grid system to do exactly what you want, see :
https://metroui.org.ua/grid.html#_media_columns
Here is a link explaining how to include metroui in your project :
https://metroui.org.ua/intro.html#_quick_start
This will fix your problem.
.partners{
justify-content:space-around;
display: flex;
width: 100%;
}
.partners div{
width:30%;
}
ypu can set up a max width to the children divs, using like .partners div { width: 30% } and to add some space between them, you can also use .partners { justify-content: space-between; } tip: display inline-block is canceled when you put another display: flex above, try use only flex
How do I get 2 pictures to appear side by side in this particular html example?
Here is my fiddle
What I want is to align pictures side by side in html, and similarly for the h1 tag above and the p tag below the pic.
illustration of what I want:
title0------------title1
pic0--------------pic1
word0-------------word1
^^^^^^^^^^^^^^^^^^^^^^^^^
This is an example of what I want fiddle, but here it doesn't work when I want add the h1 tag above and the p tag below the picture. I do, however like the way margin-right can control the lateral distance between the pics.
Here is a similar question but this is slightly different.
EDIT1 here is the bootstrap version mentioned below
EDIT2 here are other solutions from below
Amitesh Kumar - https://jsfiddle.net/HattrickNZ/ko1qsbom/9/
YoYo - https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
Michael_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/
they all offer a solution but I think the bootstrap version is the best as it handles when the screen width is resized the best.tks
You can use display:inline-block; to set the element to just use the width they have. Normally, h1 or div are the display:block; elements.
Here is the fiddle for you.
What you can do is put title0, pic0, and word0 in a div and add a class to the div so you can float it to the left using css. On the other side you have title1, pic1, and word1 in a div that has a class that would float it to the right.
Here's the float in work:
.leftBlock {
float: left;
}
.rightBlock {
float: right;
}
Check out this jsfiddle: https://jsfiddle.net/ko1qsbom/6/
Also more information on floats: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Side-by-side positioning is simple and easy with flexbox.
Here's all you need:
#container {
display: flex;
text-align: center; /* optional */
}
<div id="container">
<section>
<h1 class="left">title0 </h1>
<img class="left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<p class="left"><a>word0</a></p>
</section>
<section>
<h1 class="right">title1 </h1>
<img class="right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
<p class="right"><a>word0</a></p>
</section>
</div>
There are various options for aligning the two sections in the row (center, space-between, flex-start, etc.). See here for details: https://stackoverflow.com/a/33856609/3597276
Learn more about flexbox here: A Complete Guide to Flexbox
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
Try This give them witdth total width should be less then 100% and float:left
HTML
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
<!--<h1 class="left">title0 </h1> -->
<img class = "left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<!-- <p class="left"><a>word0</a></p> -->
<!-- <h1 class="right">title1 </h1> -->
<img class = "right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
<!-- <p class="right"><a>word0</a></p> -->
CSS
/*
img.right{
float: left;
margin-right: 300px;
}
*/
h1.left p1.left {
text-align: left;
float:left
}
h1.right p1.right{
text-align: right;
}
.div1 {
width:40%;
float: left;
}
.div2 {
width:40%;
float: left;
}
you can use display:inline-block; also
I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and CSS3.
For the general design, I'm working on a very clean white and gray tones style, with many paddings and margins. My problem resides in the home page: I'd like to have a 3-column centered layout. But where to start? I've tried some floating, but in vain.
Am I doing this right ?
HTML:
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
your css should be like this:
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.
For More details you must have to read this intresting article.
See This Demo: http://jsfiddle.net/akhurshid/YRWLV/
Your HTML is very clean - this is a great step forward.
You need to add a float: left to all the columns. To ensure the float is cancelled after your columns, it is best to add a clear div after the floated columns.
HTML:
<div class="colwrapper">
<div class="ltcol">Column 1</div>
<div class="ctcol">Column 2</div>
<div class="rtcol">Column 3</div>
<div class="clear"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }
So you add css3 tag for this questio so I suggest you to make this with css3 column layout:
More info
for example
HTML
<div class="colwrapper">
<div>text</div>
</div>
CSS
.colwrapper div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
It does not work on IE.
Use one of these tried and tested implementations instead of rolling out your own. In addition to the fact that you'll be getting tested and working code, you'll add responsiveness to your site with almost zero effort.
http://cssgrid.net/
http://960.gs/
http://framelessgrid.com/
http://goldengridsystem.com/
and lots more if you google..
could also use Flexbox property for this now as well so you don't need to worry about floats or clearfix's.
main{
/* .colwrapper{ */
display: flex;
flex-flow: row;
justify-content: center;
}
main > section{
/* .ltcol,.ctcol,.rtcol{ */
display:flex;
flex-flow:column;
align-items:center;
padding:10px; padding:.625rem;
}
main > section:nth-child(2){
/* .ctcol{ */
margin:0 20px; margin:0 1.25rem;
}
http://caniuse.com/flexbox shows the support for it isn't quite as far along as you would probably like, however, there are ways to improve support by mixing old versions of the syntax with the new http://css-tricks.com/using-flexbox/ has a great write up on it from Chris Coyier if you want to play with this for a next project (this post is fairly old). You can also get more details at http://html5please.com/#flexbox
Also, if you're using HTML5 I'd probably go with sections over divs for a more semantic structure, so a comparison would look something like this:
<main>
<section></section><!-- or <nav></nav> -->
<section></section><!-- or <article></article> -->
<section></section><!-- or <aside></aside> -->
</main>
instead of...
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
Just try putting the rtcol div beofre le ltcol div.
<div class="colwrapper">
<div class="rtcol">X</div>
<div class="ltcol">X</div>
<div class="ctcol">X</div>
</div>
http://jsfiddle.net/EDjpy/