So let's say I have 3 div's. I want them stacked in columns, next to each other. In the first columns, the first two div's fit. Now I want the third one to go next to the first one, since there is no room for the the third one to fit under the first two. How can this be done?
Currently, the only solid way to do this is to use CSS3's columns. See here for a reference: http://www.css3.info/preview/multi-column-layout/
This isn't widely supported yet (especially by IE), so you might need the jQuery plugin Columnizer to add more support:
http://dotmac.rationalmind.net/2011/03/cross-browser-multi-columns-with-jquery-and-css3/
CSS:
#wrapper{
width:960px;
margin:0 auto;
}
.mydivs{
float:left;
}
.cl{
clear:left;
}
Markup:
<div id='wrapper'>
<div class='mydivs'></div>
<div class='mydivs'></div>
<div class='mydivs'></div>
<div class='cl'></div>
</div>
float:left all your divs and they will be position as you want.( Aligned left and in next row if there's no space left)
Related
I have an empty div and I create other divs in it with javascript. I've set up my CSS so it will create a grid. My question is: how can I dynamically resize the divs so they evenly fill their container?
I tried to illustrate it better with a drawing but my drawing skills aren't that good. Hopefully you will understand what I want.
The black square is the parent div and the red squares are the children. When I create one div it should fill the parent div (with a little margin).
With two divs it will split the parent in half.
With 3 it will behave like you see in the upper right corner of the image, and so on for the others.
How could I accomplish this with CSS?
Some more info:
This is a game I have to make for school. This is a previous version but you get the idea of having squares in a div. Now the next task is to let the user chose how many squares they want to play with. But that has to be dynamic and they have to be able to choose numbers like 5 or 8. Not just 4, 9, 16, 25 etc. that's too easy.
https://luukwuijster.io/school/csp/kleurenspel/
This type of layout can be achieved using CSS Flexbox.
First turn your wrapping element into a flexbox by adding display:flex. Next add flex:1 1 auto to your boxes to allow them to grow and shrink as needed to fill the space.
To keep your boxes from being squished into one line by flexbox, set a min-width value on them. I've used min-width:30% but this number can be changed to suit your needs. 30% will mean that the maximum number of boxes in a row at any time is 3 (as it is just below 1/3 or 33% of the container's width).
Try adding or removing boxes from the example code below.
#wrapper {
display:flex;
flex-wrap:wrap;
width:400px;
height:400px;
}
.box {
background-color:white;
border:1px solid black;
min-width:30%;
flex:1 1 auto;
}
<div id='wrapper'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>
I want to put the same div twice on the same row and cover all of its width and I need to put some space between them both.
The problem is when I use margin it will affect them both since they have same class so the second div will go below the other because the total width will become bigger than the container width.
I tried to use overflow:hidden or overflow-x:hidden with margin or change their size but nothing changed.(also I've tried to use borders with overflow hidden)
I am forced to use many div from the same class and I need them to cover all the width of the row.
Edit: the code is big so I will post a small example to explain my question
<div class="container">
<div class="block">content...</div>
<div class="block">content...</div>
</div>
<style>
.container{width:1000px; margin:0px auto;}
.block{width:480px;height:500px;float:left;}
</style>
I want to put first block + 40px space + second block
If you want the two .block divs on the same row what I would do is not do it in pixels but with %'s.
For example what I would do is this:
Give your div that you want on the right an id of right and the one that you want on the left an id of left:
<div class="container">
<div class="block" id="right">content...</div>
<div class="block" id="left">content...</div>
</div>
Then I would style it with
<style>
.container{width:1000px; margin:0px auto;}
.block{width:48%;height:500px;display:inline;}
#left{float:left;}
#right{float:right;}
</style>
You can play around with the exact width percent to get it to your standards.
You might want to make give them different class names or ids if you want to manipulate the two of them different.
<div class="container">
<div class="block1">content...</div>
<div class="block1">content...</div>
</div>
You can use inline display to make them appear in the same row.
.block1, block2 {
display: inline;
}
From there you can style them how you want by selecting either of those classes.
Could this be something like you're after?
http://jsfiddle.net/justin_thomas/9S46N/
The CSS:
.myRow {
width:48em;
}
.myclass {
padding: 1em;
margin-left:1em;
margin-right:1em;
float: left;
display:inline;
width: 20em;
}
The HTML:
<div class="myRow">
<div class="myClass">Blah... blah...</div>
<div class="myClass">Blah... blah...</div>
</div>
In there, i've used floats to get the desired effect. Unfortunately this means you have a hard time if you can't specify the actual width of the row's container in physical units (or one of its parents) and you also need to know whe number of columns there will be in this row to use as the width amount in the class with the divs.
I don't really like this as as solution as you need to make sure that the sum of each (div width + left-margin + right-margin) is never larger than the width of the row container.
I'd like to position two DIVs in another container so that the first is against the parent's left edge and the second is against the parent's right edge. Here's the markup I have so far:
<div class="parent">
<p class="flushleft">
This paragraph should be aligned left.
</p>
<p class="flushright">
This one should be aligned right.
</p>
</div>
How can this be done without using floats? I'd like to keep everything in the normal flow, if possible. Thanks!
Use display: inline-block in your css code.
Using your HTML, here's the CSS:
.flushleft{
width:50%;
display:inline-block;
}
.flushright{
width:50%;
display:inline-block;
}
Or since they're both identical - if you don't intend to style them further - you can use one class.
In my web application screens I have many areas which has the same width and different heights.
For eg. I have six divs:
<div style="height: 50px">1</div>
<div style="height:150px">2</div>
<div style="height:250px">3</div>
<div style="height:130px">4</div>
<div style="height:120px">5</div>
<div style="height: 30px">6</div>
and the css:
div{
border:1px solid red;
float:left;
width:100px;
}
browsers displays it like this:
If the browser window is changed to smaller width divs are automatically wrapped.
Wrapped divs are aligned according the top div which has maximum height. Needlessly
empty spaces appears on the screen:
Is there a way to arrange all wrapped divs to top?
Try this...
http://masonry.desandro.com//
It might be a little flashier than what you want/need. But there isn't a CSS option to fix this.
I don't know of any way to do this in CSS. The jQuery Masonry plugin should give you the ability to do this if you're not opposed to using JavaScript.
I'm working on designing up a table with 7 images in it that are all roughly the same size. Basically, I was wondering if there is a way (other then splitting each row into a different table) to change the HTML tendency to put everything in columns, and force it to lay it out based on rows.
Here is a jsfiddle of what it is. (I used Lorem Ipsum instead of the images) I would like the top and bottom row centered.
I know I can do this if I was to split it into three tables and set each one to have a width:xxxpx and margin: 0 auto, but would rather not do that.
Any suggestions are appreciated.
Why do you even bother creating multiple cells per row? Just put all your images that go in one row in the same cell, next to each other.
Yeah, it might be better to go with multiple divs for this issue. Is it possible to do something like the following:
HTML:
<div class="rows">
<div class="top">
<img></img>
<img></img>
</div>
<div class="middle">
<img></img>
<img></img>
<img></img>
</div>
<div class="bottom">
<img></img>
<img></img>
</div>
<div>
CSS:
.rows{
margin:10px;
}
.top, .bottom{
padding-left:85px;
padding-right:85px;
}
.top, .bottom, .middle
{
width:520px;
}
.rows img
{
margin: 10px;
width:150px;
}
Basically, let the normal flow of images control their positioning, and instead use margins and padding to equalize the spacing.
See the vertical-align property.