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
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 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>
I am trying to beat a bootstrap layout into fitting some requirements I have. The layout started as the default generated by an MVC 5 project template, but I am stuck on getting an image to fill the entire browser width. I need the image to appear as follows:
If I add a section, with an img tag, the image doesn't stretch across the entire screen, but starts 'indented' from the left, and causes the brower so 'overflow' to the right, like:
The only alternative I can see is to set a background image for body-content, but that presents a whole lot of scary positioning issues for the content below the image, and there is quite a lot of that, e.g. below the text "Here's what you'll get' there is still a whole lot of content.
Here is an abridged version of my first attempt:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>s</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar">
...
</div>
<div class="container body-content">
<section id="landing">
<img src="/Content/Images/landing_back.png" alt="The Tax-Free Investment Account" />
</section>
<footer>
...
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
You can set the background image of the entire body like this:
body {
background-image: url("http://www.placecage.com/1000/800");
background-size:100%;
}
However if you are looking to make a specific element full width with Bootstrap then you should use container-fluid rather than container to hold your content as that element reaches the boundary of your screen width instead of being fixed width.
Note: run this snippet in full screen to get the full effect.
.container,
.container-fluid {
background-image: url("http://www.placecage.com/1000/800");
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">Fixed width</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">Full width</div>
</div>
</div>
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