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">
Related
Having trouble with columns. Trying to get an column with an image and a column with text and background next to each other.
Here is the result I would like
Here is what I am getting (fail)
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div id="container1">
<div id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum.
</p>
<!-- Column one end -->
</div>
<div id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
</div>
</div><!-- End .primary-content -->
You could use flexbox here to get started.
Add...
#container1 {
display: flex;
}
Guide to flexbox here.
fiddle
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
#container1 {
display: flex;
}
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.
<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div id="container1">
<div id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus.
Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam
scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum. .
</p>
<!-- Column one end -->
</div>
<div id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
</div>
</div>
<!-- End .primary-content -->
If you don't want to use any framework(like bootstrap) just add float to your container and add overflow:hidden to the parent container.
<div class="wrapper">
<div class="col-1">Your content here</div>
<div class="col-2">Your content here</div>
</div>
.wrapper {
overflow:hidden;
}
.col-1, .col-2 {
float:left;
width: 50%;
}
Here you go. Tested and works perfect:
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.<br>It's a hub for
awesome live music, out of this world art, a booming tech
scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div style="display: flex" id="container1">
<div style="flex: 1" id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
id ante pellentesque, ullamcorper sapien vel, sagittis tellus.
Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id
nunc laoreet eleifend. Integer aliquet massa vitae auctor
rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean
sit amet orci fringilla, egestas eros ornare, dignissim magna.
Duis commodo felis sit amet lacus congue fermentum.
Pellentesque tincidunt semper nibh vel posuere. Integer tempus
leo ut diam scelerisque fermentum in id tortor. Vestibulum et
condimentum arcu. Morbi vitae sem nec lectus egestas
tristique. Cras hendrerit maximus purus eu tempus. Suspendisse
nec nisi ipsum. .
</p>
<!-- Column one end -->
</div>
<div style="flex: 1" id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
Flexbox is a good solution to this. Just set the container1 to display: flex
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
#container1 {
display: flex;
background-color: #E9CCA9;
}
#Capitalbuilding {
background-color: #4e4e4e;
width: 40%;
}
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div id="container1">
<div id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum. .
</p>
<!-- Column one end -->
</div>
<div id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
</div>
</div><!-- End .primary-content -->
Ok. I am trying to achieve a "Medium.com style" image alignment, making it larger than it's container and full width. I did what I knew I had to do with the CSS:
img {
position: relative;
left: 50%;
height: auto;
margin: 0px 0 0 -50vw;
width: 100vw;
max-width: 100vw;
}
It almost do what I want it to do, except that, when I use all the 12 grids of Bootstrap, for some reason, it adds a border on the left, as you can see in this fiddle: https://jsfiddle.net/35f4ntqq/
If I change the col-sm-11 to col-sm-10 (making it 11 cols in total), though, it works perfectly fine.
What am I missing here? Or doing wrong...? :/
I think you can changies margin property for img tag:
Like this:
img {
position: relative;
left: 52%;
height: auto !important;
margin: 0px 0 0 -55vw;
width: 100vw;
max-width: 100vw !important;
height: auto !important;
}
See Updated Bootply
You can use container-fluid to achieve the desired result.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
img {
height: auto;
width: 100%;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1">
Boo
</div>
<div class="col-sm-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
https://jsfiddle.net/glebkema/pn8jbk8p/
try this.
"medium.com style"
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">
Boo
</div>
<div class="col-xs-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
<div class="col-sm-12">
<img class="img-responsive" src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
<div class="col-sm-12">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.
I am working on a small project whose front-end is built with the latest version of Bootstrap. I have my sections of the homepage, but I am stuck on making them behave the way I want.
<body>
<div class="container-fluid max-height">
<div class="row max-height">
<div class="col-md-2 col-sm-12 col-xs-12 site-nav">
<div class="row">
<div class="brand">
<a href="index.html">
<img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
</a>
</div><!-- .brand -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
</div><!-- .row -->
</div><!-- .col-md-2 -->
<div class="col-md-10 col-sm-12 site-content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 info-bar">
<h2>SOME TITLE</h2>
</div><!-- .col-md-12 -->
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
<p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
</div><!-- .col-md-6 -->
<div class="col-md-6">
<div class="article-photo">
<img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
</div>
</div>
</div><!-- .row -->
</div><!-- .col-md-10 -->
</div><!-- .row -->
</div><!-- .container-fluid -->
</body>
Here is a JSFiddle.
I would like the title bar and sidebar to stay where they are and not scroll with the content. The only thing I want scrolling is the content (in blue).
How can I achieve this purely with CSS in Bootstrap?
If that top section is to be part of a dynamic page I would read about the Bootstrap Navbar (http://getbootstrap.com/components/#navbar). A very powerful tool that will be more dynamic than simple scroll styling for your page.
For a simple answer to your current fiddle you'll need to set the scroll to overflow and set a fixed height on the div(s) that you want to scroll. Adding these css attributes to the scrolling divs does what you describe.
style="overflow: scroll; max-height: 100px"
Fiddle here: http://jsfiddle.net/xb6k5vth/1/
I cannot figure out why this bootstap code is overlapping the containers on top of each other. I have looked at some of the other people having this issue and I dont think my code has the same error. I think I might be writing css when I should be using bootstrap.
jsfiddle: http://jsfiddle.net/qqxudtst/1/
code:
<section class="section" id="homeHeader">
<div class="container-fluid">
<div class="background-img">
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="text-center">
<div class="row">
<div class='text-justify content-spacing col-lg-7 col-md-12 col-sm-12'>
<h2>SomeContest:</h2>
<h1>Before and After: A Story</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<a class="btn btn-default btn-block" id="submitVideo">Submit Video</a>
</div>
<div class="col-sm-6">
<p id="contactSupport">Questions? Contact support</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="tabContent">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
</div>
</section>
Any help/ideas would be appreciated, thanks.
-AA
Remove all of your position:absolute attributes. You're positioning all of these elements on top of each other.