I have a footer right now that will stick to the bottom of the page but when it runs up to content it will sit over top of it. I obviously want it to be pushed down by whatever container content it comes next to.
Here is a screenshot:
I would like the bottom of that table to push it down. Here is my CSS and HTML
BODY AND CONTAINER CSS
body {
color: $base-text-color;
margin: 0;
padding: 0;
background-color: $base-background-color;
}
.container {
max-width: 1200px;
margin: 18px auto 0;
text-align: center;
margin-bottom: 40px;
}
FOOTER CSS
.footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
APPLICATION HTML
<body>
<%= render 'shared/top_bar' %>
<div class="container">
<%= render 'shared/errors' %>
<%= yield %>
</div>
<%= render 'shared/footer' %>
</body>
I'm really stumped by this one and can't seem to find the answer! All help would be great thanks!
What you want is a sticky footer and not a fixed one. Fixed, the content will not push it. Sticky, it will remain at the bottom until it's pushed by content. Please beware that inserting a padding into the footer affects it's size and you have to adjust other measures for this to work correctly.
Please note that I added a padding of 20px to the .container so I had to increase 40px on the bottom margin and on the .push div.
I would also advise that you should use Footer element instead of a div .footer
Here is the code
CSS
html, body {
height: 100%;
margin:0;
padding:0;
}
.container {
max-width: 1200px;
text-align: center;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
overflow: auto;
padding:20px;
}
.push {
height: 80px;
margin-top: 0;
}
.footer {
height: 40px;
margin-top: 0;
width: 100%;
background: red;
border: 0;
}
HTML
<body>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam
<div class="push"></div>
</div>
<div class="footer">Footer</div>
</body>
http://codepen.io/luisalves/pen/ggZWGv
i have added css in your code from line 6
as your footer's height is fixed i have leveraged that fact
please read it and comment if you dont understand
body {
color: black;
margin: 0;
padding: 0;
background-color: green;
/*magic is here */
box-sizing: border-box;
min-height: 100vh;
position: relative;
padding-bottom: 40px;
/*magic ends here */
}
.container {
max-width: 1200px;
margin: 18px auto 0;
text-align: center;
margin-bottom: 40px;
}
.footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
lorem*10
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.</div>
<div class="footer">i am here</div>
</body>
</html>
try adding different div for footer...
something like this
<html>
<body>
<form id="form1" runat="server">
<div>
..some code..
</div>
<div id="footer">
<p align="center">Copyright ©</p>
</div>
</form>
</body>
</html>
Related
I want to have 3 divs with text vertically aligned top, middle and bottom of the parent with an image on the right.
If possible, I need to support older browsers as well. Sorry if this is simple, I have very little experience with css.
I think you want something like this:
.container{
width: 500px;
height: fit-content;
display:flex;
background-color: #ff0000;
padding: 20px;
border: 1px solid black;
}
.textPart{
display:flex;
flex-direction:column;
width:50%;
background-color: rgba(255, 255, 255, 0.5);
}
.text{
border: 1px solid black;
padding:10px;
}
.imgPart {
background-image: url('https://www.placehold.it/200x400');
width: 50%;
border: 1px solid black;
}
<div class="container">
<div class="textPart">
<div class="text"><h1>Some text here</h1></div>
<div class="text"><h1>Some text here</h1></div>
<div class="text"><h1>Some text here</h1></div>
</div>
<div class="imgPart"></div>
</div>
The key point here is display: flex.
And about the browser support, most of the browsers, including may old versions, also support flexbox with or without the prefix -webkit-. (src- caniuse.com)
I used "float" property for this problem. because it is simple and have a good browser support. but you must notice that the width of two column is variable according to image size. you could use any image you want in "img" tag.
*, *::after, *::before {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#whole-parent {
background-color: rgb(120,110,122);
color: #fff;
}
/* these two class is directly related to layout */
.clearfix::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
padding: 5px;
}
/* ------------- */
.wid1 {
width: 70%;
}
.wid2 {
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>three divs</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="whole-parent" class="clearfix">
<div class="column wid1">
<div>
<h1>div1</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
<div>
<h1>div2</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
<div>
<h1>div3</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
</div>
<div class="column wid2">
<img src="book1.jpg" alt="an image">
</div>
</section>
</body>
</html>
With standard behavior of overflow: scroll the padding-bottom is in the bottom of the scrolled block. But how can I make padding-bottom fixed, so odd text will not appear right after bottom border
https://jsfiddle.net/nvg23rp8/6/
body{
background-color: green;
}
.wrapper{
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-top: 20px;
padding-bottom: 20px;
overflow-y: scroll;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.inner{
background: blue;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
CSS is all about illusions!
Make an outer container and give it some padding to give the required illusion. I couldn't get your Fiddle, so I made a new one. Here you go: https://jsfiddle.net/z9ztcstb/
.container {
position: relative;
}
.text-container {
background: red;
padding: 10px;
}
.text {
height: 100px;
/* background: green; */
overflow: scroll;
}
<div class="container">
<div class="text-container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In
quae earum recusandae beatae, optio. Incidunt velit corporis nesciunt, soluta dolor laborum eius recusandae perspiciatis. Est alias minima hic iure, incidunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam alias suscipit, quia, vitae consectetur laudantium nisi itaque odio aliquam dolorem voluptas atque, eos perspiciatis. Excepturi cumque doloribus ad, itaque tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quaerat saepe possimus fuga consequuntur, dolorum facere harum, ullam id similique tempora magni non dolores. Praesentium esse omnis quia eaque quos!
</div>
</div>
</div>
I would suggest that you put the scroll on the inner box, this would be the most effective way of preventing unwanted overflow of text below the blue background. You could do this without the 'inner' css. Try this out. fiddle here
Hope this helps
$('.wrapper').on('scroll', function() {
$('.inner').scrollTop($(this).scrollTop());
});
body {
background-color: green;
}
.wrapper {
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-bottom: 30px;
position: fixed;
left: 10%;
top: 10%;
}
.middle {
margin: 20px;
padding: 2px 5px;
height: 90%;
overflow-y: scroll;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
this will work:
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
</div>
<div class="border">
</div>
</div>
div.wrapper {
width:340px;
height:120px;
background-color:#ccc;
overflow:auto;
position:relative;
}
div.border {
border:solid 10px red;
height:100px;
position:fixed;
width:300px;
height:100px;
top:0;
left:0;
}
div.content{
z-index:1;
margin:10px;
}
The main point is to put the border outside of the .wrapper container.
The only issue I can see here is you cannot use mouse wheel to scroll .content inside .wrapper, since it has been overlapped by .border
Here is a JSFiddle link you can see: https://jsfiddle.net/zsydyc/pw9jz5s2/3/
I think this might be helpful.
body{
background-color: green;
}
.wrapper{
height: 140px;
width: 300px;
background: transparent;
border: 1px solid #000;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
height: 100px;
}
.inner{
background: blue;
overflow-y: scroll;
height: 100%;
}
::-webkit-scrollbar {
width: .5rem;
background: inherit;
}
::-webkit-scrollbar-thumb {
background: #f00;
border-radius:.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
I have an issue on a test web-page i'm creating for practice where i have two div elements one above the other, however the top one (.item in the CSS) is 'under lapping' the bottom one (.wide and .img-span in the css) and sticks out on the other-side for some reason. I have fiddled around with my CSS and HTML for a while and i cant fix it.
CSS:
.item {
padding-left: 20%;
padding-right: 20%;
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
margin: 0;
}
.item p {
font-size: 18px;
}
.img-span {
padding: 0;
margin: 0;
width: 100%;
}
.wide {
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
HTML:
<div id="first" class="item">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
</p>
</div>
<div id="img-span">
<img src="img/board-911636.jpg" class="wide">
</div>
Setting display: block on the img fixes your problem.
I have a div section (#section1) that I want to remain 100% height, but to expand if need be to fit other content. The width is 100%. I have another div below that one as you scroll down the page (#section2), same principle 100% height and width, with the height expanding as needed. My problem is, the second one won't push all the way down, due to the first div being absolute. Instead it is has the first section on top of it. Does anyone have any advice? I'm using Bootstrap 4 for this project.
header {
line-height: 100px;
height: 100px;
width: 100%;
background: #f3f3f3;
position: fixed;
top: 0;
z-index: 2;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
height: 100%;
}
body {
background: none;
height: 100%;
}
p {
font-size: 20px;
margin: 0;
}
#section1 {
padding: 0;
margin: 0;
background-color: #292929;
margin: 0 auto;
min-height: 100%;
width: 100%;
position: absolute;
}
#section2 {
padding: 0;
margin: 0;
background-color: red;
margin: 0 auto;
min-height: 100%;
width: 100%;
}
#section2 p {
background-color: inherit;
max-width: 600px;
margin: 0 auto;
}
#section2 a {
background-color: #2eb233;
color: #ffffff;
font-weight: 700;
font-size: 20px;
padding: 15px 40px;
}
#section2 a:hover {
text-decoration: none;
background-color: hsl(122, 79%, 38%);
}
<!--Header-->
<header></header>
<!--Section 1-->
<div id="section1">
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6">
<div id="quote-section">
<h1>What our customers <br> have to say...</h1>
<div id="quote-box">
<p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat eos quas, similique tempora at magni ab cumque blanditiis labore provident quae dolorem optio nobis vel debitis quasi, rem recusandae!"</em>
</p>
<p id="quote-location">(Location)</p>
</div>
<a class="call-to-action" href="#">Find A Location</a>
<div id="border-section-off"></div>
<a class="call-to-action" href="#">Order Our Home Study Course</a>
</div>
</div>
</div>
</div>
</div>
<!--Section 2-->
<div id="section2">
<h1>Who We Are...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Consequuntur iste suscipit deserunt ipsum officia, rerum. Aliquam distinctio, quia placeat praesentium, nesciunt fugiat, provident assumenda voluptates voluptate esse totam, nam vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Magni quia officia quasi voluptas animi ex delectus reiciendis, commodi, voluptatum nemo, ullam sequi saepe! Ut dicta quidem odit cupiditate. Reprehenderit, id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam in laborum nobis
harum aspernatur, quidem repellat non nostrum, error dolore beatae saepe deserunt atque nemo repudiandae praesentium dolorem. Autem?</p>
</div>
Why you need section 1 to be absolute, if you remove that attribute everything will work fine run this code below:
header {
line-height: 100px;
height: 100px;
width: 100%;
background: #f3f3f3;
position: fixed;
top: 0;
z-index: 2;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
height: 100%;
}
body {
background: none;
height: 100%;
}
p {
font-size: 20px;
margin: 0;
}
#section1 {
padding: 0;
margin: 0;
background-color: #292929;
margin: 0 auto;
min-height: 100%;
width: 100%;
//position: absolute;
}
#section2 {
padding: 0;
margin: 0;
background-color: red;
margin: 0 auto;
min-height: 100%;
width: 100%;
}
#section2 p {
background-color: inherit;
max-width: 600px;
margin: 0 auto;
}
#section2 a {
background-color: #2eb233;
color: #ffffff;
font-weight: 700;
font-size: 20px;
padding: 15px 40px;
}
#section2 a:hover {
text-decoration: none;
background-color: hsl(122, 79%, 38%);
}
<!--Header-->
<header></header>
<!--Section 1-->
<div id="section1">
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6">
<div id="quote-section">
<h1>What our customers <br> have to say...</h1>
<div id="quote-box">
<p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat eos quas, similique tempora at magni ab cumque blanditiis labore provident quae dolorem optio nobis vel debitis quasi, rem recusandae!"</em>
</p>
<p id="quote-location">(Location)</p>
</div>
<a class="call-to-action" href="#">Find A Location</a>
<div id="border-section-off"></div>
<a class="call-to-action" href="#">Order Our Home Study Course</a>
</div>
</div>
</div>
</div>
</div>
<!--Section 2-->
<div id="section2">
<h1>Who We Are...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Consequuntur iste suscipit deserunt ipsum officia, rerum. Aliquam distinctio, quia placeat praesentium, nesciunt fugiat, provident assumenda voluptates voluptate esse totam, nam vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Magni quia officia quasi voluptas animi ex delectus reiciendis, commodi, voluptatum nemo, ullam sequi saepe! Ut dicta quidem odit cupiditate. Reprehenderit, id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam in laborum nobis
harum aspernatur, quidem repellat non nostrum, error dolore beatae saepe deserunt atque nemo repudiandae praesentium dolorem. Autem?</p>
</div>
Depending on which browsers you need to support, you could ditch position absolute and min-height from the sections and use:
height: 100vh;
Which would set the sections to 100% of the browser viewport's height.
It's a fairly recent addition though, so check http://caniuse.com/viewport-units/
I have been trying to learn CSS from the book by Jon Duckett.
I'm learning the concepts of positioning and floats. When I tried to implement them,
<head>
<title>Try</title>
<style type="text/css">
div#container {
width: 400px;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: 800px;
padding: 0px 5px;
right: 7%;
position: absolute;
top: 10px;
}
p {
width: 300px;
}
p#right {
float: right;
}
p#clear {
clear: right;
}
p#cont_2_p {
width: 700px;
}
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis aliquam nihil quas soluta nemo ad magnam animi! Veritatis, magnam, vero, pariatur ducimus quibusdam ad sint nostrum architecto natus asperiores odio eum doloremque excepturi expedita veniam tenetur esse sapiente est unde molestiae error et dignissimos dolorem? Rem quas eius nesciunt repellat assumenda temporibus cumque aperiam.
</p>
<p id="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, sint, soluta ab explicabo labore vero placeat porro fugit tempore dolore deleniti libero sit quod reprehenderit.
</p>
<p id="clear">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, ullam.
</p>
</div>
<div id="cont_2">
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, distinctio, asperiores, maxime amet quidem doloribus repudiandae tenetur quod odio laborum at hic nemo eaque! Vero.
</p>
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dolorum, tempore, eveniet distinctio repellendus perspiciatis modi enim saepe officia voluptatem recusandae sed voluptas molestias itaque eius ex reiciendis voluptatum consequuntur architecto molestiae quos esse eaque minima minus velit dolore in voluptate qui vel sequi provident?
</p>
</div>
</body>
or this: http://jsfiddle.net/7qYYT/
it worked well on 100% zoom on a browser but when I zoomed in, the text on the right overlaps the text on the left. How do I overcome it?
It is because of position absolute of div#cont_2
The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
div#cont_2 {
width: 600px;
padding: 0px 5px;
float: right;
right: 7%;
/*position:absolute;*/
top: 10px;
}
And here you have set top:10px that sets the top of this div from 10px of parent element. That make overlapping of the other contents.
And of-course please used class instead of id selector in css. If you want to reuse that. As Id selector should be unique in the markup.
Js Fiddle
Two possible approaches:
Instead of setting a fixed width with pixels, set a relative width for the two containers using percentages:
div#container {
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: calc(66.667% - 10px); // taking padding into account, but this won't work IE<=8
padding: 0 5px;
right: 7%;
position: absolute;
top: 10px;
}
Use floats instead of positioning (with relative width, again):
div#container {
float: left;
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
float: right;
width: calc(66.667% - 10px);
padding: 0 5px;
}
There are other less supported methods as well, such as flex-box.
(BTW, don't use 0px; just use 0.)