I am having trouble with allignment of Column. Its not vertically alligned on the browser. I used grid system using bootstrap and tried to fulfill some requirements. Can anyone fix my code or help me fix my code?
![<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta][1] charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style= " background-color:grey;">
<div class="container">
<!-- Example row of columns -->
<!-- outer row-->
<div class="row">
<div class ="col-md-3">
<div class="row" >
<div class="col-md-12" style= "border: 2px solid black; background-color:orange; ">
<h2>Heading 1</h2>
<p> left SIDE BAR </p>
</div>
<div class="col-md-12" style= "border: 2px solid black; background-color:orange;">
<h2>Heading 2 </h2>
<p> LEFT SIDE BAR CONTENT2</p>
</div>
</div>
</div>
<div class ="col-md-8 col-md-offset-1" >
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:Yellowgreen;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:Salmon;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4"style="border: 2px solid black; background-color:Coral;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<div class="row">
<div class="col-md-4" style= "border: 2px solid black; background-color:orange;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style= "border: 2px solid black; background-color:purple;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lightblue;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:green;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:red;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lavender;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The problem with your code is that your HTML is not not closing a div tag correctly. You've forgot to close the div of first row and closed it somewhere else. Here's your snippet fixed:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta
][1] charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style=" background-color:grey;">
</div>
<div class="container">
<!-- Example row of columns -->
<!-- outer row-->
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12" style="border: 2px solid black; background-color:orange; ">
<h2>Heading 1</h2>
<p> left SIDE BAR </p>
</div>
<div class="col-md-12" style="border: 2px solid black; background-color:orange;">
<h2>Heading 2 </h2>
<p> LEFT SIDE BAR CONTENT2</p>
</div>
</div>
</div>
<div class="col-md-8 col-md-offset-1">
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:Yellowgreen;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:Salmon;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:Coral;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta
felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus.</p>
</div>
</div>
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:orange;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:purple;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lightblue;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.</p>
</div>
</div>
<div class="row">
<div class="col-md-4" style="border: 2px solid black; background-color:green;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:red;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. </p>
</div>
<div class="col-md-4" style="border: 2px solid black; background-color:lavender;">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I know this question is probably the same as some that has been asked, but I haven't found a solution yet.
I'm trying to create a site that has a side main navigation on the left and the content on the right.
I've been able to make the nav to be full height on the browser but if the content is bigger then the screen then the nav doesn't go all the way down.
I've created a codepen to show what I'm trying to say.
CODEPEN
My HTML
<!-- BEGIN MENU AREA -->
<nav class="navbar navbar-default navbar-inverse">
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="current">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- END MENU AREA -->
<!-- BEGIN CONTENT AREA -->
<div class="container content_wrapper">
<div class="row">
<div class="col-lg-12 banner_wrapper">
<div class="single-item">
<div>
<img src="img/banner6.jpg" alt="">
</div>
<div>
<img src="img/banner7.jpg" alt="">
</div>
<div>
<img src="img/banner8.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 services_wrapper">
<div class="col-lg-4 services">
<div>
<img src="img/cutting_and_styling.jpg">
<h1>Cutting & Styling</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/Chemical_service.jpg">
<h1>Chemical Service</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/hair_treatment.jpg">
<h1>Treatment</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 line">
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 home_content_area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi eros, porta rutrum lacinia quis, tristique
molestie dui. Fusce interdum cursus eros, quis tincidunt mi. In vel neque non metus aliquet malesuada. Suspendisse
aliquet purus ac justo cursus dictum. Donec viverra sapien sit amet ligula pretium aliquet. Curabitur suscipit
faucibus purus quis luctus. Pellentesque congue vestibulum interdum. Sed in laoreet turpis, eu condimentum elit.
</p>
<p>
Aenean ipsum ex, gravida non auctor nec, interdum non nulla. Nullam vehicula felis id lacus ullamcorper, eu mollis
mi pulvinar. In at libero nunc. Aliquam a lectus ac quam consequat egestas. Etiam a accumsan diam. Donec sed urna
ut nunc placerat ultrices. Vestibulum ac blandit mauris, quis ultricies justo. Quisque semper mattis purus eu aliquet.
</p>
<p>
In tincidunt malesuada leo, euismod ornare magna mattis a. Aenean fringilla eros ut enim dictum, dapibus porttitor
lectus egestas. Vestibulum ut erat bibendum, laoreet lacus eu, molestie est. Proin bibendum mauris et felis lobortis,
quis consequat libero tincidunt. Donec leo ligula, porttitor ut auctor vel, malesuada et nisl. Donec condimentum
malesuada sem sed rhoncus. Cras vitae tincidunt velit.
</p>
<p>
Mauris maximus ultricies ullamcorper. Praesent auctor euismod dignissim. Donec finibus, leo ut dictum tempus,
lacus sem aliquet ligula, sed ornare nibh neque eleifend elit. Pellentesque semper convallis odio. Maecenas
pharetra iaculis lacus sed ultricies. Sed id sapien aliquet lectus sagittis semper. Etiam ultrices odio sed
dolor dictum commodo. Donec condimentum ac nisl eget vestibulum. Integer velit risus, interdum eget molestie in,
faucibus ut magna. In imperdiet nisi erat, ut vehicula eros volutpat eget. Aliquam at lorem lacinia, accumsan
nunc vitae, sollicitudin velit. Ut at dapibus dolor, ac ornare eros. Etiam dui sem, mollis eget lacus non,
condimentum maximus lectus. Etiam eros sapien, ultricies scelerisque pellentesque eget, viverra a sapien.
Quisque tincidunt ante accumsan blandit ultrices. Maecenas blandit facilisis dignissim.
</p>
</div>
</div>
</div>
<!-- END CONTENT AREA -->
My css
body{
background-color: #4169E1;
background-image: url("../img/light-grey-floral-motif.png");
}
.container{
background: #ffffff none repeat scroll 0 0;
border-radius: 5px;
margin-left: 275px;
margin-top: 20px;
padding: 20px;
width: 970px;
}
.navbar-default {
height: 100%;
left: 0;
position: absolute;
top: 0;
background-image: url("../img/light-grey-floral-motif.png");
}
.navbar-brand {
float: none;
}
.navbar-nav {
/*margin-top: 60px;*/
text-align: center;
width: 100%;
}
.navbar-nav li {
display: block;
float: none;
}
.webkrunch {
bottom: 0;
color: #ffffff;
position: absolute;
}
.webkrunch a img {
margin-left: 40px;
}
.services img {
width: 100%;
}
.banner_wrapper img {
width: 100%;
}
.banner_wrapper {
margin-bottom: 20px;
}
.gallery_image > img {
width: 100%;
}
.services_wrapper h1 {
font-family: Gabriela;
font-size: 26px;
}
.services div {
background: #d6eaf8 none repeat scroll 0 0;
}
.services_wrapper {
text-align: center;
}
.services_wrapper p {
padding: 0 20px 15px;
}
.line hr {
border-color: #333;
border-width: 2px;
width: 80%;
}
.home_content_area {
text-align: center;
}
.services {
padding-left: 0;
}
.services:last-child {
padding: 0;
}
.about_content_area h1 {
font-family: Gabriela;
margin-top: 0;
text-decoration: underline;
}
.gallery_title h2 {
font-family: Gabriela;
}
.gallery_title {
color: #333;
padding-bottom: 1px;
text-align: center;
vertical-align: middle;
}
.gallery_category {
background: #d6eaf8;
}
.gallery_area h1 {
font-family: Gabriela;
}
.gallery_items img {
margin-bottom: 10px;
margin-right: 10px;
}
.pricing_table tr:first-child {
font-weight: bold;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: #d6eaf8;
}
table.pricing_table tr td:first-child {
font-weight: bold;
}
You need to add position:fixed; CSS to your navbar. It will be fixed in the browser window and will not scroll.
DEMO
Try position: fixed instead of absolute.
A fixed element is positioned relative to the viewport, it will always stay in the same place (even if the page is scrolled).
Example
The solution to my answer was to change absolute to fixed. The answer came from both #NarenMurali and #James.
Thanks for helping me.
add overall section for both navbar and container and then add this css, sorry i don't have codepen login
.navbar{
padding-bottom:1000px;
margin-bottom:-1000px;
}
.overall{
overflow:hidden;
}
<!-- BEGIN MENU AREA -->
<section class="overall">
<nav class="navbar navbar-default navbar-inverse">
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="current">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- END MENU AREA -->
<!-- BEGIN CONTENT AREA -->
<div class="container content_wrapper">
<div class="row">
<div class="col-lg-12 banner_wrapper">
<div class="single-item">
<div>
<img src="img/banner6.jpg" alt="">
</div>
<div>
<img src="img/banner7.jpg" alt="">
</div>
<div>
<img src="img/banner8.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 services_wrapper">
<div class="col-lg-4 services">
<div>
<img src="img/cutting_and_styling.jpg">
<h1>Cutting & Styling</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/Chemical_service.jpg">
<h1>Chemical Service</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/hair_treatment.jpg">
<h1>Treatment</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 line">
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 home_content_area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi eros, porta rutrum lacinia quis, tristique
molestie dui. Fusce interdum cursus eros, quis tincidunt mi. In vel neque non metus aliquet malesuada. Suspendisse
aliquet purus ac justo cursus dictum. Donec viverra sapien sit amet ligula pretium aliquet. Curabitur suscipit
faucibus purus quis luctus. Pellentesque congue vestibulum interdum. Sed in laoreet turpis, eu condimentum elit.
</p>
<p>
Aenean ipsum ex, gravida non auctor nec, interdum non nulla. Nullam vehicula felis id lacus ullamcorper, eu mollis
mi pulvinar. In at libero nunc. Aliquam a lectus ac quam consequat egestas. Etiam a accumsan diam. Donec sed urna
ut nunc placerat ultrices. Vestibulum ac blandit mauris, quis ultricies justo. Quisque semper mattis purus eu aliquet.
</p>
<p>
In tincidunt malesuada leo, euismod ornare magna mattis a. Aenean fringilla eros ut enim dictum, dapibus porttitor
lectus egestas. Vestibulum ut erat bibendum, laoreet lacus eu, molestie est. Proin bibendum mauris et felis lobortis,
quis consequat libero tincidunt. Donec leo ligula, porttitor ut auctor vel, malesuada et nisl. Donec condimentum
malesuada sem sed rhoncus. Cras vitae tincidunt velit.
</p>
<p>
Mauris maximus ultricies ullamcorper. Praesent auctor euismod dignissim. Donec finibus, leo ut dictum tempus,
lacus sem aliquet ligula, sed ornare nibh neque eleifend elit. Pellentesque semper convallis odio. Maecenas
pharetra iaculis lacus sed ultricies. Sed id sapien aliquet lectus sagittis semper. Etiam ultrices odio sed
dolor dictum commodo. Donec condimentum ac nisl eget vestibulum. Integer velit risus, interdum eget molestie in,
faucibus ut magna. In imperdiet nisi erat, ut vehicula eros volutpat eget. Aliquam at lorem lacinia, accumsan
nunc vitae, sollicitudin velit. Ut at dapibus dolor, ac ornare eros. Etiam dui sem, mollis eget lacus non,
condimentum maximus lectus. Etiam eros sapien, ultricies scelerisque pellentesque eget, viverra a sapien.
Quisque tincidunt ante accumsan blandit ultrices. Maecenas blandit facilisis dignissim.
</p>
</div>
</div>
</div>
</section>
<!-- END CONTENT AREA -->
Deleted all the extra stuff, all I want is the row to float left so there is some text next to the image, but it only moves over one line. Using bootstrap if that helps, along with my own CSS file.
example
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
css code:
#bio {
float: left;
}
Float your image to the left
#bio img {
float: left;
}
Example: https://jsfiddle.net/L75dhtny/
you can try this one:
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
DEMO HERE
You can try this -
/* css code */
img {
float: left;
padding:2px;
margin-right:4px;
}
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src="http://placehold.it/350x150">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
Add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I try to create a simply CSS grid layout, maybe with bootstrap, with exactly 5 boxes in different sizes which should fill a container box fully.
I searched through stackoverflow and several websites but found nothing really suitable.
Here is the problem code, go to http://galaxy.vandango.org/test/index1.htm to see the result:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.box {
border: 1px solid #336c96;
border-radius: 5px;
margin: 5px;
width: 300px;
}
.item1 {
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 box item1">
<h4>1</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
<br>
7897897
<br>
7897897
<br>
7897897
<br>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
<div class="col-md-4 box">
<h4>2</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
<div class="col-md-4 box">
<h4>3</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh.
</p>
</div>
<div class="col-md-4 box">
<h4>4</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
<div class="col-md-4 box">
<h4>5</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
<br>
123
<br>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
</div>
</div>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body></html>
What i really need is the following:
http://galaxy.vandango.org/test/index2.htm
But i can only get it done if i add the following css classes and add the classnames to the box 4 and 5.
.item4 {
position: relative;
top: 40px;
right: 310px;
}
.item5 {
position: relative;
top: -185px;
right: -310px;
}
Is there any good way to make this simplier and more flexible?
Don't use Javascript (or even more, jQuery!), use flex-box.
I've found the resource at css-tricks very helpful.
The container is using display: flex to be able to use the justify-content: space-around that makes sure your columns are aligned inside the container.
Every column is then using display: inline-flex and flex-direction: column to accomplish what you're looking for.
The only drawback with this solution (in my head) is the fact that you need to generate your divs in wrong order, namely 1, 2, 4, 3, 5, but it's hard to judge if this will be a problem or not.
Also, in reply to "It's not compatible", it's pretty usable throughout the web.
I used javascript to populate the textboxes to make the HTML easier to inspect.
var texts = {
1: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <br> 7897897 <br>7897897 <br>7897897 <br>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
2: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
3: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.",
4: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
5: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 123 Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui."
}
for (x in texts) {
document.getElementById(String(x)).innerHTML = '<h4>' + String(x) + '</h4>' + texts[x];
}
.container {
display: flex;
justify-content: space-around;
width: 1000px;
margin: 0 auto;
}
.col {
display: inline-flex;
flex-direction: column;
}
.box {
width: 300px;
border: 1px #336c96 solid;
padding: 0 10px 10px 10px;
border-radius: 5px;
margin: 10px;
}
<div class="container">
<div class="col">
<div id="1" class="box">1</div>
</div>
<div class="col">
<div id="2" class="box">2</div>
<div id="4" class="box">4</div>
</div>
<div class="col">
<div id="3" class="box">3</div>
<div id="5" class="box">5</div>
</div>
</div>
See comment from paulie_D: Masonry layout from JQuery is the correct one!
I'm attempting to achieve the layout below using col-lg-4.
I just need to know how I can make the third column span all three rows and without creating enormous gaps of whitespace between the rows. Here's what it's currently looking like:
Is this possible to do in Bootstrap (without using the Bootstrap 2 span classes)?
Here's the code (generalized)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
<!-- THIS NEEDS TO ROW SPAN -->
<p>Praesent posuere egestas sagittis. Sed feugiat nibh urna, egestas elementum ipsum facilisis et. Nullam elit nisi, tincidunt a turpis ac, fringilla pellentesque nibh. Suspendisse pulvinar orci sit amet metus laoreet, sed tincidunt quam semper. Vestibulum
ac nunc a justo vulputate venenatis vel sit amet augue. Vestibulum eu hendrerit sem. Aenean nec tempus ipsum. Integer nec lectus varius, venenatis orci vitae, efficitur mi. Curabitur at consectetur leo, sit amet consectetur nisi. Nam nec eros
facilisis, aliquam sem molestie, auctor elit. Vivamus quis hendrerit justo, vel molestie ligula.</p>
<p>Morbi leo magna, sollicitudin a sem ac, finibus facilisis ex. Nam ut enim commodo, venenatis augue nec, consectetur velit. Sed lobortis vitae lacus at pulvinar. Aliquam vel enim tristique, lacinia nibh ut, porta dui. Fusce efficitur volutpat lectus
maximus iaculis. Proin purus odio, auctor id sollicitudin nec, lacinia vel ligula. Sed luctus ipsum non sem tincidunt mollis.</p>
<p>Pellentesque congue mauris non tempor tincidunt. Phasellus pretium at lorem ut auctor. Donec rhoncus, nibh vitae aliquam tristique, leo quam elementum nisl, at porttitor massa diam venenatis diam. Suspendisse potenti. Sed gravida, mauris nec rhoncus
feugiat, augue velit facilisis mauris, et dapibus nisl augue non nunc. Nunc pretium quam eget tincidunt sollicitudin. Etiam maximus metus eget accumsan efficitur. Fusce a lorem vitae libero blandit condimentum.</p>
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
You need to use nested col-s, in this case, use col-lg-8 + col-lg-4
and inside col-lg-8 you create nested cols using row
added col-xs-* for demo.
[class*="col-"] {
border: red dashed 1px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-lg-8">
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
<div class="col-xs-4 col-lg-4">
Praesent laoreet purus in elementum.Praesent laoreet purus in elementum.Praesent laoreet purus in elementum. Praesent
</div>
</div>
</div>
I have a three column in a column-fluid container. My right and left column are fixed, but not scrollable though I have placed overflow-y:scroll
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
overflow-y:scroll;
}
.left {
float:left;
}
.right {
float:right;
}
.fixed-fixed {
margin: 0 240px;
}
http://www.bootply.com/UfYNttcqhS#
How can I make my right and left column scrollable vertically.
The scrollbars appear disabled because there is no content to be scrolled.
I changed your CSS...
.row > .sidebar-fixed{
position: absolute;
top: 0;
width: 220px;
height: 100%;
overflow-y:scroll;
}
.row > .sidebar-fixed.left{
left:0;
}
.row > .sidebar-fixed.right{
right:0;
}
.fixed-fixed {
margin: 0 240px;
}
...added filler text...
<div class="well sidebar-fixed left">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div><!--/.well -->
...and updated the demo.
You have to place some content inside of that div and make the height on it more than the height of the scrollable div like this:
<div class="well sidebar-fixed left">
<div id="overflow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nisl faucibus lacus malesuada lobortis. Nulla sapien diam, convallis quis arcu hendrerit, tempus facilisis nibh. Donec interdum lacus eget sapien facilisis, et congue urna tristique. Maecenas ante tellus, euismod quis adipiscing sed, elementum in lorem. Donec venenatis dui a lobortis iaculis. Curabitur pulvinar blandit magna at dictum. Maecenas nec sodales eros, at vestibulum mauris. Phasellus vitae ante at erat semper gravida. Maecenas tincidunt elementum eros, ut feugiat justo viverra a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla gravida elementum dui eu aliquet. Nunc vulputate urna fringilla, mollis ipsum non, fermentum diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam leo tellus, auctor id justo nec, lobortis dignissim metus. Phasellus eleifend ac lacus non blandit. Quisque eu purus sagittis, gravida odio ut, congue diam.</p>
</div>
</div>
And in the css:
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
height: 200px;
overflow-y:scroll;
}
Here is a more Bootstrap-friendly (responsive grid) approach:
Bootply Demo
CSS:
html, body {
height: 100%;
}
.container-fluid.main {
padding-top: 50px;
height: 100%;
}
.container-fluid.main>.row {
height: 100%;
}
.left, .right {
height: 100%;
background-color: yellowgreen;
overflow: auto;
}
#media (max-width: 767px) { /*set to where your columns will collapse to 100%*/
.left, .right {
height: auto;
}
}
HTML:
<div class="container-fluid main">
<!-- Example row of columns -->
<div class="row">
<div class="col-sm-2 left">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-sm-8">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-2 right">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
</div>