im having an issue with a layout i'm currently styling in CSS with the help of the 960GS framework.
The page is 960px wide, as required by this framework, so that's not the real issue..
I cannot seem to place an odd number of elements (ex: ) in the area specified to be the footer.
There is a wrapper div for the "footer", which is styled accordingly to various examples on how to use the 960.gs framework with custom layouts. I'm using the container_12 class on that wrapper div, which means I should have 12 columns to work with, but, I have an odd number of elements in my footer (as I've said earlier), and that means that I can't really divide the elements by the number of columns available, besides, some of those divs take exactly what is defined on the 960.gs classes in terms of width, although I can "hack" some of the positioning, I can't really make those elements even-spaced :(
Should I use other container classes (16 or 24) in conjunction with the other container_12 classes used before ?
Thanks in advance,
Have you looked at using suffix and prefix that is used with the 960GS framework? more info
if that dont work then it would probaly be best to use the 16 or 24 grid, but you can't mixed them together. e.g if you pick 16 all the grids have to be styled to the 16 grid
There's also the option of creating specific divs for whatever elements you'd like in your footer. You could then simply put these into a large footer div and then put each of the individual element divs into 12 columns, positioned as inline-block and aligned to center.
This would allow you a good range of flexibility in the number of content sections you have in your footer, without the worry and trouble of placing things into otherwise limiting columns.
Related
Is that possible to wrap div inside a row? I know it's possible but I just want to know it's a bad practice or not. I'm not using any col-md classes inside row.
Please see the example below..
<div class="row">
<div class="home-bg">
1
</div>
</div>
It's a bad practice because .row is only meant to contain grid col* as specifically stated in the Bootstrap docs...
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins.. In a grid
layout, content must be placed within columns and only columns may be
immediate children of rows.
http://getbootstrap.com/docs/4.1/layout/grid/#how-it-works
Your question is the same as asking can I have a div wrapping another div? The class row is just a bootstrap class with some css rules. Nothing more nothing less.
You will need to do this so many times. You will mix divs with classes from different libraries, with custom classes that you will have created and with so many different types of elements.
There isn't a question of good practice or bad practice. If you need some bootstrap functionality that already exists from a class, it's a good practice to use the existing functionality. If not then do whatever you want.
You can do this, but the question is why do you want to? All the row class does is add negative margins and the necessary flex properties to allow the column grid to work, seeing as you don't need the column grid, do you need the negative margins? If not then don't add the rowclass. Having a non-column grid class as the child of row isn't going to break your site, but it's important to bare in mind it may cause some undesired design bugs due to the negative margins it adds.
You can learn more about the Bootstrap column grids here.
I have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
First off, i'm not really a good coder. I'm an IT but more of an infra guy but i do understand concepts about coding and maybe a bit of a good grasp about it. I am working with my website and it's under construction using wordpress. In my homepage, i plan to do it simple as it is and decided to use the page builder and use text or HTML (or any language) to maximize it. I hope some one can help me. I would really appreciate it.
Here it is:
homepage
Those images have onmouseover style and was able to do it.. the thing is i can't arrange it horizontally. :( and unable include arrow so they can move left or right to see each images :(.
I know i can also do the same on the icon part the moment someone help me about the concept i wanted.
Your question is pretty ambiguous as to the specific context of the solution.
However, in general the reason why things don't align horizontally when rendered on screen in a browser, is that most elements (including the popular <div>) have a default styling of display: block; which makes it take up the full width of its parent item if the parent itself has the same styling (cascading of this is a different discussion).
The general solution to this is to define the widths of the elements. And they will be placed on the same line to the extent that the widths of the elements allow for more than one to appear on the same line.
One way to solve this is to have elements widths defined in some way. This could be by applying a class with a width: 25%; for example. This would allow for 4 elements with the same width to fit on the line.
Alternately you can also set the display property value of the elements you want on the same line to inline-block. This will make those elements take the width of it's content (unless the content has no width specified). This will cause the elements to flow along the horizontal line like text would (it will re-flow on the resizing of it's parent element), until there are no more contiguous items containing the inline-block display property.
Since your description also showed carousel style navigation for these rows of items, it may be that these are not the full solutions you are looking for.
If you are using the Bootstrap framework, there is a built-in carousel feature which you could use to contain these horizontally aligned elements on separate "pages" of the carousel. Making this solution fully responsive is another challenge altogether.
I have two DIV elements side-by-side, to create two columns. The two elements both have a fixed height of ~200px (calculated based on window height). I would like the content to overflow from the left DIV into the right, ONLY when the first DIV is full.
Unfortunately, I can't use CSS columns, since it automatically balances content across the columns, instead of filling the first column completely before overflowing.
So far the only option I've found (including here on SO) involves JS, and since the content may include HTML (including block elements), the use of JS is just about my least desirable approach.
Thanks in advance :)
You want something called CSS regions and it is only a working draft atm.
"The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions..."
Until then, I'd go with a polyfill.
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,