I have struggled to align content-div elements of a wrapper-div using only CSS with the following restriction.
The wrapper div can have a row which allows multiple content-div elements be on the row
At most 4 content-div elements can exist on a row of the wrapper div.
Content-div elements of the last row must expand to fill the row. (e.g if 3 content-div elements exist on the last row, then the width of each content-div should be 33.3%)
One and only one content-element always is selected, and the selected element should be bottom-left conner of the wrapper-div element.
To handle this, I have tried the following css.
.wrapper{
width:100%;
}
.content{
max-width:100%;
min-width:25%;
background-color:white;
float:right;
}
.content.selected{
position:absolute;
top:100%;
left:0;
float:left;
background-color:yellow;
}
I thought that the "float:right; float:left position:absolute; top:100%; left:0;" option can handle the restriction 1 and restriction 4, the "min-width:25%" option can handle the restriction 2 and the "max-width:100%" option can handle the restriction 3. However, only a few restriction were satisfied through the CSS.
I have setup jsFiddle example:
https://jsfiddle.net/6qyc5kLw/2/
I would help in this regard.
This image is what I want to do.
ever considered display:flex? its HUGE!
.wrapper{
width:100%;
position:relative;
display: flex;
flex-flow:row wrap;
align-items: stretch;
}
.content{
min-width:25%;
background-color:white;
//float:right;
flex:1;
order:1;
}
.content.selected{
//position:absolute;
//top:100%;
//left:0;
//float:left;
background-color:yellow;
order:-1;
}
The new flexbox possibilities are most certainly what you are looking for. See below snippet or https://jsfiddle.net/6qyc5kLw/3/ for an updated demo with some basic flexbox properties. An additional one would be
flex-order (to reverse the order of elements in first row)
.wrapper{
width:100%;
position:relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.content{
flex-basis: 25%;
background-color:white;
border: 1px solid #ccc;
flex-grow: 1;
box-sizing: border-box;
}
.content.selected{
align-self: flex-end;
background-color:yellow;
}
<body>
<div class="wrapper">
<div class="content">
1
</div>
<div class="content">
2
</div>
<div class="content">
3
</div>
<div class="content">
4
</div>
<div class="content selected">
5
</div>
<div class="content">
6
</div>
<div class="content">
7
</div>
</div>
</body>
You can use display: flex
.wrapper{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.content{
background:#fff;
box-flex: 1;
min-width:25%;
flex: 1;
margin: auto;
}
.content.selected{
background-color:yellow;
}
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content selected">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
Here is exactly what you want in example picture:
.wrapper{
width:100%;
position:relative;
}
.content{
max-width:100%;
min-width:25%;
background-color:white;
float:right;
border: 1px solid black;
box-sizing: border-box;
}
.content.selected{
background-color:yellow;
float: left;
width: 33.33%;
}
.content:nth-child(6) {
float: right;
width: 33.33%;
}
.content:nth-child(7) {
float: left;
width: 33.33%;
}
<body>
<div class="wrapper">
<div class="content">
1
</div>
<div class="content">
2
</div>
<div class="content">
3
</div>
<div class="content">
4
</div>
<div class="content selected">
5
</div>
<div class="content">
6
</div>
<div class="content">
7
</div>
</div>
</body>
Related
I want to stack 2 divs on top of each other aligned left and make the last div align right.
They should all 3 be vertically centered.
This is the markup I have. This can't be changed.
<div class="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
This is how i want it to be.
Is this possible using Flex and not changing the markup?
Here you go:
.box{
width:100px;
height:100px;
background-color:red;
margin:5px;
}
.box:nth-of-type(3){
align-self:end;
}
.con{
display:flex;
width:350px;
height:250px;
flex-wrap:wrap;
flex-direction:column;
align-items:center;
justify-content:center;
background-color:yellow;
}
<div class="con">
<div class="box">001</div>
<div class="box">002</div>
<div class="box">003</div>
</div>
If you can add wrapper divs to those three divs you could do it as following:
You can wrap your first two divs in another div and apply justify-content: space-between to the container.
To center them vertically, add display: flex; and flex-direction: column to the wrapper class and add justify-content: center
.container {
display: flex;
justify-content: space-between;
}
.box {
background-color: green;
height: 100px;
width: 100px;
margin: 10px;
}
.col {
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="col">
<div class="box">First</div>
<div class="box">Second</div>
</div>
<div class="col">
<div class="box">Third</div>
</div>
</div>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Expand a div to fill the remaining width
(21 answers)
Closed 1 year ago.
I'm sorry, I speak a little English. I would like see in one line the left and right div.
HTML:
<div id="header">header</div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">footer</div>
CSS:
#container { max-width: 1700px; }
#left { width: 100%-314px; }
#right { width: 314px; }
And I would like work if without #right div. See:
HTML (2):
<div id="header">header</div>
<div id="container">
<div id="left"></div>
</div>
<div id="footer">footer</div>
How to?
A possible workaround might be using the span tag, used in your code like this:
<div id="header">header</div>
<div id="container">
<span id="left"></span>
<span id="right"></span>
</div>
<div id="footer">footer</div>
that wont require a fixed size or anything.
Do you mean something like this?
I simply select the divs inside the container and gives them display: inline-block
#container { max-width: 1700px; }
#left { width: 100%-314px; }
#right { width: 314px; }
#container div {
display: inline-block;
}
<div id="header">header</div>
<div id="container">
<div id="left"><p>|left elem|</p></div>
<div id="right"><p>|right elem|</p></div>
</div>
<div id="footer">footer</div>
How about css grid?
.container {
display: grid;
grid-template-columns: 1fr auto;
}
.right {
width: 314px;
}
<div class="container">
<div class="left">A</div>
<div class="right">B</div>
</div>
You can use flexbox, make sure you set display:flex for your container and if you want to align your items with space in between, you can set justify-content:space-between.
#container {
display: flex;
max-width: 1700px;
justify-content: space-between;
}
#left {
background-color: green;
width: 314px;
}
#right {
background-color: red;
width: 314px;
}
<div id="header">header</div>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
This should work for you!
#container {
max-width: 1700px;
display: flex;
}
#left {
width: calc(100% - 314px);
}
#right {
width: 314px;
}
Code Explained:
display:flex : The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
calc(100%-314px) : The calc() function performs a calculation that can be used on the property.
I hope this helped you!
You can do this by CSS flex property. div is block level element to get div in one line you can set div to display:inline-block; or inline
check example below.
.flex-container {
display: flex;
height:400px;
flex-flow: column wrap;
background-color: green;
align-content: space-between;
}
.flex-container > div {
background-color: #fff;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.container{
border:1px solid #000;
height:500px !important;
padding:20px;
}
.left{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:left;
}
.right{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:right;
}
<h1>Example 1</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<h1>Example 2</h1>
<div class="container">
<div class="left">
<h3>Left</h3>
</div>
<div class="right">
<h3>Right</h3>
</div>
<div class="left">
<h3>Left</h3>
</div>
<div class="right">
<h3>Right</h3>
</div>
</div>
I have a simple 2-column layout with 3 sections. Depending on a media query, I want to change the order of them - for this I am using flex order.
This works fine, except I get my narrow sidebar section starting at the end of the first section, or similar to this. Is there a way I can get them to position more like jigsaw pieces?
Fiddle example of issue:
https://jsfiddle.net/an7m3yvs/
HTML:
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
CSS:
.page-wrapper{
width:100%;
max-width:500px;
margin:0 auto;
}
.container{
display:flex;
flex-wrap:wrap;
}
.box1{
display:inline-block;
background:red;
width:70%;
height:400px;
order:1;
}
.box2{
display:inline-block;
background:green;
width:70%;
height:150px;
order:2;
}
.box3{
display:inline-block;
background:grey;
width:30%;
height:600px;
order:3;
}
How I want it:
(I know this can be done simpler but the idea is so I can change the order with a media query, as in mobile I want a single column and them in a different order.)
GRID ATTEMPT: https://jsfiddle.net/w489b2fj/
The 3rd element is not positioned according to the first element but to its predecessor. The sidebar will occupy the remaining space after the 2nd element and not the 1st.
To achieve the desired result, I think it is better to manage 2 flexbox containers. The first includes box1 and box2. The second includes box container and the sidebar.
Edit HTML:
<div class="page-wrapper">
<div class="container">
<div class="content-wrapper">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
And edit the CSS:
.container, .content-wrapper{
display:flex;
flex-wrap:wrap;
}
.content-wrapper {
width: 70%;
}
.box1, .box2 {
width: 100%;
}
EDIT:
Ok, with this new information I have another solution:
.container {
position: relative;
}
.box3 {
position: absolute;
top: 0;
right: 0;
}
You can achieve that by adding flex-direction: column; to the container. But in this case (in order to wrap the items) you also need to set a fixed height, in your case height: 550px;.
And actually, you don't need the order settings for the flex items in this simple case...
.page-wrapper {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 550px;
}
.box1 {
display: inline-block;
background: red;
width: 70%;
height: 400px;
order: 1;
}
.box2 {
display: inline-block;
background: green;
width: 70%;
height: 150px;
order: 2;
}
.box3 {
display: inline-block;
background: grey;
width: 30%;
height: 600px;
order: 3;
}
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
You wanted an answer using CSS Grid, where box3 places inbetween box1 and box2 in mobile viewports. Here you are:
.container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"box1"
"box3"
"box2"
}
#media (min-width:768px){
.container{
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"box1 box3"
"box2 box3"
}
}
.box1{
grid-area: box1;
background-color: #f00;
}
.box2{
grid-area: box2;
background-color: #0f0;
}
.box3{
grid-area: box3;
background-color: #00f;
}
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
Try using position property and place the boxes relative to page wrapper.
if you can change HTML ( and always make good structure ) try this:
do the flex on c1 and c2 elements and you simply remove all inline-block instructions
<div class="page-wrapper">
<div class="container">
<div class=c1>
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
</div>
<div class=c2>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
And css:
.page-wrapper{
width:100%;
max-width:500px;
margin:0 auto;
}
.container{
display:flex;
}
.box1{
background:red;
height:200px;
order:2;
}
.box2{
background:green;
height:150px;
order:1;
}
.box3{
background:grey;
width:100%;
height:400px;
}
.c2{
width:30%;
flex-basis:1;
}
.c1{
display:flex;
flex-direction:column;
width:70%;
flex-basis:1;
}
I currently have the following code:
<div id="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
<style>
#container{
width:100%;
height:100%;
overflow-y:auto;
position:absolute;
left:0; top:10px;
padding:10px;
}
.card{
width:100px; height:100px; margin:10px;
float:left;
}
</style>
I am trying to vertically and horizontally align the div boxes so that the more boxes that appear, it still stays both vertically and horizontally centred in the container. For example:
Example of what it would look like with 4 cards which fit in the container..
Example of what it would look like with 12 cards which overflow in the container..
Example of what it would look like with cards that dont fit in the container..
DEMO
HTML
<div class="container">
<div class="container-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
CSS
.container {
position: relative;
display:table;
background: red;
width:100%;
height: 100%; /* auto is default, you can have ur height here */
}
.container-wrapper {
display: table-cell;
margin:auto;
text-align:center;
font-size:0;
width:90%;
height:90%;
vertical-align:middle;
}
.card {
display: inline-block;
height:100px;
width:100px;
border: 1px solid #ddd;
background: #eee;
margin:10px;
}
DEMO 2 with some height of the container
Try Flexbox DEMO
#container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0 auto;
flex-wrap: wrap;
box-sizing: border-box;
}
.inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
max-width: 750px;
margin: 0 auto;
flex-wrap: wrap;
}
.card{
width:100px;
height:100px;
margin:10px;
border: 1px solid black;
}
<div id="container">
<div class="inner">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
</div>
You may not be able to use external libraries for your project, but there is still much to learn from them in my opinion.
Your situation is a basic example of how a grid system can be useful. In deed, this problem has been solved and equated many times before by such systems.
Normally I would suggest Twitter Bootstrap 3, but since this framework is somewhat complex, I think it would be easier to read something more lightweight, like 960 grid system. Here are two links that can give you a brief introduction into the library:
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
http://webdesign.tutsplus.com/articles/using-the-960-grid-system-as-a-design-framework--webdesign-2036
Once you understand this, IMO, you have no other choice than to dive into the framework and see how it is done. It will be messy.
I also believe you will have to use JavaScript. Can you use jQuery?
Either way, when adding a new card, detect it using JavaSctipt, and then change the DOM based on that.
Hope I helped.
In the fiddle below the first 2 items display next to each other in a row, but as there's only 3 items the 3rd displays with 100%.
I would like this to keep the same width as the other 2 items leaving a blank space where there is no item.
I have also set the width of these items to 40% and it is displays as 50% each with a 10px margin which is fine but I was under the impression you needed flex: 1 auto; to set the width in this way. however doing that would mean all boxes would display with 100% when pulling from a DB.
https://jsfiddle.net/ffr9rhrw/
html
<div class="container">
<div class="main">
<div class="rev-col">
<div class="reviews-main-wrap">
<div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div>
<div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div>
<div class="reviews-main-price">Price £££</div>
<div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div>
<div class="reviews-readmore">Read More</div></a>
</div>
</div>
<div class="rev-col">
<div class="reviews-main-wrap">
<div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div>
<div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div>
<div class="reviews-main-price">Price £££</div>
<div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div>
<div class="reviews-readmore">Read More</div></a>
</div>
</div>
<div class="rev-col">
<div class="reviews-main-wrap">
<div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div>
<div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div>
<div class="reviews-main-price">Price £££</div>
<div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div>
<div class="reviews-readmore">Read More</div></a>
</div>
</div>
</div>
<!-- sidebar content -->
<div class="sidebar">
#yield('sidebar')
</div>
</div>
css
.container { display:flex; flex-flow: row wrap; max-width:1200px; margin:0 auto; padding: 0 10px;}
.header { flex: 1 100%; height:50px; background-color:#ff00ff;}
.main {display:flex; flex-flow: row wrap; flex:1; background-color:; }
.sidebar { flex: 0 250px; margin-left:10px;background-color:#ec2350; }
.center { -webkit-justify-content: center; justify-content: center; }
.rev-wrap{ display:flex; flex-flow: row wrap; background-color:#ececec;}
.rev-col:first-child{flex:1 40%; margin-left:0px; background-color:#ff00ff;}
.rev-col{flex:1 40%; margin-left:10px; background-color:#ff00ff;}
.rev-column:nth-child(odd){ flex:1 40%; margin-left:0px; background-color:#ff00ff;}
.rev-header{flex:1 auto; height:auto; padding:10px;background-color:#ff0000;}
.reviewscontainer { width: 100%; height:auto; margin: 0 auto; background-color:#f9f9f9; color:#2c3e50; }
.reviews-main-wrap{border:0px solid #ccc;height:auto; margin-bottom:2%; ov
Regarding '.rev-column:nth-child(odd)' not removing margin. That is because your element has a class name 'rev-col'.
This means the CSS should be
.rev-col:nth-child(odd){ ... }
I don't get what exactly you want to do,
First thing i don't think this style [flex:1 250px] is correct, you should use [flex:1 Auto; max-width:250px] other incorrect styles you'r using are [flex:1 40%], the correct way to go is [flex:1] or [flex:1 1 Auto] or [flex:1 1 0]... so on (You get the picture!).
Now, Since the container is [display:felx] then this div container should be filled with it's contained element.So, one way to go is simply to add another div in order to fill the blank space,Another way to go is to set the container to [display:inline-flex] this will cause the container div to align to the left and set its size according to its content.
Another way which i think will answer your needs the best is just to set max-width for both left columns and their container, this will prevent them from growing more then expected.
.main {display:flex; max-width:600px; flex-flow: row wrap; flex:1; background-color:; }
.rev-col:first-child{flex:1; max-width:300px; margin-left:0px; background-
color:#ff00ff;}
.rev-col{flex:1; max-width:300px; margin-left:10px; background-color:#ff00ff;}
.rev-col:nth-child(odd){ flex:1; max-width:300px; margin-left:0px; background-color:#ff00ff;}
https://jsfiddle.net/wtesnrp7/