<div id="container">
<div class="category-group">
<h4>title</h4>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="category-group">
<h4>title</h4>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
<style>
.category-group {
display: inline-block;
vertical-align: top;
}
</style>
I want all category-groups to be arranged one after another and fit together in the container. In this case, second category-group would go right under the first category-group, then there would be third on the right of the first and the second and so on.
If I try to give category-group display: inline, all category-groups are then lined in one long column that would break out of the container.
I have faced this problem as well. I ended up using jQuery Masonry to get my div's to stack nicely within a fixed width container.
To my knowledge, there isn't a pure CSS fix that will achieve this effect.
Related
I have a two-column-list that looks like this
I need the list items of the second column to always align to the right border of the list but not text-align right, but like this:
so the item with the longest word is actually text-aligned to the right, but the other shorter items start right where the longest item starts. The list css up until now is
ul{
column-count:2;
}
If you're open to using two lists in a parent container you can utilize flexbox. margin-left: auto moves the element to end of container in this case. Be sure to specify the parent's width so it knows what to align to! See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div style="width:100%; display: flex; flex-direction: row">
<ul style="">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul style="margin-left: auto">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
1
I am building a Grid System using CSS Grid and I am having a bit of difficulty. I have a shrink class that works as it is supposed to, but I would like the rest of the cells(as I call them) to fit the space in css grid. If I set .cell.shrink to grid-column:auto, is there a way to have the other cells fit the space?
2
Also, if you notice the code below, I have a class for .cell > * {whitespace:nowrap;}. Without it my links are collapsing. Is there a better way to keep it from collapsing? I just want the cell to fit the content without collapsing. I don't want to set a static value in the minmax() function either --- Example of what I DON'T want (minmax(100px, 1fr)). Again, I am trying to use css grid for this. I know flexbox just fits to the content. How can I achieve with css grid?
Below is the code I have tried.
CODEPEN LINK
https://codepen.io/Jesders88/pen/djmwNY
HTML
<div class="container">
<div class="row">
<div class="cell medium-3 shrink">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</div>
<div class="cell medium-3">CellCellCellCellCell</div>
<div class="cell medium-3">Cell</div>
<div class="cell medium-3">Cell</div>
</div>
</div>
Grid CSS
.row {
display:grid;
grid-gap:120px;
grid-template-columns:repeat(12, 1fr);
}
TRIED CSS
.shrink {
grid-column:auto !important;
}
.row {
max-width:1600px;
> .cell {
* {
white-space:nowrap;
}
}
}
I hired someone to implement the design of a website. He is using bootstrap 3 (which I've used before in some projects) and it surprised me that he is avoiding the use of .row class in every the grid and subgrid built (he is using clearfix to make the rows). He's code looks something like this...
<div class="container">
<div class="col-md-7">
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
</ul>
</div>
<div class="col-md-5 pull-right">
<ul class="nav nav-tabs">
<li><i class="fa fa-users" aria-hidden="true"></i>Menu item 1</li>
<li class="shop">Item 2</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
From what I've read, .row class is used to
"create horizontal groups of columns." source
"row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides." source
What is the impact of not using this class inside the grid structure? should I make sure he uses .row class?
thanks
From the bootstrap docs
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
You are also correct in that .row clears the gutters from the container which has a padding of 15px left and right.
.container {
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
Therefore, I personally would err on the side of caution and follow the requirements set out by bootstrap. In the future, the framework could change and a strong reliance could be created upon the row class and since that is missing from your code, it would require reworking it to update versions... or optionally, you could choose to implement responsive selectors such as .col-xs- which could over or underlap the 12 column grid format.
I am having this problem with a layout I designed. The part in question is the div id="menu", where I styled
#menu {border-bottom:solid}
The border does not wrap around the nested content (another div and a ul menu), but instead sits above it. The example:
http://jsfiddle.net/Amct3/2/
Clear the float after the "menu"
Add this code
#menu:after {
content:"";
clear: both;
display: table;
}
You need to clear your floats.
Add another div under the container with the style "clear:both"
<div id="menu">
<div class="container">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div style="clear:both;" />
</div>
you could just remove the "float:left" from "#menu ul" and instead give it "height:40px;clear:both;". will fix it.
Here is my css rule together with the markup:
<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li <?php if($page == 'upload_track'){ echo "class = \"active\""; }?>>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
as of now I am making them an inline style so that it would be easy for me to change them. since switching texteditors is kind of a hassle for me.
How would I make that div take up all the available height? like the very bottom of the page. as of now it looks something like this
what I wanted to see is that the black div takes up all the available height in the page
Yes it can be done. Check out this example JSFiddle.
Basically I changed your HTML to this:
<div id="navbar">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
Essentially all I did was remove the outermost div (the one with only the style="height: 100%" on it) and gave the next div an id.
The CSS is as follows:
html, body { height: 100%; }
#navbar {
/* this was moved from being an inline style in the div: */
width:220px; margin-left: 200px;font-size:16px;
height: 100%;
}
Basically, in order for the navbar strip to use up 100% of the height, you need to make sure that the html and body actually take up 100% of the available height. (That is, 100% on #navbar is 100% of the height of the parent element; if the parent element isn't the height of the browser, then it doesn't work.)