I have lot of boxes (display: inline-block + float: left) with variety of width and height like this:
AA BB CC DDD EE FF GG
BB DDD FF
DDD
And i don't know how to do, that when box have to be wrapped, it will be aligned in next "line" like that:
AA BB CC DDD EE FF GG
BB DDD FF
DDD
EE
Not as natural float: left:
AA BB CC DDD EE FF GG
BB DDD FF EE
DDD
Real example (current state):
Expected result wich i want to achieve:
jsFiddle demo: here
In your demo, you have both float: left and display: inline-block. float: left forces display: block, so display: inline-block was doing nothing whatsoever.
You can achieve your desired result with display: inline-block; vertical-align: top.
See: http://jsfiddle.net/tdSnH/1/
<style>
#container{
min-width:100px;
max-width:1024px;/*see your boxes' container width*/
}
#container .item{
float:left;
min-width:10px;/*some value*/
max-width:256px; /* #container with / item.length */
}
</style>
<div id="container">
<div class="item">a</div>
<div class="item">bbbbb</div>
<div class="item">ccc</div>
<div class="item">d</div>
</div>
Related
I am using the following code to arrange two div blocks in a row
<div layout="column" layout-gt-xs="row" layout-align="center center" id="row">
<div id="a">a</div>
<div id="b">b</div>
</div>
css goes like this
#row div {
width: 80px;
height: 80px;
border: 1px solid black;
margin:10px;
text-align:center;
}
I want to make it responsive such than on small screens, it rearranges to look like this
How can I achieve this in Angular material?
I tried doing this by using
#b {
float: left !important;
}
but it seems like float doesn't work inside layout container.
Here's the demo
Don't mix flex layout with float. You can use angular-material's flex-order to do this. https://material.angularjs.org/latest/layout/children
<div flex-order="1">a</div>
<div flex-order="0" flex-order-gt-xs="2">b<br/>(pull it to the left)</div>
You should place #b before #a in your mark up, and then float #a left, #b right. You can then remove this in #media query if needed.
Or you could use flexbox...
I have been trying to make a row of responsive boxes present a nicer look. After lots of effort and googling, I am here to get a word from experts. Please check the image below:
Outermost red is a bootstrap flexible row with display:flex;
Each box, the first of which is represented by green box, has flex: 1 ...;
Until this point, there is no issue and my CSS works perfect on all screen sizes showing all the boxes in same height and width. I just have two issues which I need help on.
Issue 1:
I need that lower part of box (represented by orange border) may always get positioned to the bottom of green box. This way all the buttons will appear in same line.
I tried to use a wrapper div in each box and then set position attribute for wrapper to relative and those of inner divs (yellow & orange) to absolute. Then I set the lower one to bottom: 0px;. But it does not work with flex and needs me to mention fixed height of wrapper which I cannot mention.
Issue 2:
In the box with the blue border I need the text of all lines to be justified except the last line which should be left aligned.
Issue 1
Assign display: flex to the div that is presented by the green box. After that, add align-self: flex-end; to the orange box. The orange box should now be displayed at the end of the green box.
Issue 2
Use the following fix to achieve what you want:
.blue-box {
text-align: justify;
-moz-text-align-last: right;
text-align-last: left;
}
The problem is that this wis not supported by Safari on Mac and iOS devices. You would have to add more markup to also cover Safari. An example would be to wrap each text line into a p tag if it's possible. Then you could do this:
.blue-box p {
text-align: justify;
}
.blue-box p:last-child {
text-align: left;
}
Please report back if the fixes do work for you or not.
The best way to solve this is to use flexbox.
.promo-boxes {
width: 100%;
display: flex;
justify-content: space-between;
background-color:black;
}
.promo-box {
width: 100px;
border: solid 1px #ccc;
background-color:red;
display: flex;
}
.btns-wrapper {
margin-top: auto;
align-self: flex-end;
}
<div class="promo-boxes">
<div class="promo-box">
<div>test 2</div>
<div class="btns-wrapper">
<button>
subscribe
</button>
</div>
</div>
<div class="promo-box">
<div>
test 3
</div>
<div class="btns-wrapper">
</div>
</div>
<div class="promo-box">
<div>
test 4 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
loooong
</div>
<div class="btns-wrapper">
</div>
</div>
</div>
How to achieve this in html/css:
Client: Sales person:
John Smith Mike Anderson
So basically I need two inputs tiled vertically on the left side of the page and the same on the right side.
Did you even tried something? Simply use floats and you are good to go
HTML
<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
CSS
.left {
float: left;
}
.right {
float: right;
}
And if it's a tabular format, than better use tables instead of divs
is there any way to force div to appear on page side by side not one after one.
suppose i have main div like and it has many child div.
<div id='main'>
<div>my content 1 </div>
<div>my content 2 </div>
<div>my content 3 </div>
<div>my content 4 </div>
<div>my content 5 </div>
<div>my content 6 </div>
<div>my content 7 </div>
<div>my content 8 </div>
<div>my content 9 </div>
</div>
now i want that on each line three div will come side by side and there will be some padding....so if three div appear on each line then three line will be required to show all div content. i know css float property can be use to accquire the effect but i am not good in css. so some one help please. thanks
#main div{float:left; width:33%; display:block;}
This should align them next to each other
You could go the float method, or you could use display: inline-block, as per this JSFiddle:
div#main {
width: 500px;
}
div#main div {
width: 30%;
display: inline-block;
/* IE hacks */
*display: inline;
zoom: 1
}
div#main doesn't have to have a width. It's given one here just as a demonstration.
give 1 2 & 3 the attribute float: left;
give 4 the attribute clear: both;
give 4 5 & 6 the attribute float: left;
give 7 the attribute clear: both;
give 7, 8, 9 the attribute float: left;
and please dont use the attribute "padding"! Its displayed differently in each browser!
Use a surrounding div with a margin instead!
If you want the same distance between every element the easiest way is to float the children, set a negative margin on the parent element that has the same size as the margin on the children, and make the parent x times as wide as the children + x times the margin (where x is 3 if you want 3 elements next to each other) like this:
#main { margin: -10px 0 0 -10px; width: 330px}
#main > div { margin: 10px 0 0 10px; width: 100px; float: left;}
Don't forget to set overflow: hidden on the parent if you don't want it to collapse.
You can see an example here: http://jsfiddle.net/mCEGf/
How to achieve the following with CSS?
--------------------------------------------------
| DIV 1: 50px | DIV 2: FLUID | DIV 3: 50px |
--------------------------------------------------
I don't have an issue with a 2 columns layout having the right div fluid, but i can't figure out how to make the above.
Demo: http://jsfiddle.net/SKsmJ/
<div style="float:right;width:50px;"></div>
<div style="float:left;width:50px;"></div>
<div style="margin:0 55px;"></div>
It's not the nicest solution, but you could use nested divs, set the main div's width to whatever you want for your page's width and position the other two with float.
HTML:
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
main
</div>
CSS:
div {
display: block;
}
#main {
width: 100%;
}
#left, #right {
width: 50px;
}
#left {
float: left;
}
#right {
float: right;
}
Here's a working example: http://jsfiddle.net/davehauser/6qVwR/
All you have to do is to float both the right and left div, making sure you're right div is the first in the HTML.
I edited the jsfiddle you provided : http://jsfiddle.net/AsKGL/
You just need to float: left all divs, specifying width:50px for the first and last div.
Here's a super basic jsFiddle: http://jsfiddle.net/Simo990/V3PtW/1