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...
Related
This is what I want to have:
I want to be able to left-center two elemenets using flexbox. It would be easy to do this (as I have shown in the jsfiddle, if I had a third box called C, but I have not found a solution to the image above this with flexbox. Anyone?
HTML:
<div class="parent">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
CSS:
.parent {
display: flex;
border: 1px solid grey;
justify-content: space-between;
}
The code on jsfiddle: http://jsfiddle.net/3DD6E/
Add the following style to all of the child containers:
.parent div{
flex:1;
}
The flex style alters the space within the flex box (available to it) that the element will take up (1=100%) or 'take up 100% of what you can' -- which in this case would be 50% of the parent.
JSFiddle
Here is the Code:
<div id="content" class="row shadow" >
<div id="test2" class="col-lg-4">
<p>dsfdsfasdfdasfdsafdsfasdf</p>
</div>
<div id="test3" class="col-lg-4" style="">
<p>breerwwerewrqerewrqewqrwqer</p>
</div>
<div id="test4" class="col-lg-4">
<h2>Directlinks</h2>
<p>BRRRRRRRRRRRRRRRRRRRRRRRRRRRR</p>
</div>
</div>
..and i want to set:
border-right:1px solid #ddd;
to id #test2 and #test3
the problem is, that the div don't want to take the height with height:100% from the parent div which is fixed to the content.
if i give one test* an absolute position it takes the max height of the parent div, but i can't set all child div to absolute without destroying the auto fix to the screen for re-sizing.
I added the following code to your example:
#media (min-width: 1200px) {
#content { overflow: hidden; }
#test2, #test3, #test4 {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
}
The padding-bottom: 1000px adds a padding of 1000px to the bottom of each of your columns.
The margin-bottom: -1000px; basically removes this padding again by decreasing the height of each column by 1000px. Each column now has at least 1000px height (the padding + the content).
By giving the #content overflow:hidden you cant see the additional 1000px at the bottom of each column, so the columns seem to have all equal height (try removing the overflow:hidden) to see that they are still different.
The media query (#media (min-width: 1200px)) makes sure to only apply those additional rules when your columns should be displayed next to each other.
Working example: http://jsfiddle.net/R8gH9/3/
The reason it doesn't work is because the parent doesn't have a defined height. Percentage values are based on the explicit height (or width, for that matter) of the parent why nothing happens if you let it flow freely.
Typically, when working with column based layout like this, you can use the display: table and table-cell to achieve what you want. I made a simple example to demonstrate this.
CSS:
.outer {
display: table;
}
.col {
display: table-cell;
border: 1px solid red;
}
HTML:
<div class="outer">
<div class="col">
text<br/>
text<br/>
text<br/>
</div>
<div class="col">
text
</div>
<div class="col">
text<br/>
text<br/>
</div>
</div>
than set it to "position:relative;" or
"position:absolute; display:block;"
I know this isn't exactly a new topic but all my researches were without a result.
What I try to accomplish:
Two divs inside one div, next to each other. (easy: float, inline-block)
If the browser window is to small the divs should stay next to each other.
What happens right now:
If the browser window is not wide enough, the second div slips under the first one.
Example: http://pastebin.com/e9cuWjwT
How can I solve that?
If you add width to the container surrounding your divs, they will stay next to each other even if the screen real estate gets smaller. Because you've told the browser how big you want container to be, resizing the screen won't affect their placement.
Here's is a fiddle with very simplified code to show a scenario that works:
http://jsfiddle.net/Lera/CmJhw/1/
CSS:
.wrapper {
width:1024px;
}
div {
display: inline-block;
}
HTML:
<div class="wrapper">
<div>First Div</div>
<div>Second Div</div>
</div>
You could try something like:
HTML:
<div>
<div class="selection">Menu 1</div>
<div class="selection">Menu 2</div>
<div class="selection">Menu 3</div>
<div>
CSS:
div {
border: 1px solid #CCC;
display: table;
width: 100%; /* set to what you need */
}
div > div {
display: table-cell;
vertical-align: top;
}
The table cells will always stay in a single row and their widths will adjust as the width of the parent block (with display: table) adjusts to the width of the browser.
I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.
Here's a js fiddle of this:
http://jsfiddle.net/TrJqF/
Thanks
Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.
jsFiddle example
Actually there is no difference between both the height. Apply yellow background color to inner class and see the difference in explicit and no height.
both square div doesn't have content and inner div have content. The css box aligning by itself based on its content. Add empty space to the square div as follows:
<div class="btn">
<div class="square"> </div>
<div class="inner">Hello</div>
<div class="square"> </div>
</div>
If you want you can add top and bottom margin 1 or 2 pixel which will show your expectation.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I want to build a fluid layout using percentages for widths. Here is my HTML:
<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>
The problem is that the elements won't display together on one line. However, the layout works fine if I remove the line break between the them in the HTML:
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
What is the problem with the first HTML, above? How can I do something like that, but without using absolute position and float?
The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float or display: inline-block. (Just don't leave any whitespace between the divs).
Here is a demo:
div {
background: red;
}
div + div {
background: green;
}
<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>
The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-table or inline-block
50% + 50% + that space > 100% and that's why the second one ends up below the first one
Solutions:
<div></div><div></div>
or
<div>
</div><div>
</div>
or
<div></div><!--
--><div></div>
The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.
PS - I would also use inline-block instead of inline-table for this
Wrap them around a div with the following CSS
.div_wrapper{
white-space: nowrap;
}
Give this parent DIV font-size:0. Write like this:
<div style="font-size:0">
<div style="width:50%; display:inline-table;font-size:15px">A</div>
<div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
How can i do something like that but without using absolute position
and float?
Apart from using the inline-block approach (as mentioned in other answers) here are some other approaches:
1) CSS tables (FIDDLE)
.container {
display: table;
width: 100%;
}
.container div {
display: table-cell;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
2) Flexbox (FIDDLE)
.container {
display: flex;
}
.container div {
flex: 1;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.
CSS Flexboxes
Simple modern solution. Better than HTML tables!
.container {
display: flex;
}
.container div {
flex: auto; /* also 1 or 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
Alternative: CSS Grids
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* also 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
<div id="wrapper" style="width: 400px">
<div id="left" style="float: left; width: 200px;">Left</div>
<div id="right" style="float: right; width: 200px;">Left</div>
<div style="clear: both;"></div>
</div>
I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.
OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.
Honestly, I can see the problem. Floats are fantastic.
basically inline-table is for element table, I guess what you really need here is inline-block, if you have to use inline-table anyway, try it this way:
<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.
If you use a table you can (if you wish) add a space between the divs, set borders, padding...
<table width="100%" cellspacing="0">
<tr>
<td style="width:50%;">A</td>
<td style="width:50%;">B</td>
</tr>
</table>
Check a more complete example here: http://jsfiddle.net/qPduw/5/
The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.
Using float is probably easiest, and not such a bad idea. See this question for more details on how to fix the problem then.
If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..
html:
<div id="a">A</div>
<div id="b">B</div>
css:
#a, #b {
width: 49%;
display: inline-block;
}
#a {background-color: red;}
#b {background-color: blue;}