Is it possible to create grid layouts with display: table without nested divs?
<div id="container">
<div id="article1">
<div id="article2">
<div id="article3">
<div id="article4">
<div id="article5">
<div id="article6">
</div>
The result should be for example a 3x2 table. If I apply display: table-cell to the article divs I get them all in a row. I assume there is no possibility to create a new row after 3 divs without nesting them in HTML?
It's better to use flexbox model instead, like this:
#container {
display: flex;
flex-wrap: wrap;
}
#container>div {
width: 33.3%;
flex-shrink: 0;
}
Check the example here - on the codepen.
So no need in additional div tags
Related
I am creating a vertical website that has several different sections.
I want to make each section responsive to the content it has, but it seems like it's not responsive right now. Those two texts on the first row below the navbar is supposed to be in two different lines because it is written like:
<div id="firstRow">
<a id="about" class="smooth"></a>
<div class="intro">
<div>Welcome to my website</div>
<div>Scroll down to know more about us</div>
</div>
</div>
and I tried to use flex to make the first div responsive
div#firstRow {
padding: 100px;
display: flex;
}
How can I make this work?
I think you should put the display: flex property to your .intro div and also add a flex-direction of row to put it on the same line:
.intro {
display: flex;
flex-direction: row;
}
Example on jsFiddle.
do it something like this
.intro > div {
float:left;
clear: both;
display:block;
}
My sidebar is getting pushed down instead of staying inline with my main class, you can view the issue more in my fiddle. (This is one of the first times I've not used bootstrap for a project in a very long time).
view my fiddle.
Instead of float, using flex is a better approach for responsive design.
Try putting your sidebar and main inside a div with display as flex and flex-wrap as wrap.
Here's an example-
.flexbox {
display: flex;
flex-wrap: wrap;
}
.latest-single {
width: 70%;
background-color: blue;
}
.sidebar {
width: 30%;
background-color: green;
}
<div class="flexbox">
<div class="latest-single">
This is our primary content
</div>
<div class="sidebar">
This is our sidebar content
</div>
</div>
You have to choose a way of how to display them. (block,flex,table)
i made it working by adding the display:flex on .container class.
jsfiddle https://jsfiddle.net/31rjm8qb/7/
You have a couple of problems here.
.main has width 100% so .sidebar can not fit
.sidebar is floated while .main is not, so they will not line up
I think it would be a good idea to try out display: flexbox and remove floats altogether.
Check out the following article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have been trying to make a complex UI for my program and I wanted to be able to have 3 columns using css in my design.
This is currently my code:
<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>
But this, for some reason, will display 3 different lines of stuff.
I have tried to change some things but it didn't seem to work at all
I just want there to be 3 columns on the same block.
If you want to have 3 differnet areas on the screen, the effective method for doing that would be:
<style> .third { width: 33.33%; float: left; } </style>
<div class="third"> Something </div>
<div class="third"> Something </div>
<div class="third"> Something </div>
The class="third" is adding the css that is inside of the {}'s that I have made. - Meaning that each of the div's are given the width: 33.33% (1/3 of the screen) and a float: left which will just move the areas to be able to move out of the normal CSS and HTML scope of stacking on top of each other.
Hope this helps! :)
There are a couple ways to accomplish what you want.
Method 1: Float and width
Assign a single column class
.column {
width: 33.3%;
float: left;
}
Markup three divs with said class
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
Method 2: Inline block
Sometimes floats aren't the best option. You cna also set the display property to inline-block, although this can sometimes leave unwanted gaps in between the divs.
.column {
width: 33.3%;
display: inline-block;
}
Same HTML markup
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
Method 3: Flexbox
Flexbox according to Chris Coyier of CSS-tricks:
The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
.row {
display: -ms-flex: // Vendor prefixes required for flexbox
display: -webkit-flex;
display: flex:
}
.column {
width: 100px;
display: -ms-inline-flex;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
Add the parent div to your HTML markup
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
Cool thing about flexbox is you don't need to fill the space using set percentages, it can space your columns out with justify-content: space-between;
There is a lot more to delve into with flexbox. Floats are very simple but since you mentioned building a UI, something like flexbox will give you a wider array of tools to work with.
Alternatively, you could style them all at once without giving a class as mentioned by Jek. If you are using styling within the html, you could do this in the header:
<style>
div{
width:100px
}
</style>
You could do the same if you are using an external stylesheet. However, if you have to style the divs in different manners using class and id would be a better option. If all divs are styled in the same way, simply style the tag, which is div in your case.
I am trying to use flexbox to create a series of rows that scale to fit the available screen space. This seems to be necessary to create a decent UI on a mobile device, as it prevents all the boxes from clustering at the top, and spaces rows evenly. The problem is that it appears to be ignoring the vertical fill on the container, and gathering elements at the top. My code is as below
CSS:
.fill-vertical-space{
display: -webkit-flex;
display: flex;
flex-direction: column;
background-color: green;
height: 100%;
}
.fill-vertical-space > div, .fill-vertical-space > .row{
-webkit-flex: 1;
flex: 1;
background-color: blue;
}
And the HTML:
<div class="fill-vertical-space">
<div class = "row">
<div class="col col-100 section">
...
</div>
</div>
<div class = "row">
<div class="col col-100 section">
...
</div>
</div>
</div>
Note: I have left the content out of the rows. They are typically a mix of heading, nested flex boxes, and drop down menus.
Note 2: I have looked at other answers on the site, but none of them relate to ionic specifically (Could it be possible that Ionics CSS interferes with flex box?).
The problem was down to an ionic class in their CSS file. Adding:
.scroll{
height: 100%;
}
fixed the issue. I also needed an outer container holding the flex module, that was also set to 100% height, and to declare the .fill-vertical-space class as having static positioning.
I'm trying to do a responsive design for a menu, you can see the code here.
As you can see flex works pretty well for that design. My only concern is that it won't be compatible with older browsers. Is there an easy way of implementing this without flex, I have tried having only divs inside a container here
The problem is I don't know how to make the My log box appear beside the New log box.
I want to keep responsiveness (boxes stacking up vertically in smaller screens).
Here is the code:
HTML:
<div class="block-menu vertical">
<div class="menu-item">My organizations</div>
<div class="block-menu horizontal">
<div class="block-menu vertical">
<div class="menu-item">
ITPs
</div>
<div class="menu-item">
My log
</div>
</div>
<div class="menu-item">
New log
</div>
</div>
<div class="menu-item">
Profile
</div>
</div>
</div>
CSS:
div.block-menu.horizontal {
display: flex;
width: 100%;
flex-wrap: wrap;
}
div.block-menu.horizontal > div {
flex-grow: 1;
}
div.block-menu.vertical {
display: flex;
flex-direction: column;
}
div.block-menu.vertical > div.menu-item {
width: auto;
}
.menu-container div.menu-item {
padding: 20px;
margin: 10px;
background-color: red;
flex-grow: 1;
}
If you add one extra div (like it is in the flex example), it is kind of simple playing with the values for float and width, you can see an example here: http://jsfiddle.net/ggb2ecu7/3/
Although that one doesn't take into account the margin that you have in the flex example. To fix that, you could use calc, like this: http://jsfiddle.net/ggb2ecu7/4/ (sorry about the extra unnecessary CSS rules). E.g.:
.w2 {
width: calc(100% - 20px);
}
[20px because the margin I set was 10px (on both sides = 20px)]
The problem with calc is that it may not work with all the older versions. You can check the support for calc in here: http://caniuse.com/#feat=calc