I am a back-end developer and so im not very familiar with front-end developing. recently due to absence of front end designer, i am designing a website in which i'm facing a problem.
this is a non-responsive website who looks fine in desktop, but in mobile the layout shows more than 100%, i'm attaching screenshots
#charset "utf-8";
/* CSS Document */
.top-all {
margin: 0 auto;
width: 900px;
position: relative;
margin-top: 5px;
}
.top-header {
height: 120px;
background-color: #1A1318;
margin-bottom: -2px;
margin-left: 1px;
margin-right: 1px;
position: relative;
}
.main-body {
margin: 0 auto;
width: 900px;
background-color: #ffffe6;
position: relative;
height: auto;
}
.header {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.logo-container {
height: 100px;
width: 180px;
background-color: #E4E4E4;
float: right;
margin-right: 40px;
margin-top: 5px;
}
.container {
width: 100%;
background-color: #E8E8E8;
}
.main-left {
width: 60%;
display: inline-block;
background-color: #ffffe6;
}
.main-right {
display: inline-block;
float: right;
width: 36%;
}
.news {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
ul {
list-style-type: square;
}
ul li {
color:#00001a;
margin-top: 9px;
}
.announcement {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
.quick-inquiry {
height: 400px;
border: 1px solid #d5ff80;
border-radius: 8px;
background-color: white;
}
h1 {
color: #ffffff;
font-size: 60px;
font-weight: bold;
font-family: "Lucida Console", Courier, monospace;
padding: 30px;
margin-left: 30px;
}
h3 {
font-size: 24px;
text-align: CENTER;
color: white;
}
h4 {
font-size: 18px;
font-family: arial;
margin-right: 6px;
margin-left: 6px;
}
h5 {
color: #ffffff;
font-size: 30px;
}
h6 {
color: white;
font-size: 24px;
margin-left: 8px;
}
.h6 {
padding-top: 1px;
background-image: linear-gradient( #ffff66,#999900, #ffff66);
height: 48px;
width: 400px;
}
h7 {
font-size: 26px;
color: white;
margin-left: 8px;
}
.h7 {
padding-top: 3px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
height: 50px;
}
h8{
font-size: 20px;
color: white;
margin-left: 8px;
}
.h8{
padding: 4px;
background-color: #006633;
background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
height: 40px;
width: 120px;
}
p{
font-size: 16px;
margin-left: 5px;
}
.p {
background-color: #ffffff;
border: 1px solid #b3b3ff;
margin-bottom: 10px;
border-radius: 8px;
}
.h3 {
background-color: black;
height: 68px;
margin-right: 7px;
margin-left: 7px;
padding-top: 1px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
}
marquee {
border-top : 4px solid #ffff00;
border-bottom : 4px solid #ffff00;
height: 70px;
background-color: #0EB177;
}
.footer {
height: 200px;
background-color: #150F0F;
margin-bottom: 20px;
}
body {
font-family: Arial;
color: #535151;
background-color: #e6ffff;
padding: 0px;
max-width: 100%;
min-width: 99%;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Patliputra ITI</title>
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.navbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-all">
<div class="top-header">
<div class="logo-container">
<img src="images/main_logo.png" style="height: 100px; width: 180px;" alt="logo">
</div>
<h1>Patliputra ITI</h1>
</div>
<div class="navbar">
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
News
Gallery
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</div>
<div class="main-body">
<div class="header">
<h4> "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</h4>
<div class="container">
<h2>Welcome to Patliputra ITI</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to
="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.static-collegedunia.com/public/college_data/images/appImage/19709_BBSBCE_APP.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://wallpaperaccess.com/full/1209519.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://www.pixelstalk.net/wp-content/uploads/2016/10/College-Wallpapers-HD-1920x1080.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://adrian.edu/uploads/galleries/TerraceWP.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<marquee width="100%" direction="left" height="100px">
<h5>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h5>
</marquee>
<div class="main-left">
<div class="h6"><h6>Why Patliputra ITI?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Our Mission And Vision</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6> How to get Admission?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Eligibility</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h7"><h7>Admission process</h7></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="h8"><h8>Process 1</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 2</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 3</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
</div>
<div class="main-right">
<div class="news">
<div class="h3"><h3>Latest News</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h4>
<ul class="ul_news">
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
<li>News 4</li>
<li>News 5</li>
<li>News 6</li>
<li>News 7</li>
<li>News 8</li>
<li>News 9</li>
<li>News 10</li>
</ul>
</div>
<div class="announcement">
<div class="h3"><h3>Latest Announcement</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always fre</h4></div>
<div class="quick-inquiry">
<div class="h3"><h3>Quick-Inquiry</h3></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
desktop view of the site
mobile view of the site
There's a couple of things you need to change:
Remove the inline-styles on the images in the slider
add a media query for mobile view
Remove the display: inline-block; float: right; on the news and the main-right container.
Remove the marquee tag, it's deprecated.
As already mentioned by someone else, change all the fixed widths to max-widths.
Since you are also including bootstrap, I would make use of their grid system and classes for your layout and basic styling, otherwise remove it.
#charset "utf-8";
/* CSS Document */
.top-all {
margin: 0 auto;
max-width: 900px;
position: relative;
margin-top: 5px;
}
.top-header {
height: 120px;
background-color: #1A1318;
margin-bottom: -2px;
margin-left: 1px;
margin-right: 1px;
position: relative;
}
.main-body {
margin: 0 auto;
max-width: 900px;
background-color: #ffffe6;
position: relative;
height: auto;
}
.header {
height: auto;
margin-bottom: 20px;
}
.logo-container {
height: 100px;
width: 180px;
background-color: #E4E4E4;
float: right;
margin-right: 40px;
margin-top: 5px;
}
.container {
background-color: #E8E8E8;
}
.main-left {
width: 60%;
display: inline-block;
background-color: #ffffe6;
}
.main-right {
display: inline-block;
float: right;
width: 36%;
}
.news {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
ul {
list-style-type: square;
}
ul li {
color:#00001a;
margin-top: 9px;
}
.announcement {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
.quick-inquiry {
height: 400px;
border: 1px solid #d5ff80;
border-radius: 8px;
background-color: white;
}
h1 {
color: #ffffff;
font-size: 60px;
font-weight: bold;
font-family: "Lucida Console", Courier, monospace;
padding: 30px;
margin-left: 30px;
}
h3 {
font-size: 24px;
text-align: CENTER;
color: white;
}
h4 {
font-size: 18px;
font-family: arial;
margin-right: 6px;
margin-left: 6px;
}
h5 {
color: #ffffff;
font-size: 30px;
}
h6 {
color: white;
font-size: 24px;
margin-left: 8px;
}
.h6 {
padding-top: 1px;
background-image: linear-gradient( #ffff66,#999900, #ffff66);
height: 48px;
width: 400px;
}
h7 {
font-size: 26px;
color: white;
margin-left: 8px;
}
.h7 {
padding-top: 3px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
height: 50px;
}
h8{
font-size: 20px;
color: white;
margin-left: 8px;
}
.h8{
padding: 4px;
background-color: #006633;
background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
height: 40px;
width: 120px;
}
p{
font-size: 16px;
margin-left: 5px;
}
.p {
background-color: #ffffff;
border: 1px solid #b3b3ff;
margin-bottom: 10px;
border-radius: 8px;
}
.h3 {
background-color: black;
height: 68px;
margin-right: 7px;
margin-left: 7px;
padding-top: 1px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
}
marquee {
border-top : 4px solid #ffff00;
border-bottom : 4px solid #ffff00;
height: 70px;
background-color: #0EB177;
}
.footer {
height: 200px;
background-color: #150F0F;
margin-bottom: 20px;
}
body {
font-family: Arial;
color: #535151;
background-color: #e6ffff;
padding: 0px;
position: relative;
}
#media screen and (max-width: 650px) {
.main-left {
background-color: #ffffe6;
display: block;
width: auto;
}
.main-right {
float: none;
width: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Patliputra ITI</title>
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.navbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-all">
<div class="top-header">
<div class="logo-container">
<img src="images/main_logo.png" style="height: 100px; width: 180px;" alt="logo">
</div>
<h1>Patliputra ITI</h1>
</div>
<div class="navbar">
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
News
Gallery
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</div>
<div class="main-body">
<div class="header">
<h4> "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</h4>
<div class="container">
<h2>Welcome to Patliputra ITI</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to
="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.static-collegedunia.com/public/college_data/images/appImage/19709_BBSBCE_APP.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://wallpaperaccess.com/full/1209519.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://www.pixelstalk.net/wp-content/uploads/2016/10/College-Wallpapers-HD-1920x1080.jpg" alt="New York">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://adrian.edu/uploads/galleries/TerraceWP.jpg" alt="New York">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<marquee width="100%" direction="left" height="100px">
<h5>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h5>
</marquee>
<div class="main-left">
<div class="h6"><h6>Why Patliputra ITI?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Our Mission And Vision</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6> How to get Admission?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Eligibility</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h7"><h7>Admission process</h7></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="h8"><h8>Process 1</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 2</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 3</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
</div>
<div class="main-right">
<div class="news">
<div class="h3"><h3>Latest News</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h4>
<ul class="ul_news">
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
<li>News 4</li>
<li>News 5</li>
<li>News 6</li>
<li>News 7</li>
<li>News 8</li>
<li>News 9</li>
<li>News 10</li>
</ul>
</div>
<div class="announcement">
<div class="h3"><h3>Latest Announcement</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always fre</h4></div>
<div class="quick-inquiry">
<div class="h3"><h3>Quick-Inquiry</h3></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Related
I'm currently making a (static) website from scratch (so code the HTML and CSS stuff myself), and I want to have a responsive "image gallery" that changes the width of the pictures according to your screen width, so I followed this tutorial: CSS Image Gallery - responsive
However, changing it to my own likings I encountered an issue I could not fix with my current HTML/CSS skillset (it is not that much, I'm quite new in this). My problem is when I have (in my example three) images of the same size in my gallery, but the captions of the image have different length, this negatively affects the text that is followed by the gallery (see example and image below). I tried to fix this with the tutorials available at W3 and stuff, but nothing worked yet.
Does any of you how to (easily) fix this? And if so, please explain what you changed, because I want to truly understand what is going on at my website (that is why I didn't want to use these static site generators).
Note: I have made 3 types of galleries, one for two, three and four images, which explains the ".responsivethree" etc classes
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p>
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The float:left property you gave to the responsivethree class aligns the images to the left. Since you did not reset the left justification feature afterward, you are having a problem with the text scrolling. The clear:both command is used to reset the float:left property.
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p class="clear">
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
My problem is the following: I have a website with a header, left navigation and a footer (not in the code right now). The header and the left navigation have to be static and only the rest of the page should move, that's why I started with making my left navigation menu 100% width. But height: 100%, doesn't seem to be working.
Could someone give me a tip or maybe anybody knows why I have this problem?
edit: that space under the footer and the left navigation shouldn't be there. That was a fail from when I took the screenshot.
Code: (index.php)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="design.css">
<title>Hardvision</title>
<script src="https://kit.fontawesome.com/743ddd1f40.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<header>
<div class="container-fluid">
<div class="row">
<div class="col-2 logo">
<img src="logo2.png" height="90px" width="90px">
</div>
<nav class=" col-9 px-0">
<div class="mainnav">
<ul class="px-0">
<li>
<a class="li" href="#">Lorem ipsum</a>
</li>
<li>
<a class="li" href="#">Lorem ipsum</a>
</li>
<li>
<a class="act" href="#">Lorem ipsum</a>
</li>
<li>
<a class="li" href="#"><i class="fas fa-user fa-lg"></i></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<hr>
<main>
<div class="leftnav">
<nav>
<div class="leftnavtable">
<li>
<p>Lorem ipsum</p>
</li>
<li>
<p>Lorem ipsum</p>
</li>
<li>
<p>Lorem ipsum</p>
</li>
</div>
</nav>
</div>
<div class="fullheight">
<p>Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
</main>
<footer>
</footer>
</div>
</body>
</html>
Code: (design.scss)
//variables
$defaultfont: Arial, sans-serif;
$defaultfontsize: 16px;
$gray1: #A9A9A9;
$gray2: #DDDDDD;
$break_small: 900px;
$break_large: 1170px;
$headerheight: 110px;
//general
html {
font-size: $defaultfontsize;
font-family: $defaultfont;
}
//tags
header {
background-color: $gray1;
}
hr {
border: none;
height: 1px;
background-color: #333;
margin: 0px;
}
a {
color: black;
}
//logo positioning
.container-fluid {
.row {
height: $headerheight;
}
.logo {
padding: 10px 0px 0px 100px;
#media screen and (max-width: $break_large) {
padding: 10px 0px 0px 50px;
}
#media screen and (max-width: $break_small) {
padding: 10px 0px 0px 40px;
}
}
}
//Header navigation
.mainnav {
ul, li {
display: flex;
list-style: none;
justify-content: space-around;
align-items: flex-end;
height: 70px;
}
}
//whole page height exactly 100%
html, body, main, .leftnav, .leftnavtable, .fullheight {
height: 100%;
margin: 0;
overflow: auto;
}
//Left navigation container
.leftnav {
padding: 0;
background-color: $gray2;
display: flex;
flex-flow: column;
width: 250px;
float: left;
}
//Left navigation
.leftnavtable {
width: 250px;
ul, li {
list-style: none;
padding: 40px 0px 0px 35px;
}
}
//Text area
main .leftnav {
float: left;
}
You need to set height in "vh" instead of "%".
But you also need to calculate the height.. see example below
height: calc(100vh - height of header); If header height = 100px;
.leftnav {
height: calc(100vh - 100px);
}
Assuming height of navbar 70px and footer 100px and assuming width of sidebar 250px
.fullheight {
height: calc(100vh -170px);
width: calc(100vh - 250px);
overflow:auto
}
Also good to know, building layouts with flexbox CSS gives you some more freedom to play with elements shrinking and growing automatically instead of defining the height and width of the elements.
This can help you in the future to make better decision on to how to structure your HTML templates.
I coded you a quick example provided with your screenshot.
Learn more about flexbox here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
header {
height: 80px;
background-color: grey;
}
.content-wrapper {
display: flex;
background-color: blue;
}
nav {
background-color: aqua;
min-width: 180px;
}
footer {
background-color: red;
padding: 20px;
}
/* misc styling */
header {
padding: 20px;
}
header ul {
list-style: none;
}
header ul li {
display: inline;
padding: 5px;
}
nav ul li {
padding: 5px 0;
}
main section {
padding: 20px;
}
p {
margin: 0;
}
<header>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</header>
<div class="content-wrapper">
<nav>
<ul>
<li>Hello world</li>
<li>Hello world</li>
<li>Hello world</li>
<li>Hello world</li>
</ul>
</nav>
<main>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tellus et leo lacinia facilisis nec nec ante. Maecenas sed purus dictum, dignissim ex sit amet, pretium augue. Sed sed diam felis. Aliquam facilisis non nunc ac mattis. In eget
magna ut mauris maximus tincidunt nec ac orci. Sed bibendum mauris erat, nec efficitur tortor aliquet non. Nulla facilisis velit nec nunc tincidunt aliquam. Phasellus et nisl sit amet lorem sodales volutpat. Vivamus mattis justo eu nulla tincidunt
porta. Pellentesque sed urna finibus, vehicula nunc a, vehicula dui. Ut finibus lectus sed odio faucibus dignissim. Nullam egestas posuere porta. Morbi ac tellus imperdiet, fringilla ex a, tincidunt lacus. Nulla facilisi. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque at eleifend elit, in dignissim arcu. Mauris bibendum semper sagittis. Nullam quis ex sed velit porttitor tincidunt. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Vestibulum a convallis dolor. Aliquam in pharetra sem. Phasellus lobortis, diam vel convallis suscipit, nulla turpis pretium risus, sed dignissim tellus nunc vel enim. Fusce dignissim ante sit amet pulvinar
gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In congue mattis fermentum. Duis blandit ornare egestas. Cras at fringilla sem, at aliquet metus. Integer ac lectus sit amet neque efficitur dictum
in eu urna. Maecenas vulputate nec est vitae blandit. Sed aliquet posuere felis, ut tincidunt magna pharetra non. Maecenas facilisis pretium odio, tincidunt porttitor mauris feugiat vitae. Duis blandit quam non magna maximus dignissim non in tellus.
Nam ligula leo, varius iaculis commodo sed, vestibulum sit amet orci. Etiam quis quam eros. In scelerisque vitae risus sed egestas. Proin fermentum venenatis ex et condimentum. Maecenas eu massa ut augue laoreet pharetra at ut mi. Nunc gravida
est sed nibh eleifend condimentum.</p>
</section>
<footer>
Here should be a Footer.
</footer>
</main>
</div>
Use vertical height
.leftnav {
padding: 0;
background-color: $gray2;
display: flex;
flex-flow: column;
width: 250px;
float: left;
height: 100vh;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm working on a small project and I have encountered a problem. In the bgContainer class there are two bits of text and they have a margin between them, however I don't want any margin and I can't tell where the margin is coming from. According to chrome, the margin is 200px on the header text but, as far as I am aware, no where in my css have I set that to be the case. I'm also using bootstrap 4 beta 2. Any help appreciated, thanks.
padding/margin
#charset "UTF-8";
.sidenav {
height: 100%;
width: 0;
position: fixed;
overflow-y: auto;
z-index: 1;
top: 0;
left: 0;
font-family: 'Helvetica Neue', Gotham, Helvetica, Arial, 'sans-serif';
font-weight: 200;
font-size: 1em;
background-color: #e9ecef;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav .sidebar-header {
font-family: "Bebas Neue";
font-size: 2em;
font-weight: 600;
padding: 0 20px;
}
.sidenav ul.components {
padding: 10px 0;
}
.sidenav ul p {
color: #fff;
padding: 5px 10px;
}
.sidenav ul li a {
color: #5C5C5C;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.sidenav ul li a:hover {
color: #5C5C5C;
background: #fff;
transform: scale(1.01);
}
.sidenav ul li.active {
color: #e9ecef;
}
.sidenav ul li.current > a {
color: #e9ecef;
background-color: #5C5C5C;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #D0D0D0;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f0d7';
display: block;
position: absolute;
right: 20px;
top: 7px;
font-family: FontAwesome;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
}
a[aria-expanded="true"]::before {
content: '\f0d8';
}
#main {
transition: margin-left .5s;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.navButton {
padding: 10px;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 20px;
height: 3px;
background-color: #e9ecef;
margin: 3px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(0px, 8px) ;
transform: rotate(-45deg) translate(0px, 8px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(0px, -8px) ;
transform: rotate(45deg) translate(0px, -8px) ;
}
.bgConatiner {
padding: 20px;
vertical-align: middle;
height: 510px;
margin-top: 0px;
margin-bottom: 0px;
}
.header {
margin-top: 0px;
margin-bottom: 0px;
}
.header p {
font-weight: 400;
font-size: 200px;
font-family: "Bebas Neue";
color: #FFF;
}
.subheader {
margin-top: 0px;
margin-bottom: 0px;
}
.subheader p {
font-weight: 200;
font-size: 100px;
font-family: "Bebas Neue";
color: #FFF;
}
.bg {
width: 100%;
height: 550px;
background-image: url(../assets/header5.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">
<div id="mainSidenav" class="sidenav">
<div class="sidebar-header">Solebooth</div>
<!--Sidenav Menu-->
<ul class="list-unstyled components">
<li> Sneakers
<ul class="collapse list-unstyled" id="subNav1">
<li>Adidas</li>
<li>Nike</li>
<li>Asics</li>
</ul>
</li>
<li> Clothing
<ul class="collapse list-unstyled" id="subNav2">
<li>Supreme</li>
<li>Bape</li>
<li>Palace</li>
</ul>
</li>
<li> Galley
<ul class="collapse list-unstyled" id="subNav3">
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<nav class="navbar sticky-top">
<form>
<div class="navButton" onclick="navButton(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</form>
</nav>
<div class="bgConatiner">
<div class="header">
<p>SOLEBOOTH</p>
</div>
<div class="subheader">
<p>Sneakers. Streetwear.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1"></div>
<div class="col-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. </div>
<div class="col-1"></div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mainSidenav").style.width = "200px";
document.getElementById("main").style.marginLeft = "200px";
}
function closeNav() {
document.getElementById("mainSidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
function navButton(x) {
if(x.classList.contains("change")){
closeNav();
x.classList.remove("change");
}else{
openNav();
x.classList.add("change");
}
}
</script>
<!--JavaScript -->
<script src="https://use.fontawesome.com/fdfcf3c386.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Try to apply
.subheader p, .header p {
margin: 0;
}
The reason why you see so much space around your p-s is that user-agent's (browser's) default styles are applied. For example, my browser (and yours as well, I suppose) applies:
p {
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
}
Em-s are relative to the font-size of the elements. Your <p>-s have font-sizes 100px and 200px. So, that's why you get those large margins. Also consider using things like reset.css or normalize.css to clear the user-agents' styles and reduce browser inconsistencies.
In the follwing example the text goes out of the box. And when I reduce the size of the borowser the size of the boxes shring resposively but the text becomes mixed and unorganized. How can solve this?
<html>
<head>
<meta charset="utf-8">
<title>This is an email template</title>
<style>
body {
background-color: rgba(79, 183, 227, 0.4);
direction: rtl;
}
body * {
font-family: Tahoma;
}
a:link {
text-decoration: none;
margin-right: 25px;
color: #46B1F9;
}
#wrap {
background-color: #e0f2f6;
margin: auto;
width: 75%;
padding: 15px;
border: 1px solid grey;
}
.item {
border: 1px solid #95A5A6;
border-radius: 5px;
margin-bottom: 25px;
width: 60%;
display: inline-block;
}
.item p {
font-size: 1em;
}
.item img {
float: left;
width: 30%;
}
.item .notice {
text-align: center;
float: right;
padding-top: 25px;
padding-right: 25px;
width: 50%;
height: 1em;
}
/*clearfixes*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="wrap">
<div style="padding:15px;">
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s14.postimg.org/wqzq39iht/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p>
<strong>اLorem ipsum</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s10.postimg.org/y4kk17q21/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s3.postimg.org/xca6ju1kj/image.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you are trying to expand the block by content, removing height from .item .notice should fix the issue.
In all cases your text will overflow the box , so you should add overflow:scroll to notice class
Depends on what you are trying to do.
If the boxes must be a fixed height there are couple of different strategies.
The easiest thing to do is to turn off the height restriction to the notice class. However, this will reflow your document and push everything down.
On the other hand, if you want to keep the current layout, I cannot provide you a unilateral decision as the padding, height and overflow will conflict with each other on this element.
I'm having a very strange problem. Here's the HTML that I'm using:
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<title>Site name</title>
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
html{
background: #BED4EB;
}
body{
background: #FFFFFF;
width: 1000px;
margin: 0px auto;
padding-bottom: 25px;
}
header{
background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
padding: 10px 0px;
}
header h1{
color: #FFFFFF;
display: inline;
font-size: 2.5em;
}
header nav{
display: inline-block;
float: right;
}
header nav ul li{
margin: 0px 20px;
display: inline-block;
}
header nav ul li a{
color: #FFFFFF;
text-decoration: none;
font-size: 1.4em;
}
header nav ul li a:hover{
color: #FFA54D;
}
section#quick_login{
width: 20%;
float: right;
background: #91A9FA;
border: 1px solid #5D82FC;
margin: 0px 0px 5px 5px;
padding: 5px;
text-align: center;
}
section#quick_login input{
padding: 3px;
border-radius: 3px;
border: 1px solid #BDBDBD;
}
section#notices{
display: inline-block;
width: 75%;
}
section#notices .alert, section#notices .notice{
padding: 5px;
display: inline-block;
}
section#notices .alert{
background: #FA9191;
border: 1px solid #FC5D5D;
}
section#notices .notice{
background: #91A9FA;
border: 1px solid #5D82FC;
}
section#main h2{
margin-top: 25px;
}
section#main p{
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
</ul>
</nav>
</header>
<section id='quick_login'>
<h2>Quick login</h2>
<form action='login.php'>
Username: <input type='text' placeholder='Your username' name='username' />
<br />Password: <input type='password' placeholder='Your password' name='password' />
<br /><input type='submit' value='Go' />
</form>
</section>
<section id='notices'>
<p class='alert'>
Your email address hasn't been verified; check your email for a link to verify it.
</p>
<p class='notice'>
We received a record 553 visitors yesterday!
</p>
</section>
<section id='main'>
<h2>Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>
<h2>Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
</section>
</body>
</html>
and it displays perfectly (apart from the not vertically aligned menu which I'm working on):
(source: gyazo.com)
but then when I replace the <style> tag with <link rel='stylesheet' type='text/css' href='style.css' /> and copy/paste everything within the <style> tags into style.css it displays like this:
(source: gyazo.com)
What's causing this? How do I fix it? It appears to be browser-specific, since Firefox is displaying it perfectly. Only in Chrome does it appear incorrectly.
The title tag is in the style section and is causing the header to display improperly http://jsfiddle.net/Paul_Geronca/2ZCVw/4/
Fix it to this:
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<title>Site name</title>
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
html{
background: #BED4EB;
}
body{
background: #FFFFFF;
width: 1000px;
margin: 0px auto;
padding-bottom: 25px;
}
header{
background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
padding: 10px 0px;
}
header h1{
color: #FFFFFF;
display: inline;
font-size: 2.5em;
}
header nav{
display: inline-block;
float: right;
}
header nav ul li{
margin: 0px 20px;
display: inline-block;
}
header nav ul li a{
color: #FFFFFF;
text-decoration: none;
font-size: 1.4em;
}
header nav ul li a:hover{
color: #FFA54D;
}
section#quick_login{
width: 20%;
float: right;
background: #91A9FA;
border: 1px solid #5D82FC;
margin: 0px 0px 5px 5px;
padding: 5px;
text-align: center;
}
section#quick_login input{
padding: 3px;
border-radius: 3px;
border: 1px solid #BDBDBD;
}
section#notices{
display: inline-block;
width: 75%;
}
section#notices .alert, section#notices .notice{
padding: 5px;
display: inline-block;
}
section#notices .alert{
background: #FA9191;
border: 1px solid #FC5D5D;
}
section#notices .notice{
background: #91A9FA;
border: 1px solid #5D82FC;
}
section#main h2{
margin-top: 25px;
}
section#main p{
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
</ul>
</nav>
</header>
<section id='quick_login'>
<h2>Quick login</h2>
<form action='login.php'>
Username: <input type='text' placeholder='Your username' name='username' />
<br />Password: <input type='password' placeholder='Your password' name='password' />
<br /><input type='submit' value='Go' />
</form>
</section>
<section id='notices'>
<p class='alert'>
Your email address hasn't been verified; check your email for a link to verify it.
</p>
<p class='notice'>
We received a record 553 visitors yesterday!
</p>
</section>
<section id='main'>
<h2>Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>
<h2>Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
</section>
</body>
</html>
It looks like this is caused by the header h1 { display: inline; } rule not being properly followed.
If you disable this rule when the css included within the page, then this causes the broken rendering you are experiencing with the stylesheet included via a link tag.
Additionally, the title tag should be directly under the head and not in the style section.
Maybe you should try the W3C validator. It will check your HTML or CSS (upload the style.css) for errors. If it doesn't work, I'm asking you to share your HTML-code or give a web address.