Here is my code I want everything inside the div class="col-md-6 col-md-offset-3"> To be completely centered for some reason when I'm trying the Bootstrap text-center class it's not centering properly.
Here is my index.html code. Also I'm using Bootstrap and a Google Font.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bg1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="lgsize" src="logo.gif" alt="Logo">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="pushdown">
<div class="col-md-6 col-md-offset-3">
<span class="text-center title">Proto X Media</span>
<p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And also here is my style.css file I have made.
.title {
font-family: 'Bree Serif', serif;
font-weight: 800;
font-size: 500%;
color: 373d44#;
text-align: center;
}
.bg1 {
background-image: url("bg2.jpg");
background-size: cover;
}
.lgsize {
width: 150px;
height: 140px;
}
.pushdown {
padding-top: 150px;
padding-bottom: 250px;
}
.menu {
font-size: 100%
font-family: 'Bree Serif', serif;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
background-color: transparent;
text-decoration: none;
}
.subtext {
text-align: center;
font-family: 'Bree Serif', serif;
font-size: 16px;
}
Thank you guys very much :) !
Elements to be aligned must have
display: block /*(or inline-block)*/
Also, put
text-align:center
on the parent div and remove from children.
Related
ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side.
image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why.
enter image description here
*also if i put the image floated next to a textbox, how would i make sure they're the same height?
body {
background-color: aquamarine;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navbar {
list-style: none;
color: red;
}
.container {
width: 60%;
margin: auto;
}
.box-1 {
margin-bottom: 1%;
padding: 1%;
background-color: darkgray;
color: white;
}
.box-2 {
float: left;
padding: 1%;
width: 30%;
color: black;
background: white;
border-style: none;
}
.sidebox {
float: right;
background-color: aliceblue;
width: 60%;
}
img {
float: none;
margin: 10%;
display: block;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>help</title>
<link href="Untitled-1.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="description" content="Web Development" />
<meta name="keywords" content="HTML and CSS" />
<meta name="author" content="grace" />
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Study</li>
<li>Animation</li>
</ul>
</nav>
</header>
<div class="container">
<div class="box-1">
<h1>Achievments</h1>
<p>Grace has completed these 4 achievements:</p>
<ol>
<li>Two decades of existing</li>
<li>3+ jobs</li>
<li>Graduated high school</li>
<li>Failed hopes and dreams</li>
</ol>
</div>
<div class="box-2">
<h1>Hobbies</h1>
<ul>
<li>Rollerskating</li>
<li>Crying</li>
<li>Buying many books</li>
<li>Reading some books</li>
<li>Drawing and ctrl z</li>
<li>Video Games</li>
</ul>
</div>
<div class="sidebox">
<p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
<p>fuck</p>
<p>off</p>
<p>image</p>
</div>
<div class="astro">
<img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
</div>
</div>
</body>
</html>
Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.
img{
float:none;
margin:10%;
display:block;
width:300px;
}
Set the margin value to something closer to 0 and set float: right, like so
img{
float: right;
margin:5px;
display:block;
width:300px;
}
I am trying to achieve a result as in the image below.
I have done the border that goes around the div for the card but I don't know how can I put an icon or img on the top border and look interrupted also.
Html code for the Bootstrap 4 card that I am using.
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
Css code
.card-thin-body-v2 {
border: 1px dotted rgba($color: $white, $alpha: .15);
width: 74rem;
padding: 1rem .3rem 1rem 1rem;
margin: 15px 0px 15px 15px;
background-image: url('../../img/cartu-book.svg');
>h2 {
color: $white;
font-family: "adobe-caslon-pro";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
margin-left: 1rem;
>img {
height: 50.66937255859375px;
width: 53.306663513183594px;
border-radius: 0px;
margin: 20px 5px -10px 0px;
}
}
>p {
font-family: "adobe-
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thank you!
Here you go...
Make two divs:
one without border (outer)
one with dashed border (inner)
To move the image up, set margin-top: -2%; to the image. Also, set padding-left: 2%; and padding-right: 2%; to interrupt the border and set the same background-color to the outer div and image (e.g. background-color: gray;), to make the image actually interrupt the dashed border.
#box {
position: absolute;
width: 90%;
height: 90%;
border-radius: 2vw;
background-color: gray;
margin-top: 2.5%;
}
#dashed {
width: 90%;
height: 90%;
border-width: 5px;
border-style: dashed;
border-radius: 2vw;
}
#image {
width: 10%;
margin-top: -2%;
padding-left: 2%;
padding-right: 2%;
background-color: gray;
}
<!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'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='javascript.js'></script>
</head>
<body>
<div class='container-fluid d-flex justify-content-center'>
<div class='d-flex align-items-center justify-content-center' id='box'>
<div class='d-flex align-items-start justify-content-center' id='dashed'>
<img id='image' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</div>
</div>
</body>
</html>
Hello I am trying to develop an alternating two column grid layout with bootstrap, where there would be one image on the lefthand size of the screen, then reverse down the web page until the end user reaches the footer.
I would thought to achieve this using the div row col order and going by using the floats, it has worked for the first row but when it came to developing the secondary row it did not help. I do not know if it is the floats that throwing it out of whack of I literally have to much going on in my code in general. Can someone review for me please? The blank divs are the image's as well.
/* CSS Document */
/* FONT FAMILY */
body{
font-family: 'Montserrat', sans-serif;
}
p {
font-family: 'Montserrat', Gotham, Helvetica Neue, Helvetica, Arial, "sans-serif";
font-weight: 200;
letter-spacing: 0.65px;
line-height: 25px;
text-align: center;
color: white;
}
.lead {
text-transform: uppercase;
}
h2 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 1.275px;
font-size: 30px;
color: #cf6766;
}
h3 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 0.1em;
font-size: 21px;
color: #cf6766;
}
/**************** NAVIGATION STYLING ****************/
.navbar,.navbar-default {
background-color: #30415d;
padding: 20px;
color: white;
margin: 0 auto;
}
.navbar.navbar-default li a {
color: white;
text-align: center;
margin: 0 auto;
}
.navbar.navbar-default li a:hover{
background-color: white;
color: #031424;
font-weight: bold;
}
.navbar.navbar-default li {
font-weight: 300;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 12px;
}
.navbar-brand img {
width: 85%;
}
.navbar-brand a {
padding: 20px;
margin-top: -40px;
}
a.navbar-brand {
margin-top: -20px;
padding-right: 20px;
padding-left: 20px;
width: 85%;
}
.navbar-default {
border: none;
}
/*img.wrap {
float:right;
}*/
/**************HOME PAGE **********/
/* blockquote {
background-color: #8eaebd;
color: white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 36px;
margin-bottom: 50px;
font-style: italic;
font-weight: 400;
} */
.quote {
font-size: 16px;
text-align: right;
font-weight: 300;
letter-spacing: 2px;
}
.jumbotron {
background:linear-gradient(#cf6766, transparent 100%),
url(../img/DSC00154.jpg) no-repeat center;
background-size: cover;
height: 768px;
margin-top: 0px;
padding-top: 0px;
display: table;
width: 100%;
}
.jumbotron h1 {
color: white;
text-align: center;
}
#jumbotron-inner {
display: table-cell;
vertical-align: middle;
}
#jumbotron-inner p {
text-align: center;
}
.senior {
background-color: #30415d;
width: 50%;
height: 500px;
color:white;
padding: 50px;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: left;
}
.get-involved {
background-color: #8eaebd;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: right;
}
.get-inolved-img {
background-image: url(../img/grandmother-child.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 500px;
float: left;
}
.newMentor{
background: url(../img/grandparents.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width:1000px 100%;
height:500px;
float: right;
}
.dontations {
background-color: #30415d;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
}
.btn-lg {
background-color: #cf6766;
}
.btn-lg {
color: white;
font-weight:200;
}
.btn-lg a:hover {
color: #8eaebd;
}
/**************about PAGE **********/
#williams {
width: 40%;
height: 50%;
margin-right: 25px;
margin-bottom: 5px;
}
#goals {
background-color: pink;
padding: 20px;
}
#youth {
background-image: url(../img/youth-2.jpg);
background-repeat:no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 1000px;
}
#mentor {
background-image: url(../img/youth-1.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
#mentor h1 {
color: rgba(0, 44, 44, 1);
}
#textarea {
display: block;
}
textarea {
display: block;
}
#community {
background-image: url(../img/youth-3.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
/***************************** FOOTER *****************************/
.copy {
color: #cf6766;
}
<!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>New Mentoring - 50- Home </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600" rel="stylesheet">
<link href="css/styles.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]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="https://www.newmentoring.com"><img src="img/logo.png" class="img-responsive"></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav pull-right">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li> About</li>
<li>Saving the Youth</li>
<li> Mentoring Tips</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" onClick="location.href='community.html'">Community <span class="caret"></span></a>
<!-- DropDown Menu Here -->
<ul class="dropdown-menu" role="menu">
<li> Stories of Wisdom</li>
<li> Guest Book</li>
<li>Donate</li>
</ul><!--community dropdown menu-->
</li><!-- end of comunnity dropdown li & ul -->
<li> Contact</li>
</ul> <!-- end of navbar left -->
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav> <!-- END OF FULL NAVIGATION BAR -->
<div class="jumbotron">
<div class="container" id="jumbotron-inner">
<h1>New Mentoring.com</h1>
<p class="lead">Where our youth gain wisdom and leadership.</p>
<p><a class="btn btn-primary btn-lg" href="#newSenior" role="button">Learn more</a></p>
</div><!-- end of container & jumbtron inner -->
</div><!--jumbotron-->
<!-- BLOCKQUOTE-->
<blockquote>
<p>"Let your age make the difference in your community."</p>
<span class="pull-right quote">- Delece Williams</span>
</blockquote>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 senior">
<h2>What is a New Mentoring?</h2>
<p>The Middle Aged Generation that's considered to be between 30 to 80 whose living healthier, while inspiring youth to engage in healthier life-style choices and those helping to bridge the gap between the traditional values of seniors and the technical appetites of today's youth with wisdom keys. </p>
</div>
<div class="col-sm-6 newMentor">
</div><!-- img div-->
</div><!--row-->
<div class="row">
<div class="col-sm-6 get-involved">
<h2>How to Get Involved?</h2>
<p>We would love for you to get involved and its simple. Just be willing to share your time and /or stories, experience, wisdom and expertise to a young person to help them make better and healthier lifestyle choices for the success of a better path throughout life. You can do that by joining our online conversations or hosting a community forum near you.</p>
</div>
<div class="col-sm-6 get-inolved-img">
</div><!-- background img-->
</div><!--row-->
<!--col-md-12->
</div>
<hr>
<div class="row">
<div class="text-justify col-sm-6">
<h3>Stories of Wisdom</h3>
Share words of wisdom on how you break barriers to get young people to listen. Connect with our online family and help us to inspire others here. </div>
<div class="text-justify col-sm-6">
<h3>Guest Book</h3>
Thank you for visiting I Am The New 50 Campaign. Stop by and sign our guest book and be a part of our community. Tell us how we’ve inspired you to help youth here. </div>
</div><!-- end of row div-->
<div class="col-md-6 dontations">
<h2>Dontations for Kidz Korna</h2>
<p>Women &s; Men T-Shirts are Available for Campaign Fundraising Initiatives</p>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<p>Price:$20.00 <br>
<br>
<a class="btn btn-lg" href="https://kidzkorna.com/" role="button">Click here to order now</a> </p>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p class="copy">Copyright © 2017 · All Rights Reserved · <a href="http://newmentoring.com/" >New Mentoring</a> · Chicago, IL.</p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I think you're describing a layout where it's like a checkerboard style. If so you can use offsets on every second div and clear the divs.
http://www.bootply.com/IMtdYhv7bs
HTML:
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
CSS:
.col-md-6 {background-color:red; height:100px; clear:both;}
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.
I am having following code for my master page.
The problem is with FOOTER tag.
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MASTER_MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<script src="../JS/jq.js" type="text/javascript"></script>
<script src="../JS/jqui.js" type="text/javascript"></script>
<script src="../JS/script.js" type="text/javascript"></script>
<style type="text/css">
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bigDiv
{
margin: auto;
width: 1000px;
height: 1000px;
background-color: rgba(255,255,255,0.5);
}
header
{
height: 100px;
background-color: white;
font-family: "Source sans pro";
}
#menu a
{
text-decoration: none;
color: white;
}
.menuItem
{
width: 20%;
float: left;
background-color: gray;
height: 50px;
font: normal 18px 'Fjalla One',sans-serif;
color: white;
padding-top: 30px;
text-align: center;
cursor: pointer;
}
#contentMain
{
float: left;
width: 80%;
background-color: rgba(255,255,255,0);
height: 100%;
overflow-y: scroll;
}
#content
{
height: 800px;
background-color: rgba(255,255,255,0);
font-family: "Source sans pro";
}
#contentAd
{
float: left;
width: 20%;
background-color: orange;
height: 100%;
}
footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
footer a, label
{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="bigDiv">
<header>
<h1>HR Softwares</h1>
<h4>Advanced softwares and coaching</h4>
</header>
<div id="menu">
<div class="menuItem">HOME</div>
<div class="menuItem">SERVICES</div>
<div class="menuItem">PRODUCTS</div>
<div class="menuItem">CONTACT US</div>
<div class="menuItem">NEWS</div>
</div>
<div id="content">
<div id="contentMain">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="contentAd">
s
</div>
</div>
<footer>
Contact us
<label>| </label>
Feedback
</footer>
</div>
</form>
</body>
</html>
Whenever I try to set the height of FOOTER, height of footer goes behind the CONTENT and CONTENTMAIN divs, I want it to appear below the CONTENT div, but its not working.
For testing purpose, I have set opacity of CONTENT and CONTENTMAIN to 0 so that You can see height of FOOTER behind that. I want FOOTER to appear as per the flow and below CONTENT div.
Update:
clear:both in footer solved my problem. Thanks all anyway
try this i hope this will help for u.
CSS
.footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
HTML
<div class="footer">
Contact us
<label>| </label>
Feedback
</div>