I'm very new to this so I apologise if this is a simple thing. I seem to be unable to keep the bottom div inside the wrapper, even though it closes after. I've validated the code and this hasn't helped. Please can someone cast some light on where I'm going wrong? Many thanks in advance.
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:300|Raleway:300,700|Droid+Serif:700' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=0.95; maximum-scale=1.0; user-scalable=no;"/>
<link href="/css/simplegrid.css" rel="stylesheet" type="text/css" >
<link href="css/a_main_structure.css" rel="stylesheet" type="text/css" />
<link href="css/birthgently.css" rel="stylesheet" type="text/css" />
<link href="css/menu_styling.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Optima' rel='stylesheet' type='text/css'>
<style type="text/css">
a:link {
color: #8A8A8A;
text-decoration: none;
}
a:visited {
color: #8A8A8A;
text-decoration: none;
}
a:hover {
color: #5F5F5F;
text-decoration: none;
}
a:active {
color: #5F5F5F;
text-decoration: none;
}
body {
background-color: #F4F4F4;
background-repeat: repeat-x;
}
</style>
</head>
<body text="#000000" link="#0000ff" dir="ltr" lang="en-GB">
<div id="container">
<div id="content">
<div class="wrapper">
<div class="width_100_percent" align="center">
<div class="headerStretch">
<img src="images/birthgently-topstrip.jpg" width="960" height="232" alt="alt tag change me"/>
</div>
</div>
<div align="center">
<div class="menuback">
<div class="paddingtop8px">
<nav>
<ul align="centre">
<li>Home</li>
<li>Weekly Class</li>
<li>The Course</li>
<li>Hypnobirthing</li>
<li>Contact</li>
<li>Bookings</li>
</ul>
</nav>
</div>
</div>
</div>
<br />
<div class="width_100_percent">
<div class="width7_percent"> </div>
<div class="width86_percent"><div class="headerStretch"><img src="images/about-hypnobirthing.jpg" width="800" height="469" alt="alt tag change me" /></div></div>
<div class="width7_percent"> </div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left"><h1 class="contentheadings">The principles of Hypno-birthing</h1>
</div>
<p align="left" class="bodytext">Giving birth calmly, safely and gently is every woman's and every baby's birth right. A woman's body has been perfectly designed to give birth to her baby. Free of fear, stress and anxiety her body is able to work in synchrony with her baby to naturally produce a beautiful blend of birthing hormones. <br/>
<br/>
When a woman is calm and relaxed the muscles which assist in the birth her baby are able to work harmoniously and effectively which means she has an easier, more gentle birth that is often also accompanied by a significant reduction in pain. These wonderful birthing hormones and muscles help to ensure that a woman can have the amazing, beautiful and profound experience that nature intended birth to be.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> If the birth is calm, gentle & drug free for you, it's also calm, gentle & drug free for your baby - K Graves <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Hypno-birthing is not about training mothers to give birth. It is about helping woman to release fear and anxiety and it teaches them how to use self-hypnosis and relaxation so their bodies and minds can relax and they can birth their babies gently. <br />
<br />
Hypno-birthing is now widely recognised by birth professionals and is regularly discussed in the media. Hypno-birthing is commonly accepted as an effective approach to childbirth with many midwives training in the technique having witnessed 'hypno-births' first-hand. </p>
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The History of Hypno-birthing</h2>
</div>
<p align="left" class="bodytext">More natural and gentle approaches to childbirth including hypno-birthing began in modern times with the work, amongst others, of Dr Grantly Dick-Read, an obstetrician working in England in the early 19th century. His careful observations of women giving birth led him to develop the theory of the 'fear-tension-pain syndrome'.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left">
<p class="bodytext">Having witnessed women giving birth easily, calmly and comfortably he concluded that what made the process of birth painful was fear. Fear caused tension in the woman's body and disrupted the natural processes of labour and birth. Dr Dick-Read documented the negative effect of fear on childbirth. In his books he argued that childbirth did not have to be the painful ordeal that women had been led to believe they must suffer. He suggested that when fear is not present a woman can give birth comfortably and pain-free.</p></div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-left"><img src="images/about-hypno.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My dream is that every woman, everywhere, will know the joy of a truly safe, comfortable, and satisfying birthing for herself and her baby. Marie Mongan <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p><br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">Getting past fear</h2>
</div>
<p align="left" class="bodytext">One of the main elements of hypno-birthing is the removal of such fears and the use of positive images, positive language and positive affirmations about birth. Marie Mongon, an American hypnotherapist was one of the first people to use the phrase HypnoBirthing. She developed a teaching program for parents to be which she brought to the UK in the early 90's. Since then hypno-birthing has gained in popularity and many practitioners including Katherine Graves have gone on to adapt and enhance hypno-birthing techniques specifically for the UK.
There are now many hypno-birthing practitioners and whilst each have a slightly different approach the key elements of hypno-birthing remain the same - free of fear and tension a woman can give birth to her baby calmly, safely, gently.</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left"><h2 class="contentsubheadings">birthgently classes
</h2>
<ul type="square">
<li type="square" class="bullets">
<p class="bodytext">teaches deep relaxation which keeps you and your birth partner free of stress and fear</p></li>
<li type="square" class="bullets">
<p class="bodytext"> facilitates your body's production of powerful, natural pain relieving endorphins and feel good hormones</p></li>
<li type="square" class="bullets">
<p class="bodytext"> helps to shorten the length of the first stage of labour</p></li>
<li type="square" class="bullets">
<p class="bodytext"> reduces the need for surgical interventions</p></li> <li type="square" class="bullets">
<p class="bodytext">helps to keep baby calm and well oxygenated</p></li>
<li type="square" class="bullets">
<p class="bodytext"> eaves you and baby feeling calm but alert and able to fully experience those special first few hours together </p></li>
<li type="square" class="bullets">
<p class="bodytext"> empowers you and your birth partner to remain calm and in control even if there are unexpected circumstances</p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-lefttop"><img src="images/grey-baby.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The common view</h2>
</div>
<p class= "bodytext" align="left">
Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width50_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My son was born at 4:50am. I sat back having been on all fours, and just stared at him swimming up on his back, eyes open in the water. The midwife had to prompt me to pick him up. I came out of this trance-like state and I scooped him up and suddenly the power of speech returned and I felt euphoric. <br />
AB -hypno-birthing Mum <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="left" class="width35_percent">
<br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
</div>
</div>
</body>
</html>
I've had a look at this and cant see what is or isn't happening as desired. Take a look at this JSFIDDLE I've added border the main container and bottom div and it is sitting within the container.
Take a look yourself, add this css to your page to see whats going on
#container
{
border: 1px solid blue;
}
.width15_percent
{
border: 1px solid red;
}
Add overflow: hidden; to .wrapper
Related
When I am working on responsive then width 100% is not working, when I shrink my website. This problem is in my main section which is available after header section
my github repo
This is my HTML code
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="common.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bitter:wght#300;400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div>
<img src="images/yuewr.png" alt="" srcset="">
</div>
<div>
<ul>
<li>Home</li>
<li>About us</li>
<li>Structure</li>
<li>Impact</li>
<li>Contact us</li>
<li><button>ENROLL NOW <img src="images/arrow-right-up.svg"/> </button></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="first_section">
<div class="first_section_ka_image_div">
<img src="images/Frame-1.webp" alt="" srcset="" class="rotate">
</div>
<div class="first_section_ka_upper_div">
<h5>GO FROM <span class="text_gradient_color">ZERO TO PRO</span> IN JUST 3 MONTHS</h5>
<h1>THE BEST PLACEMENT FRIENDLY VIDEO EDITING COHORT MONEY CAN BUY.</h1>
<div><button>WATCH FREE WEBINAR <img src="images/arrow-right-up.svg"/></button></div>
<p class="text_gradient_color_white">*Applications for cohort-3 are open</p>
</div>
<div class="first_section-ka_opacity_div"></div>
</div>
<div class="second_section">
<div class="second_section_ka_upper_opacity_div"></div>
<div class="second_section_ka_middel_div">
<h5><span class="text_gradient_color">SEE WHO’S HIRING VIDEO EDITORS</span></h5>
<h1 class="font_w_s_c_t">OK, BUT WHERE’S THE DEMAND?</h1>
<div class="second_section_ka_middel_div_ka_img_section">
<img src="images/Vector-4.svg" alt="" srcset="">
<img src="images/Group-7.svg" alt="" srcset="">
<img src="images/Group-8.svg" alt="" srcset="">
<img src="images/Vector-2.svg" alt="" srcset="">
<img src="images/Vector-3.svg" alt="" srcset="">
<img src="images/Fill-1.svg" alt="" srcset="">
<img src="images/Group-2.svg" alt="" srcset="">
<img src="images/Group-1.svg" alt="" srcset="">
<img src="images/Group-3.svg" alt="" srcset="">
<img src="images/Vector-1.svg" alt="" srcset="">
<img src="images/gngm.png" alt="" srcset="">
<img src="images/Layer-6.png" alt="" srcset="">
<img src="images/Layer-5.png" alt="" srcset="">
</div>
</div>
<div class="second_section_ka_lower_opacity_div">
</div>
<p class="text_gradient_color_white">& almost all the top companies around the globe are looking for visual storytellers</p>
</div>
<div class="third_section">
<div class="third_section_ka_first_div">
<p><span class="text_gradient_color">ALL YOUR FAVES NEED A VIDEO EDITOR</span></p>
<h1 class="font_w_s_c_t">WANT TO WORK WITH TOP CREATORS?</h1>
</div>
<div class="third_section_ka_second_div">
<div class="third_section_ka_second_div_ka_img">
<div>
<img src="images/sharan.jpeg" alt="" srcset="">
<h4>Finance with Sharan</h4>
<h6>1.5M<br>
FOLLOWERS</h6>
</div>
<div>
<img src="images/trja.png" alt="" srcset="">
<h4>Mo Vlogs</h4>
<h6>11.2M<br>
FOLLOWERS</h6>
</div>
<div>
<img src="images/techburner.jpeg" alt="" srcset="">
<h4>Tech Burner</h4>
<h6>10M<br>
FOLLOWERS</h6>
</div>
<div>
<img src="images/shashank.jpeg" alt="" srcset="">
<h4>Shashank Udupa</h4>
<h6>162K<br>
FOLLOWERS</h6>
</div>
<div>
<img src="images/nas.jpeg" alt="" srcset="">
<h4>Nas Daily</h4>
<h6>10.7M<br>
FOLLOWERS</h6>
</div>
<div>
<img src="images/ab.jpeg" alt="" srcset="">
<h4>Abhi and Niyu</h4>
<h6>3.6M<br>
FOLLOWERS</h6>
</div>
</div>
<div class="third_section_ka_second_div_ka_p">
<p><em><span class="text_gradient_color_white"> Students from the past cohort are already working with some of these creators and many more creators are hiring from the next cohort.</em>
</span></p>
</div>
</div>
</div>
<div class="forth_section">
<div class="forth_section_first_div">
<h5><span class="text_gradient_color">CHANGING LIVES ONE VIDEO AT A TIME</span></h5>
<h1 class="font_w_s_c_t">THE IMPACT WE'VE CREATED</h1>
</div>
<div class="forth_section_second_div">
<div class="forth_section_second_div_ka_first_div">
<h5>A 3.2 Cr Impact on GDI</h5>
<p>We are creating a huge impact on India’s GDI - Gross domestic income. Students from Cohort-1 are earning a total sum of 3.2 Crore in salaries annually.</p>
</div>
<div class="forth_section_second_div_ka_second_div">
<h5>Massive 3000% ROI</h5>
<p>Cohort has almost 30x Return on Investment. Students have been placed with CTCs up to 10L Per annum with an average salary of 50,000 Per month.</p>
</div>
<div class="forth_section_second_div_ka_third_div">
<h5>High Placement Rates</h5>
<p>71% students who opted for placements from Cohort-1 got jobs with some of the biggest Indian creators. For Cohort-2 the expected placement rate is 86%</p>
</div>
</div>
</div>
<div class="fifth_section">
<div class="fifth_section_first_div">
<h5><span class="text_gradient_color">STUDENT TRANSFORMATION STORY</span></h5>
<h1 class="font_w_s_c_t">HERE'S WHAT OUR STUDENTS HAVE TO SAY</h1>
</div>
<div class="fifth_section_second_div">
<div>
<video src="video/1.mp4" controls></video>
</div>
<div>
<video src="video/2.mp4" controls></video>
</div>
<div>
<video src="video/3.mp4" controls></video>
</div>
</div>
</div>
<div class="sixth_section">
<div class="sixth_section_first_div">
<h5><span class="text_gradient_color">STUDENT TESTIMONIALS</span></h5>
<h1 class="font_w_s_c_t">READ SOME MORE STORIES</h1>
</div>
<div class="sixth_section_second_div">
<div class="sixth_section_second_div_ka_first_content">
<div>
<h5>Sumanyu Sood - Cohort 1</h5>
<p>Hello, Ocus Before I joined the cohort, I was into UX/UI design. Many of my friends were getting good gigs doing video editing. So, I always used to wonder how I can also get some good gigs. I had some experience with video editing before, but joining the cohort actually made me to sit down and devote time to the video editing. Ask any member of the cohort, The two classes that Martin took for sound design were the best. All three mentors were really helpful, from taking lectures to clearing up doubts in zoom chats. The remedial classes were organized for the beginners to cope up with the softwares, really appreciate that. By the end of the cohort, I'm capable enough to edit different types of videos and I feel I'm applying lot of stuff I learned while designing into video editing I received several placement offers, and Ocus assisted me in sorting out all my queries regarding the placements with a quick personal call. The networks I was able to create through the community are also absolutely priceless, and I'm so happy that Aevy and the team organized this cohort to inspire this community to learn together and form wonderful relationships. I just want to thank you Ocus, Martin and Varun and everyone from the aevy team to make this cohort possible.</p>
</div>
<div>
<h5>Dileep Reddy - Cohort 2</h5>
<p>I had the privilege of joining the Cohort and I can say with certainty that it has been a game-changer for me. The network I've gained access to, which includes India's top editors, content creators, and freelancers, has been invaluable. My life took a turn for the better when I was offered an internship at Aevy, made possible through the mentorship of great leaders like Varun Mayya, Kuntur Sir papa ocus, and Martin. Their guidance continues to shape my present and future. This investment has been life-changing and I highly recommend it to anyone looking to take their career to the next level.</p>
</div>
<div>
<h5>Tushar Agarwal - Cohort 1</h5>
<p>Hey Shirsh! I just wanted to tell you that I got my first stipend as a "video editor" credited today and I really want to thank you mentors and the aevy team for giving this
opportunity to us to learn the skill. TYSM!</p>
</div>
</div>
<div class="sixth_section_second_div_ka_second_content">
<div>
<h5>Rohit Tarale - Cohort 1</h5>
<p>I joined this cohort because I just wanted to learn something new, didnt expect it to be so great. I had never edited before on premiere. Best part for me was everything was taught from scratch, I learnt a lot and the learning skyrocketed after I joined as an intern. Trust me investing in this cohort was 1000% worth</p>
</div>
<div>
<h5>Neeraj - Cohort 1</h5>
<p>Hey bro, first of all i would like to thanks you for this cohort, if you wouldn't have called me, to main cohort main part nhi leta but u told me the benefits and all and so i decided to take part. And now yesterday i got hired by a agency, which works with like 15 big FIFA Youtube creators. 2:44 PM First two months will be internship with stipend of 15k and after performing well in intership they'll offer me a full time role with base pay of 30k and with more time and experience it will be 50k and could go upto like 70k too.</p>
</div>
<div>
<h5>Sumit - Cohort 2</h5>
<p>I'm glad to inform you that, I'm hired by Swarup Rao as a Full time Video Editor at High Income Tribe. Offer letter just came in. I'm going to be moving to Bangalore and be there by Next Sundav. Grateful for all the opportunities and offers you helped me with. Because of which I was able to choose the best. A big big thanks to you, mentors & Especially all Fellow community members from cohort who helped in everything to be the best version of myself. Grateful for Everything ✨🙌</p>
</div>
<div>
<h5>Harshith Burjurkar - Cohort 2</h5>
<p>This cohort was the YouTube industry break-in for me, it not only turned me into a professional editor but also
taught me how content industry actually works. Before this cohort I struggled with editing as the tutorials on YouTube were unstructured and the Return Of Investment I got from this cohort is at least 100x. Now I am not only good at editing, but also got to know how to
curate a good video, hook the audience better, mimic editing style of top YouTubers. Now I understand the power Visual storytelling which was taught by best in industry mentors Like Ocus, Martin, Varun Kuntoor.</p>
</div>
</div>
</div>
</div>
<div class="seventh_section">
<div class="seventh_section_first_div">
<div class="sixth_section_first_div_ka_content_div">
<h5><span class="text_gradient_color">FUTURE OF CONTENT IS VIDEO</span></h5>
<h1 class="font_w_s_c_t">WHY ARE WE DOING THIS?</h1>
<p class="text_gradient_color_white">
We are a group of visual storytellers who came together with one goal in mind - create the Best Videos the internet has ever seen. Children of digital age -we live and breathe YouTube and have built one of India's fastest growing infotainment Youtube channels - AevyTV.
<br><br><br>
Along the journey we realized that there are many creators like us who want to create top notch content but don’t have the right resources or mentors to guide them — The state of video education is broken.
<br><br><br>
That’s why we decided to build an ecosystem where you get access to the top video creators and editors and also get to learn the whole process of video content creation end to end. From scripting, storyboarding, shooting, editing, sound design, performance metrics, Youtube analytics — we will teach you how to think and build like the top 1% video producers in the world.
</p>
</div>
</div>
<div class="seventh_section_second_div">
<div class="sixth_section_first_div_ka_video_div">
<video src="video/2.mp4" loop controls></video>
</div>
</div>
</div>
<div class="eight_section">
<div class="eight_section_first_div">
<h5><span class="text_gradient_color">THE APPLICATION LAYER : TOOLS & SKILLS</span></h5>
<div><h1 class="font_w_s_c_t">CUT THE BS SHORT! TELL ME WHAT TOOLS AM I GOING TO MASTER?</h1></div>
</div>
<div class="eight_section_second_div">
<div class="eight_section_second_div_ka_backdiv"></div>
<img src="images/infographic.svg" alt="" srcset="">
</div>
</div>
<div class="nine_section">
<div class="nine_section_ka_first_div">
<h5><span class="text_gradient_color">WHAT MAKES US UNIQUE</span></h5>
<h1 class="font_w_s_c_t">YES, BUT WHY SHOULD I CHOOSE YOU?</h1>
</div>
<div class="nine_section_ka_second_div">
<div class="nine_section_ka_second_div_ka_content_div">
<div><img src="images/Group-120-1.svg" alt="" srcset=""></div>
<h5>Amazing Community</h5>
<p>Unlike all the other last-gen video editing courses out there, we give a community first learning experience. Not only do you learn, you make awesome life-long friends too.</p>
</div>
<div class="nine_section_ka_second_div_ka_content_div">
<div><img src="images/Group-125.svg" alt="" srcset=""></div>
<h5>Never seen before Placements</h5>
<p>Our placement rates surpass the placements of top tier Indian institutions. You focus on becoming a top editor, and we will focus on getting you a job with the best creators and companies.</p>
</div>
<div class="nine_section_ka_second_div_ka_content_div">
<div><img src="images/Group_1.svg" alt="" srcset=""></div>
<h5>Network of top Indian Creators</h5>
<p>We have a network of the top creators across the globe who are looking to hire from the next cohort. With Aevy, you get access and a chance to work with all the biggest names in the industry.</p>
</div>
</div>
</div>
<div class="ten_section">
<div class="ten_section_first_div">
<img src="images/rocket.png" alt="">
<img src="images/Union-1.svg" alt="" srcset="">
</div>
<div class="ten_section_second_div">
<h1 class="font_w_s_c_t">START YOUR JOURNEY TO BECOME A VIDEO EDITING NINJA</h1>
<button>ENROLL NOW <img src="images/arrow-right-up.svg" alt="" srcset=""></button>
</div>
</div>
<footer>
<div class="footer_first_section">
<img src="images/yuewr.png" alt="" srcset="">
</div>
<div class="footer_second_section">
<div class="footer_second_section_contact">
<div class="footer_second_section_contactAll">
<div><img src="images/Frame-61.svg" alt="" srcset=""></div>
<div><p>+91 97409 81289</p></div>
</div>
<div class="footer_second_section_contactAll">
<div><img src="images/Frame-61-1.svg" alt="" srcset=""></div>
<div><p>info#aevytv.com</p></div>
</div>
</div>
<div class="footer_second_section_policy">
<div class="footer_second_section_contact">
<div class="footer_second_section_contactAll">
<div><img src="images/privacy1.svg" alt="" srcset=""></div>
<p>Privacy Policy</p>
</div>
<div class="footer_second_section_contactAll">
<div><img src="images/cs.svg" alt="" srcset=""></div>
<p>Customer Supprt</p>
</div>
<div class="footer_second_section_contactAll">
<div><img src="images/tos.svg" alt="" srcset=""></div>
<p>Terms OS</p>
</div>
<div class="footer_second_section_contactAll">
<div><img src="images/refund.svg" alt="" srcset=""></div>
<p>Refund Policy</p>
</div>
</div>
</div>
</div>
<div class="footer_third_section">
<p>© COPYRIGHT 2022 AEVY VENTURES PVT. LTD.</p>
</div>
</footer>
</main>
</body>
</html>
This might not be very useful, but I will still post it here.
Something is overflowing, and if I remember correctly overflows cause scrolling. I have found that it seems to be something about your div element with the class first_section, It's likely the cause is the H1 element within.
Hope this helps a little.
EDIT: It seems that most of the sections overflow.
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!
I'm working with a template, we have a background image in the wrapper, but when i'm viewing the website from a laptop 13'' screen, the text extends below the fold, the wrapper only covers above the fold, therefore my content isn't being displayed properly.
How can i fix this? Better yet, how can i make my content fit above the fold.
JSFiddle Link: http://jsfiddle.net/L72wwz7g/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>COMPANYNAME Photo Contest</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/colors/style-color-01.css" rel="stylesheet" />
<link rel="stylesheet" href="css/contact.css" />
<link rel="stylesheet" href="css/simple-line-icons.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<!-- Start Header -->
<div id="header">
<div class="container">
<div class="row">
<div class="span12">
<h1>
<a href="#">
<img src="images/logo.png" alt="COMPANYNAME" />
</a>
</h1>
<h2 class="menulink">
Menu
</h2>
<!-- Start Menu -->
<div id="menu">
<ul>
<li>
HOME
</li>
<li>
PHOTO CATEGORIES
</li>
<li>
PHOTOGRAPHY TIPS
</li>
<li>
CONTEST RULES
</li>
<li class="current">
ENTRY FORM
</li>
</ul>
</div>
<!-- End Menu -->
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Content -->
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<h1 style="color: #464f56">SHOW US YOUR
<b>BEST BEFORE AND AFTER</b> PHOTOS AND
<b>WIN PRIZES</b> IN THE COMPANYNAME PHOTO CONTEST</h1>
</center>
<p>The COMPANYNAME user community is a source of inspiration to us; your remarkable Before & After photos demonstrate the artistry that goes along with the science and technology to create striking results that change lives. To recognize our COMPANYNAME users and encourage you to show off your results, we're inviting you to enter your best Before & After photos into our photo contest.</p>
<p>Before & After images are a clear and dramatic way to tell your best patient stories. The COMPANYNAME Photo Contest is a celebration of these patient stories, and an invitation to you to share your results with the COMPANYNAME community.</p>
</div>
</div>
<div class="span6">
<div class="inner">
<br />
<br />
<br />
<br />
<img src="images/b-a-stacked.png" />
<br />
<br />
<span style="color: #464f56; font-size: 3em;">
<b>Prizes:</b>
</span>
<br />
<h2 style="color: #ffffff">
<b>4 First place Prizes!</b>
</h2>
<h3 style="color: #ffffff">
<b>$1,000 + Join the COMPANYNAME Facebook Wall of Fame!</b>
</h3>
<h3 style="color: #ffffff">
<b>In addition, choose:</b>
</h3>
<ul>
<li>
<span style="color: #ffffff;">
<b>A night out on the town</b>
</span>
</li>
<li>
<span style="color: #ffffff;">
<b>A chair-massage therapy for a day</b>
</span>
</li>
<li>
<span style="color: #ffffff;">
<b>$1,000 worth of Top Flight points</b>
</span>
</li>
</ul>
<h3 style="color: #ffffff">
<b>All photos we keep to use are worth $500!</b>
</h3>
<p style="font-size:12px">See
Terms and Condition for full details</p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- End content -->
<div class="clearfix"></div>
</div>
<div class="strip features">
<div class="container">
<div class="row">
<br />
<a name="categories"></a>
<h2 style="color: #0658a0">We invite you to submit Before & After photographs in these categories:</h2>
<ol>
<li>
<b>Benign Lesions</b>, such as Angiofibromas, Cutaneous Horn, Milia, Sebaceous Hyperplasia, Skin Tags, Syringoma and Xanthelasma</li>
<li>
<b>Benign Pigmented Lesions</b>, such as Benign Nevi, Dermatosis Papulosa Nigra and Keratoses</li>
<li>
<b>Other Dermatological Conditions</b>, such as Active Acne, Melasma, Poikiloderma, Rhinophyma, Rosacea, Port Wine Stain, Scars and Warts</li>
<li>
<b>Aesthetic Treatments</b>, such as Forever Bare Hair Removal, Forever Young BBL, Pores, Resurfacing, SkinTyte and Vertical Lip Lines</li>
</ol>
<br />
<div class="clearfix"></div>
</div>
</div>
</div>
<a name="rules"></a>
<div class="strip highlight strip-alt">
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<h2 style="color: #0658a0">Rules:</h2>
<ul>
<li>Please send before and after photos taken at the same angle, with the same lighting.</li>
<li>Please include condition treated, modality used, settings, number of treatments, and how long after the treatment the photo was taken</li>
<li>Photos submitted need to be
photo-released. We may use your photo in upcoming campaigns!</li>
</ul>
<p>Please feel free to enter as many photos as you'd like. Good luck! We're looking forward to seeing your photos!</p>
</div>
</div>
<div class="span6">
<div class="inner">
<img src="images/b-a-pic.png" />
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="strip highlight">
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<center>
<h2 style="color: #0658a0">The benefits of
<span style="color: #000000">Good</span> </br>Clinical
<span style="color: #000000">Photography</span></h2>
</center>
<center>
<object id="flashObj" width="486" height="412" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0">
<param name="movie" value="http://c.brightcove.com/services/viewer/federated_f9?isVid=1" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="videoId=3721169588001&playerID=96360168001&playerKey=AQ~~,AAAAFkZnkSk~,IiQ79d9fntlYzbIBNabTKGnz_-W-KulR&domain=embed&dynamicStreaming=true" />
<param name="base" value="http://admin.brightcove.com" />
<param name="seamlesstabbing" value="false" />
<param name="allowFullScreen" value="true" />
<param name="swLiveConnect" value="true" />
<param name="allowScriptAccess" value="always" />
<embed src="http://c.brightcove.com/services/viewer/federated_f9?isVid=1" bgcolor="#FFFFFF" flashvars="videoId=3721169588001&playerID=96360168001&playerKey=AQ~~,AAAAFkZnkSk~,IiQ79d9fntlYzbIBNabTKGnz_-W-KulR&domain=embed&dynamicStreaming=true" base="http://admin.brightcove.com" name="flashObj" width="486" height="412" seamlesstabbing="false" type="application/x-shockwave-flash" allowfullscreen="true" swliveconnect="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />
</object>
</center>
</div>
</div>
<a name="tips"></a>
<div class="span6">
<div class="inner">
<h2 style="color: #0658a0">Photography
<span style="color: #000000">tips:</span></h2>
<ul>
<li>Make sure you are using a high quality camera with a good lens.</li>
<li>Mount the camera on a tripod.</li>
<li>Use the highest resolution possible for your pictures.</li>
<li>Make sure there are minimal distractions in the background. Shooting on a black background show the best results.</li>
<li>Isolate the treatment area. When shooting the face, use a headband to hold back hair. Have the patient wear a black drape - light can reflect off of bright colors.</li>
<li>Put a marker on the wall for patients to look at.</li>
<li>Always shoot the pictures from the same distance.</li>
<li>Make sure the lighting is always coming from the same direction.</li>
<li>Light above the patient will show the most texture - diffuse light with a soft box or with umbrellas.</li>
<li>Do not set the light up at the same angle as the lens that is shooting the picture.</li>
<li>Do not use a direct flash.</li>
<li>Be consistent with the your images. Be aware of :
<ul>
<li>Lighting</li>
<li>Patient position</li>
<li>Camera</li>
<li>Camera position</li>
<li>Patient preparation</li>
<li style="list-style: none; display: inline">
<ul>
<li>Clothing</li>
<li>Jewelry (preferably none)</li>
<li>Make-up (preferably none)</li>
</ul>
</li>
</ul></li>
<li>Make sure you are processing the photos in the same way.</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="strip highlight strip-alt">
<div class="container">
<div class="row">
<div class="span12">
<div class="inner">
<a name="terms"></a>
<h2 style="color: #0658a0">Terms and Conditions:</h2>
<ul>
<li>There is no entry fee and no purchase necessary to enter this competition.</li>
<li>Route to entry for the competition and details of how to enter can be found at www.COMPANYNAME.com/photocontest.</li>
<li>Closing date for entry will be March 31st, 2015. After this date the no further entries to the competition will be permitted.</li>
<li>No responsibility can be accepted for entries not received for any reason.</li>
<li>There will be four winners, one in each category listed above. The rules of the competition and the prize for each winner are as follows: First Place in each category: $1,000, as well as recognition on the COMPANYNAME website and Facebook page, and ONE of the following: A night out on the town for your office staff, hosted by your sales representative OR chair-massage therapist for a day (not to exceed $1,000) OR $1,000 in COMPANYNAME Top Flight Points. We will compensate entrants $500 for any photo we keep and use.</li>
<li>COMPANYNAME, Inc. reserves the right to cancel or amend the competition and these terms and conditions without notice in the event of a catastrophe, war, civil or military disturbance, act of God or any actual or anticipated breach of any applicable law or regulation or any other event outside of COMPANYNAME's control. Any changes to the competition will be notified to entrants as soon as possible.</li>
<li>COMPANYNAME is not responsible for inaccurate prize details supplied to any entrant by any third party connected with this competition.</li>
<li>No cash alternative to the prizes will be offered.</li>
<li>Winners will be chosen by a panel of judges appointed by COMPANYNAME.</li>
<li>The winner will be notified within 28 days of the closing date. If the winner cannot be contacted or do not claim the prize within 14 days of notification, we reserve the right to withdraw the prize from the winner and pick a replacement winner.</li>
<li>COMPANYNAME will notify the winner when and where the prize can be collected.</li>
<li>COMPANYNAME's decision in respect of all matters to do with the competition will be final and no correspondence will be entered into.</li>
<li>The winner agrees to the use of his/her name and image in any publicity material.</li>
<li>Entry into the competition will be deemed as acceptance of these terms and conditions.</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
</div>
</html>
It looks like background-size: cover on wrapper is your problem.
Change it tobackground-size: containand get rid of height:100% on body.
That will fix your issue.
I have been working on creating a website for a family company. It is mostly created, however I cannot get it to work in Chrome or Safari. Specifically, the links to go from page to page do not work. When clicking on the tabs on the left side, or the logo at the top, you should be directed to a different page. This works perfectly on IE. However, they do not work at all in the other 2. I have looked and looked and can't find a reason why. If anybody could help, it would be greatly appreciated.
I realize that the tabs are not uniform in Chrome or Safari as they are in IE. That is just not as important an issue to fix at the moment.
Here is the HTML for one of the pages so you can see what I have done and where I have messed up.
<!DOCTYPE html>
<html>
<head>
<title>
BERK Consulting LLC
</title>
<style type="text/css">
a:link {color:white; }
a:visited{color:white; }
a:hover {color:white; }
body {background-color:#F2E8DE}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;">
<p style="font-size: 18pt; text-align: justify; padding-top: 200px; padding-left: 200px;">
BERK was founded on the desire to remove the bureaucracy, complexity, and hidden agendas from consultancy. When you deal with BERK, you’re dealing directly with the expertise, not a salesperson or a subcontracting agency. <br /> <br />
Our down-to-earth approach combined with extensive 'in the seat' supply chain expertise allows us to advise you on key supply chain evolution decisions, allowing you to maintain focus on managing your business. <br /> <br />
We have eliminated the green beans from our team so that we can establish sustainability in your team and at an affordable rate.
</p>
<p style="text-align: right; font-size: 20pt;"> <strong>
...Securing the Last Piece® <br />
<img src="http://berkllc.com/images/LinkedIn2.png" alt="Follow Us" style="float:right;" width="150px" />
</strong> </p>
</div>
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;">
<img src="http://berkllc.com/images/BERKPic1.jpg" alt="BERK" />
<p style="font-size:11pt; padding-top:50px; ">
<span style="font-family:'Copperplate Gothic Bold'; ">
Home <br /> <br />
Who We Are <br /> <br />
What We Do <br /> <br />
Who We've Helped <br /> <br />
Our Network <br /> <br />
What Are You Missing <br /> <br />
Contact Us <br />
</p>
</span>
</div>
<div id="blank" style="width:100%; padding-top:1px;">
</div>
<div id="Legal1" style="background-color:#1F497D; position: absolute; padding-top:125px; width:994px; text-align:center;">
<table id="Legal2" border="0" style="border-collapse:collapse; font-size:8pt; color:white; margin-left: auto; margin-right: auto;" cellpadding="10px">
<tr>
<th style="cursor: pointer;" onclick="location.href='index.html'">
Home
</th>
<th style="cursor: pointer;" onclick="location.href='BERKContactUs.html'">
Contact Us
</th>
<th style="cursor: pointer;" onclick="location.href='BERKDisclaimers.html'">
Legal Disclaimers
</th>
<th style="cursor: pointer;" onclick="location.href='BERKTrademark.html'">
Trademark/Privacy
</th>
<th style="cursor: pointer;" onclick="location.href='BERKSitemap.html'">
Site Map
</th>
</tr>
</table>
<p style="text-align:center; font-size:6pt; color:white;">
© 2009 BERK Consulting, LLC. All Rights Reserved.
</p>
</div>
</body>
</html>
This is sloppy but add
z-index: 900;position: relative;
to the style for:
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;z-index: 900;position: relative;">
and add
z-index: 1;
to the styles for
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;z-index: 1;">
On an unrelated note I would recommend giving this site or this site a visit if you want to learn good practices and style for html/css/javascript.
The problem is that your "Main" div is covering up the links. And just as I start typing this, I'm called away. In any case, do not trust IE to do this right. Trust Chrome first.
I currently have a box inside a box, but it is not centered around the text.
I'd like to center the box around the text so that the box does not run over empty space:
http://jsfiddle.net/infoed/nvVBU/ (css is in the jdfiddle) :
<DOCTYPE! html>
<html>
<head>
<title>fumblr.</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
<div id="navbar">
<ul>
<li><img src="img/toplogo.png"></li>
<li> <a> Fumblr </a> </li>
</ul>
</div>
<div id="content">
<div class="box">
<img src="img/heart.svg" height="18" width="18" />
<div class="userid">DogBountyHunter27</div>
<div class="headline">Been 10 Days off bread. Want to die</div>
<p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
</div>
<div class="box">
<img src="img/heart.svg" height="18" width="18" />
<div class="userid">Vader2307</div>
<div class="headline">Hilarious Link of Bill Gates Jumping over a chair</div>
<p>Type an address into your phone, and up will pop a step-by-step route from where you are to where you want to be. This is, in its way, magic. But it's magic that has, at this point, been rubbed and polished into a simple fact of life. The ease with... </p>
</div>
<div class="box">
<img src="img/heart.svg" height="18" width="18" />
<div class="userid">ShaqAttack</div>
<div class="headline">Is Insanity Wolf bad for the meme community?</div>
<p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
</div>
<div class="box">
<img src="img/heart.svg" height="18" width="18" />
<div class="userid">Jimmy Two Times</div>
<div class="headline">Fax machines making a comeback in Williamsburg</div>
<p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
</div>
<div class="box">
<img src="img/heart.svg" height="18" width="18" />
<div class="userid">SmoothieFanatic</div>
<div class="headline">Fifth Grader Expelled for bringing Siracha to school</div>
<p>Is there any doubt that cats are awesome? We love cats, and being Mashable and all, we know a thing or two about them. But is it even possible to put our feelings about cats into infographic form? You be the judge. Undaunted by such a Herculean task...</p>
</div>
</div>
</body>
</html>
I'm assuming you're talking about the "headline" divs. If so, just change the divs to spans. This will wrap the the words with no excess whitespace on the end.
<div class="headline">HEADLINE HERE</div>
Change to:
<span class="headline">HEADLINE HERE</span>
Hope that helps!