This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have bunch of left floated card like elements with set pixel of width and height. Each of the elements are large enough that it looks off when there's not enough space on the right to fit another, I get a big whitespace on the right. I want to even out the white space on the both sides.
With simple left floats, it looks like this:
[---][---][---]--
[---][---][---]--
[---][---][---]--
[---][---][---]--
[---][---]-------
what I instead want is something like this:
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---]------
or this:
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
---[---][---]----
How can I achieve this with CSS, and if it is not possible, is there any simple way to do this with JavaScript ?
You can use display: inline-block instead for the cards, and use text-align: center in the parent.
.card {
display: inline-block;
}
.parent {
text-align: center;
}
That way, the cards will work just like wrapping, centered text.
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
Disclaimer: I don't have any formal programming background, and I've been trying to mess with front-end design recently. Excuse me if my questions are trivial or misplaced (at least I didn't find clear answers in other posts)
I've been using Outsystems with responsive design framework to develop a web page. In order to profit from the responsive framerwork, I'm trying to make a web block that will look something like this.
Page layout
Inside a container with defined dimensions, I would insert a container (which will fit perfectly this parent container), containing other containers of its own. These 3 containers will always fill the parent horizontally, but will have heights according to the proportions I draw there (merely illustrative).
In order to fill the fixed-size parent, the main container would have to be set with height and width equal to 100% (at least I think so). However, the last child container (60%) may have its contents bigger than the appointed size (I put search results in there), so I tried setting 'overflow-y: auto'. However, that doesn't seem to work. From what I understood, that doesn't work because its parent has its height set to 100%, which isn't a defined size, so it ends up being considered as an undefined size when calculating the child containers size, and it ends up setting its height to 'auto' by default, which leads to visible overflow. I ended up changing the first two containers to have fixed sizes at the end (since they're inputs and they need to be at least visible for typing), however I just can't manage to make the last one fill the rest of the parent's container, while creating a scroll when necessary if its content overflow. What works is setting the parent container with 'overflow-y: auto', but I don't want it to work like this.
Is it possible to set chains of relative sized elements within another with .css or does it need to be alternated between fixed-size/relative-size to work? Would I need to use javascript to make calculations and set their heights at runtime?
Welcome to the world of CSS layout! Your question is quite good and have some really great depth to it. It's not quite clear what you need - exactly - because there are many techniques for variares scenarios it's better to read something on Flexbox and try to make a minimal code prototype with the problem you're facing when making the layout.
More about CSS flexbox (no need for a framework):
https://yoksel.github.io/flex-cheatsheet/#display
I made an example so you can see how it works:
.container {
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #92A8D1;
padding: 20px;
height: 600px;
outline: 1px solid black;
}
.c20 {
min-height: 20%;
background: #88B04B;
padding: 20px;
outline: 1px solid black;
}
.c60 {
flex: 1;
background: #6B5B95;
padding: 20px;
outline: 1px solid black;
}
/* not related to the answer */
body {
margin: 0;
min-height: 100%;
}
<div class="container">
<div class="c20">
hello world 20%
</div>
<div class="c20">
hello world 20%
</div>
<div class="c60">
hello world remaining %.
</div>
</div>
This question already has answers here:
offsetting an html anchor to adjust for fixed header [duplicate]
(28 answers)
Closed 6 years ago.
So I have successfully gotten my page to jump to different sections on the page via buttons referencing the ID's like this
<button id="niftyBtn">Things</button></br>
<div id="nifty">Blah</div>
I have several of those and they all go to the correct portion of the page.
The problem is, there is a fixed nav that is included into the page that I can't change and the top of the sections are going behind that navbar instead of below it.
I have tried to use several different variations of a jquery solution I saw using .offset() but none of them have been effective. Any input is appreciated
Note: It behaves the exact same way when I use jQuery or javascript to jump the sections instead of href tags.
You don't need a javascript solution, something as simple as this will do:
h2:before,h3:before,h4:before {
content: " ";
display: block;
visibility: hidden;
margin-top: -7em;
height: 7em;
}
Granted, these are meant for headings, but you can substitute with a class, or IDs for the same effect. The measurements will have to be amended, of course.
BTW, why are you using <button> to wrap an <a>? That code should just be Things</br> and if you want it to look like a button, style it like a button.
This question already has answers here:
In a bootstrap responsive page how to center a div
(18 answers)
Closed 6 years ago.
In bootstrap .pull-right for align right .pull-left for align left then What for center ?
Bootstrap's .pull-left and .pull-right, work using css-float.
The way float works is by flowing following inline elements around the floated element.
css-float support: left, right, none. There is no center option. Therefore, there is no .pull-center.
You can align all inline elements within a block element by applying the css: text-align: center to the parent.
If the element is you're trying to center should be inline AND block-like, you should set it to have display: inline-block.
You can see some text-alignment options in bootstrap here:
http://getbootstrap.com/css/#type-alignment
Note that the <p> is a block-type element, and the text within has an implicit text-node which is display: inline.
The center-block class can only be used on images:
http://getbootstrap.com/css/#images
center-block for centering an element in Bootstrap.
You can test by an image:
<img class="center-block" src="xxx.PNG"/ >
try center-block or use grid columns to center your element. If text use text-center
This question already has answers here:
Slanted diagonal line in html or css?
(7 answers)
Closed 7 years ago.
I am trying to create a diagonal background in the background of an element. I can do this quite easily using a gradient, however this for a responsive website so the element needs to be fluid.
I can do something like this for a fixed shape...
div {
width:200p
height:200px;
margin-bottom:2em;
border:1px solid #aaa;
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
}
This is using a rotated gradient with a hard stop, but it is using a fixed width. I have done a codepen here of how it would look with a width set in percentages, and as you can see, the concept breaks. http://codepen.io/juicypixels/pen/gPravL?editors=110
Would be very interested to see if there is a responsive way of doing this, even if I have to use javascript.
Thanks in advance.
try
background:linear-gradient(to bottom left,#ffffff 49%,#aaa 50%,#ffffff 51%);
instead of
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 7 years ago.
I think a screenshot and a little diagram will speak for themselves.
This is what I have:
And this is the result I want:
So basically I want to say a div can be this big and if it's bigger then cut it and put the rest in the next raw.
Any idea on how to do this simply?
Thank you
Use the flexbox in the following way:
flex-flow: column wrap;
This will set the flex-flow into columns, not rows(as in your example), they will align on the cross-axis. Wrap will mean that the elements are allowed to wrap and take up space on a second column.
According to the description and to the 'Spanish' column on your schema, you want a newspaper-like layout, with content that overflows on the next column.
CSS3 Column Module is useful for that, and is relatively well supported by browsers, providing you use it with prefixes.
In this fiddle, I have defined a lang block element. By setting a column-width to the langs, we allow the 'lang' to break on multiple columns.
CSS:
.lang {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
}