clearfix is not working for overflow:auto - html

I am very bad with css, so someone can help me:
I have following html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cluster Test</title>
<link rel="stylesheet" href="assets/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="assets/script.js"></script>
<style>
.square-thumb
{
float: left;
margin:5px !important;
padding:5px;
cursor: pointer;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
</div>
<div class='clearfix'></div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>
My problem is that the new_div is not rendered correctly. The background color does not show, the height and width are not there etc.
If I comment the following line in the CSS, it works just fine:
float: left;
I read somewhere that adding a clearfix div will work but it does not work either. Can anyone help me,I have been stuck for hours now... :(


Put that div right after the floated square-thumbs and change from oveflow:auto to clear:both.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cluster Test</title>
<link rel="stylesheet" href="assets/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="assets/script.js"></script>
<style>
.square-thumb
{
float: left;
margin:5px !important;
padding:5px;
cursor: pointer;
}
.clearfix {
clear:both;
}
</style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
<div class='clearfix'></div>
</div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>

Related

make the two parallels lines vertically at the center of an content from left and right

I am facing one issue, maybe not a big one but I am not able to figure out how can I do
I want the double line in between the content of a div left (Subtotal) and right ($200).
Can anyone help me with this?
I have tried but I am not able to make it vertically middle.
Attaching screenshot of how I want it to look:
enter image description here
CODE SNIPPET I AHVE TRIED:
.row{
display: flex;
}
.dividerLine{
display: table-cell;
vertical-align: middle;
text-align: right;
border: 2px solid red;
height: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-4 dividerLine" style="background-color:lavenderblush;">
</div>
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
product total and I want to make the double line in between them
Attaching the screenshot how it looks:

You can achieve this by giving .row the align-items: center; property and removing margin from the p tags inside .start-lines.

You can use CSS flex align center option for this.
.row {
display: flex;
align-items: center;
}
.mb-0 {
margin-bottom: 0 !important;
}
.dividerLine {
border-top: 2px solid red;
border-bottom: 2px solid red;
height: 7px;
background-color: lavenderblush;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-6">
<div class="dividerLine"></div>
</div>
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>

That looks like a giant equals sign, so let's make it a giant equals sign. That way we can be sure that it will align with the other characters vertically correctly without us having to do any other vertical positioning.
The way this can be done is to put an = character in the central column at the standard font-size but scale in the x direction. We put a huge scale in just so it will cover the whole central column whatever the width. Of course this isn't seen as overflow is set to hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
p.wide-font {
transform: scale(10000, 1);
color: gold;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" style="text-align: right;">
<p style="text-align: right;">SUBTOTAL</p>
</div>
<div class="col-sm-4" style="overflow: hidden;">
<p class="wide-font">=</p>
</div>
<div class="col-3">
<p style="text-align: left;">SUBTOTAL</p>
</div>
</div>
</div>
</body>
</html>

Bootstrap 4 aligning <a> tag in absolute center of div

I'm totally new to Bootstrap.
I'm having serious problems at aligning an <a> tag in the vertical and horizontal middle of a div.
I've tried to use .mx-auto, margin: 0 auto and other usual methods I know of. I'm running out of otions here.
Can anyone advise me on this.
here is a fiddle for my code
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
}
.brand-text{
font-size: 2em;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>

As per my understanding,you want to align a tag to vertical and horizontal center inside <div class="banner-logo"></div>. For this you can use bootstrap 4 classes mx-auto and my-auto for the <div> that wraps <a> tag
.banner-logo{
background-color:red;
padding:20px
}
a.brand-text{
text-decoration:none;
color:white;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>

There are multiple ways for vertical alignment.
You can do by giving position absolute, make the parent div position relative.
Here is the Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
position:relative;
}
.banner-logo a
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.brand-text{
font-size: 2em;
color: white;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

You can skip mx-auto and my-auto for that fix, text-center and padding will do the work for you. Check this solution, it's simple. Hope it'd help
.banner-logo{
background-color: red;
padding: 10px 0;
}
a.brand-text{
text-decoration: none;
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
Webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
</body>
</html>

Fixed sidebar causing trouble to bootstrap responsive design

I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.

I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.

How would get two div tags to align horizontally

Okay so I have two div elements that I want to align vertically, the elements are identified as "NavBar" and "title" I have tried multiple times to align them but nothing seems to work... Any help would be great and the code is below.
Here is the code:
body {
background-color: black;
}
div.NavBar {
color: blue;
background-color: white;
text-align: center;
max-width: 25%;
min-width: 140px;
flex: 1;
}
div.title {
color: purple;
text-align: center;
}
div.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' href='favicon.png' type='image/png'/ >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bobby The Death Mage</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="NavBar">
<h1>Nav Bar<BR>---------------</h1>
</div>
</div>
<div class="title">
<h1>Site Title<BR>--------------------------------------------</h1>
</div>
</body>
</html>

If you want to align the 2 divs horizontally, you're closing the </div> of "container" before "title", close it after the "title" div block https://jsfiddle.net/L9n8jf2y/
<div class="container">
<div class="help">
<h1>Nav Bar</h1>
</div>
<div class="title">
<h1>Site Title</h1>
</div>
</div>

div {
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' href='favicon.png' type='image/png'/ >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bobby The Death Mage</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="Nav Bar">
<h1>Nav Bar<BR>---------------</h1>
</div>
</div>
<div class="title">
<h1>Site Title<BR>--------------------------------------------</h1>
</div>
</body>
</html>

you close the container div after NavBar.. so according to your code here is the answer just place the container div end after class title /div> close and add a extra class into container class div- https://jsfiddle.net/exwbfxa8/1/
body {
background-color: black;
}
div.v_align {
display: inline-flex;
}
div.NavBar {
color: blue;
background-color: white;
}
div.title {
color: purple;
text-align: center;
}
<div class="container v_align">
<div class="NavBar">
<h1>Nav Bar--------------</h1>
</div>
<div class="title">
<h1>Site Title----------------------</h1>
</div>
</div>

Twitter Boostrap 3 page is not responsive

I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}

Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at

You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>