I have a container div with two child divs, one at the top and the other one at the bottom. The one at the top has a predefined height 20px and the one at the bottom needs to have a height of the reminder of the container div, so I set it with 100% however it seems to have the same height as the container div as it's pushed downward (see that the border of the container is hidden). How to fix this to have the bottom div spread to the remaining height, without specifying explicitly its height?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div style="width:300px;height:200px;border:1px solid black">
<div style="width:100%;height:20px;background-color:gray">
div 1
</div>
<div style="width:100%;height:100%;background-color:orange">
div 2
</div>
</div>
</body>
</html>
You can use calc(100% - 20px)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div style="width:300px;height:200px;border:1px solid black">
<div style="width:100%;height:20px;background-color:gray">
div 1
</div>
<div style="width:100%;height:calc(100% - 20px);background-color:orange">
div 2
</div>
</div>
</body>
</html>
Or flexbox with flex-direction: column and flex-grow: 1 on the child you want to grow to fill the available space
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div style="width:300px;height:200px;border:1px solid black;display:flex;flex-direction:column;">
<div style="width:100%;height:20px;background-color:gray">
div 1
</div>
<div style="width:100%;flex-grow:1;background-color:orange">
div 2
</div>
</div>
</body>
</html>
Related
It is written in document that "The grid is by default center aligned.".
However, the following code does not center the cell:
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url('image.png');">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid is by default center aligned
Yes, it is. The grid itself is centered (the red border), check below example. I think it is what a grid suppose to be. It define tiles and let you put component on it, so it is called grid.
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid" style="width: 512px; border:2px solid red;">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-color: green">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you really want a cell center aligned inside a grid layout, let the cell span across all columns.
We are not sure what is going to be put on the grid, or how you want to organize the content, otherwise we may suggest other component that might fit your needs.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.
The problem with your page is that you did not put in place all the structure required by bootstrap's grid support: columns should be in rows, rows should be in containers, see the bootstrap documentation for details.
The following modification of your code works as intended:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey" class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</div>
</body>
</html>
(Technically the problem occurs because the "col-lg-12" class makes the div containing the "hello" a float, so it is no longer contained in the div with the grey background, and then the grey div has height 0, so isn't visible.)
Add the position or height attribute to the div
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
How do you keep the div fixed and other div on the next "line" but not under it when the page first loads.
http://codepen.io/alexdj1983/pen/raQrEK
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header"><h1></h1></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
You need to move the tops of the elements below the header, in your code pen you can do this by adding:
top: 150px;
position: relative;
to the style of the other elements. I would personally prefer to wrap the two floated divs in another div as a container and set top on that, but it isn't really necessary.
See here:
http://codepen.io/anon/pen/dPQqGb
After finishing the entire layout of my webpage using twitter bootstrap (all rows are fixed) - I would like to set the width to be fixed, that is for the layout to stay the same regardless of the browser size.
That is, if the browser is too small, then only a part of the page will be visible.
My layout's structure is as follows
<body>
<div style="container">
<div class="row">
<div class="span12">
<div class="span4">
</div>
<div class="span8">
</div>
</div>
</div>
<div class="span9"> </div>
<div class="span3"> </div>
</div>
</body>
I've tried making a div that contains the container, and setting its position to absolute, but this doesn't keep the elements from moving when the browser is resized.
How I could do this?
Here is what is in head:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="script.js"></script>
</head>
I think you have included bootstrap-responsive.css in your html. Remove it! and then you can set your container to be whatever you want. width: (x)px;
I'm trying to decide no the best way to make a side-by-side column-like layout using CSS and divs.
For some reason when I use display: inline-block;, if the aggregate width of the column-divs is equal to 100%, the last div wraps onto the next line. However, if I use floating divs, this doesn't happen, even with identical width.
For example, the two divs in this example appear on different lines:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<!-- This div is on the second line -->
<div class="column">
Column 2
</div>
</body>
</html>
But in this example they don't:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</body>
</html>
Using both Chrome and IE8.
Why does this happen?
inline-block respects white-space in your markup. try:
<div class="column">Column 1</div><div class="column">Column 2</div>
see what happens