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
Related
Good day
I have a question;
I am using Bootstrap 5 for my website, which works fine yet,
I want Bootstrap using the whole page and not like 80%; (See image)
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
And my css;
body {
background-image: url(https://i.imgur.com/M8Jq9IE.jpg);
background-size: cover;}
.title {
color: whitesmoke;}
.navbar {
background-size: cover;
background-color: gray;}
So how can I make it so Bootstrap uses the whole page and not have those wierd border/margins?
Thanks
Bootstrap's default .container class has a fixed width that changes depending on the breakpoint.
If you want the container to be full width at all breakpoints, you need to use .container-fluid.
If you want to have the full width of the container depending on the breakpoint, you need to use one of the Responsive Container classes like container-sm or container-lg.
In your case, it would be:
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
Check out the documentation for more information:
https://getbootstrap.com/docs/5.0/layout/containers/
i want to style div elements in code below differently without changing class names , in fact every element with class named "right" represent one side of a hollow rectangle , so i want every elemnt have the same width and height but different position(vertical horizental ...) .
i know that i can give different id or class name to each div element but i want to know if there is anyway to style elements with same class names differently??
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
</div>
</body>
</html>
.right:nth-child(1) {
background: red;
}
.right:nth-child(2) {
background: yellow;
}
...
https://www.w3schools.com/CSSref/sel_nth-child.asp
Inside each div tag You can add a new div tag with different class name or id. It won't make any difference in your output.
#container{
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 2fr;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'>one</div>
<div class='right'>two</div>
<div class='right'>three</div>
<div class='right'>four</div>
</div>
</body>
</html>
I'm currently in the process of learning Bootstrap and I'm still fairly new, so please go easy on me. I'm trying to make a page where there is a main heading for the page, a heading above the grids, and 3 unequal responsive grids than span the height of the rest of the page, even when the browser is resized. I've tried setting height or row and each div to 100%, I also tried looking this up but I didn't find anything of much use, and I'm not sure how I would achieve this, Thanks for taking the time to help. Code is:
EDIT: To specify, my issue is getting the remaining area to take up 100% of space, not a div taking up 100% of the page, just the remaining part
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: 100%;
}
#main {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<h1>Welcome</h1>
<div class="container-fluid" id="main">
<h1>This is a heading</h1>
<div class="row">
<div class="col-sm-3 div1">Left side</div>
<div class="col-sm-6 div2">Middle</div>
<div class="col-sm-3 div3">Right side</div>
</div>
</div>
</body>
</html>
Try this
.row {
height: 100vh;
}
More information here:
https://stackoverflow.com/a/16837667/7361767
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>
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