How would you put all of these <div>s in a row?
<div style="background-color: aquamarine; margin:50px">
<div style="background-color: azure;width:25%;">
1
</div>
<div style="background-color: darkolivegreen;width:25%;">
2
</div>
<div style="background-color: darkorange;width:25%;">
3
</div>
<div style="background-color: bisque;width:25%;">
4
</div>
</div>
Use the awesome display:table.
<div style="background-color: aquamarine; margin:50px; display:table">
<div style="background-color: azure;width:25%;display:table-cell">
1
</div>
<div style="background-color: darkolivegreen;width:25%;display:table-cell">
2
</div>
<div style="background-color: darkorange;width:25%;display:table-cell">
3
</div>
<div style="background-color: bisque;width:25%;display:table-cell">
4
</div>
</div>
In fact, you don't even need to specify widths for the inner divs. With table-layout:fixed the browser will automatically calculate the widths and lay it out nicely. :)
Be sure to specify a width on the parent div though.
<div style="background-color: aquamarine; margin:50px; width:100%; display:table; table-layout:fixed">
<div style="background-color: azure;display:table-cell">
1
</div>
<div style="background-color: darkolivegreen;display:table-cell">
2
</div>
<div style="background-color: darkorange;display:table-cell">
3
</div>
<div style="background-color: bisque;display:table-cell">
4
</div>
</div>
you need to use floats
give this four inner divs a class and then use css float: left
Related
My website has a menubar which is in the main component html and inside this html is also the app-selector of another component:
MainComponent.html
<div style="height:200px">This is my Menubar</div>
<app-test></app-test>
I would like to display 3 boxes in my testComponent.html.
I am using flexLayout: https://github.com/angular/flex-layout
<div fxLayout="column" fxLayoutAlign="space-between none" style="height: 100%">
<div style="background-color: red">
T1
</div>
<div style="background-color: blue">
T2
</div>
<div style="background-color: yellow; height: 200px">
T3
</div>
</div>
The problem is that because there is a menubar, i get a scrolling behaviour but I just want the last box to end at my screen bottom. See here: http://prntscr.com/nhwcbp
How can I achieve this?
https://stackblitz.com/edit/flex-layout-angular-material-xssepa
put below style in style.css:
html, body { height: 100%; width: 100%; margin: 0; }
Remove height: 100vh and make use of flexbox
<div fxLayout="column" style="height:100%">
<div fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex="50">
<div fxLayout="row">
<div fxFlex="30" class="action-blurb">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
</div>
</mat-card>
</div>
<div fxFlex="">
<app-test></app-test>
</div>
</div>
I hope this should do the trick as per this demo
I have an h4 nested in 2 divs like so
<div id="my-team-lineup" style="text-align:center">
<div id="myteamDiv" style="width:100%; ">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow">
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text</div>
</div>
<br />
<h4>Week At Bottom</h4>
</center>
</div>
</div>
I want to have this h4 sticky to the bottom of the page. I have tried every combination of position and bottom I can think of and nothing is working. Just a note as I have an exact replica of this that takes up the other 50% of the page, and the height of the divs can be different due to content.
First, you didn't closed all divs in your code. correct it.
You can set position as fixed and bottom as 0.
HTML
<h4>text</h4>
CSS
h4{
position: fixed;
bottom: 0;
}
https://jsfiddle.net/xxfhqv36/
I have a <row> with 6 columns, height of each column is unknown. On small screen it should turn into 2 rows with 3 columns.
This is how it looks on md screen:
This is how it looks on sm screen:
I'm using the clearfix trick described in the docs
Question: how do I keep it in 2 rows of 3 columns but pull the columns to the top as much as possible? a4 should touch c1 and a5 should touch d2.
Full code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="color:black;font-size: 1.5em;">
<div class="col-md-2 col-sm-4">
<div style="background-color: blue;">a0</div>
<div style="background-color: white;">b0</div>
<div style="background-color: white;">c0</div>
<div style="background-color: white;">d0</div>
<div style="background-color: white;">e0</div>
</div>
<div class="col-md-2 col-sm-4">
<div style="background-color: blue;">a1</div>
<div style="background-color: white;">b1</div>
<div style="background-color: white;">c1</div>
</div>
<div class="col-md-2 col-sm-4">
<div style="background-color: blue;">a2</div>
<div style="background-color: white;">b2</div>
<div style="background-color: white;">c2</div>
<div style="background-color: white;">d2</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-2 col-sm-4">
<div style="background-color: blue;">a3</div>
<div style="background-color: white;">b3</div>
<div style="background-color: white;">c3</div>
<div style="background-color: white;">d3</div>
<div style="background-color: white;">e3</div>
</div>
<div class="col-md-2 col-sm-4">
<div style="background-color: blue;">a4</div>
<div style="background-color: white;">b4</div>
<div style="background-color: white;">c4</div>
<div style="background-color: white;">d4</div>
</div>
<div class="col-md-2 col-sm-4">
<div style="background-color: blue;">a5</div>
<div style="background-color: white;">b5</div>
<div style="background-color: white;">c5</div>
<div style="background-color: white;">d5</div>
</div>
</div>
Normally you'd need JS for this—something like Isotope or Masonry. You can do it with CSS3, but older browsers won't support it:
Instead of floating the boxes, just add this to the container:
.row {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
Above snippet is a result of the following code-(i have used bootstrap for the css)
<div class="container" >
<div id=" row" style="margin-top: 140px;">
<div class="panel col-md-6" style="background-color: yellow">
<div class="panel-heading" style="background-color: gray">
</div>
</div>
<div class="panel col-md-6" style="background-color: greenyellow">
<div class="panel-heading" style="background-color: sienna;width:fit-content;"></div>
</div>
</div>
</div>
Here Green and yellow are panels; Sienna and grey are panel headers. Why does panel header leave padding on both ends? how to fit header here to panel width?
You shouldn't use col-md-* with other classes. It's part of the grid system and the "cells" are padded to the left and right.
This should be your code, although it doesn't fix your problem:
You shouldn't use col-md-* with other classes. It's part of the grid system.
You need to use some more div elements like so:
<div class="container" >
<div id=" row" style="margin-top: 140px;">
<div class="col-md-6" style="background-color: yellow">
<div class="pannel">
<div class="panel-heading" style="background-color: gray">
</div>
</div>
</div>
<div class="col-md-6" style="background-color: greenyellow">
<div class="pannel">
<div class="panel-heading" style="background-color: sienna">
</div>
</div>
</div>
</div>
</div>
.row class add a negative padding of 15px.
.col-xx-xx class add a positive padding of 15px.
To don't have this padding, just remove it in your specific class.
Here :
.panel{
padding: 0px;
}
My CSS isn't picking up my different columns. They are stacked on top of each other. I want each of them each to span 4 columns of the same row.
<div class="container">
<div class="row">
<div class="col-md-4" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
How about this using floats. You can apply the float which is the pull-left helper class to the div.col-md-4 and then they won't stack upon each other.
Updated JS fiddle but you shouldn't need to float left in the CSS, couldn't get JS fiddle to pull bootstrap stuff. http://jsfiddle.net/4xEPr/7/
<div class="container">
<div class="row">
<div class="col-md-4 pull-left" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
AND CSS
div.col-md-4 {
border: 1px solid #333;
width: 200px;
background-color: red;;
}