Height Of Div's Automatically Adjust?

[Ashley Webb]

Hi, I am a complete amateur, self taught at that. I registered on this forum ages ago in a moment of weakness. I try to work things out without asking for the answer, I like to learn instead of having it on a plate. Right now is one of those moments of weakness. I have made my first webpage from scratch (notepad++). I did it this way because I fancied a challenge. I soon relaised that if I was to learn a function or two of php I could knock out the sub-pages alot faster. I changed my page to index.php and have thus far only called the header. I'm working my way down... As it stands, my site is sectioned very simply (see this at www.holiday-anglesey.co.uk), every section of my site has set width divs, and 3 divs of set width inside them. I have so many unique div's it's silly. If I carry on this way my style sheet will have thousands of similar rules for loads of div's, each with a different name. I am wondering if I need to create all these uniquely named div's. Is it possible to have one div (say <div id="fullwidth">) and have the height set to auto. This way I could just use one set of style rules for #fullwidth with the height set to adjust automatically to fit the content inside it. Again, please look at my page to see what I mean) My question is this: Is it possible to have a div height adjust automatically according to whats inside it? I've read on loads of pages height:auto or leave height out alltogether. This isn't working for me! Any suggestions please? Also, is it possible to do what I described in the paragraph above? If you are able to offer a soltuion, would you take the time to explain it because I'd like to know why/how the solution works, not just that it does! Thanking you in advance.

[DarkxPunk]

First use class. Second you need it to be height="100%" for both the container and the inner div.Try that. If you need more of a plater let me know and I will code it for yeah.

[Ashley Webb]

Thank you friend! I remember something about classes when I read my first 'learn html and css' book. I never conisdered what it is and the difference between id and class. I've had a quick read up and it seems to be just what I needed to know! Thankyou very much. I will get back to you once I have made classes and if your height solution works for me!

[Ashley Webb]

I chnaged my first div to a class. I changed the height to 100% and it made my div a whole page high.

[DarkxPunk]

Odd. Can you zip the code and send it to me so I can have a look?

[Ashley Webb]

http://www.holiday-anglesey.co.ukhttp://www.holiday-anglesey.co.uk/styles/homepage.css

[Don E]

There's nothing wrong with using ID's. Switching to class really makes no difference not unless a lot of the elements on a page are going to use/have the same properties applied to it. If however you have a lot of div's with id's that are all basically the same in their CSS properties, then yes switching those div's to classes makes sense because all you'll have is one selector with certain rules inside that apply to all those div's. Instead of writing so many rules for all the id's, you can write one rule(a class) and apply that class to all those div's.(That's if they are going to all have the same properties).Setting height to 100% takes up the available height pertaining to that element, where ever it is on the page. If a div inside the body element is set to 100% height, it will take up the whole page basically. If a div inside another div is set to 100% height, it will take up whatever height available to it by it's parent. If the parent div is set too 500px height, and you set the child div to 100% height, the child div will expand to the height of the parent div. Also by default, the height of an element, say a div, expand automatically whenever content inside it is being provided.

[Ashley Webb]

I've left out altogether and that messes things up!

[dsonesuk]

avoid using position relative, with top, left unless its really really necessary, most of the time float, padding, margin should suffice. Also h1 to h6 are block elements, the same as a div element itself, so wrapping these in div is not requred.

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Holiday Caravan on Anglesey | David & Katie Richards</title> <link href="/styles/homepage.css" rel="stylesheet" type="text/css"/> <meta name="norton-safeweb-site-verification" content="6vxtxsru9l58sc8xmg1p1huy-uaazfq124q2tx8xum569z8bfru6kwnfzg35yqoq5v3w820wvefblcd-wptuwomu7x7eb70br47q8byhbusbadlm9v7dv5ouz0rs9ijq" /> <script type="text/javascript">   var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-27938242-1']);  _gaq.push(['_setDomainName', '.holiday-anglesey.co.uk']);  _gaq.push(['_trackPageview']);   (function() {	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })(); </script>  <style type="text/css">body {	background-color: #EED0D6;	font-family: Arial,Helvetica,sans-serif;	padding: 10px;}#page {	background-color: #FFFFFF;	border-radius: 10px 10px 10px 10px;	margin: 0 auto;	padding: 10px;	width: 800px;}#header {	background: url("http://www.holiday-anglesey.co.uk/media/holiday-anglesey.png") no-repeat scroll right top transparent;	border-radius: 8px 8px 8px 8px;	min-height: 245px;	position: relative;	width: 780px;}#header h1 {	left: -70px;	position: relative;	text-align: center;	text-transform: uppercase;	top: 20px;}.navigation {	left: 0;	position: absolute;	top: 0;	width: 160px;	z-index: 1;}.navigation a {	border-color: #781351;	border-radius: 0 8px 4px 0;	border-style: solid solid solid none;	border-width: 1px 1px 1px 0;	color: #000000;	display: block;	margin: 9px 0;	padding: 8px 10px;	text-align: right;	text-decoration: none;}.navigation a:hover, .navigation a:active {	background: none repeat scroll 0 0 #EED0D6;	color: #781351;}.fullwidth {	background-color: #EED0D6;	border-radius: 10px 10px 10px 10px;	height: 240px;	margin: 0 auto;	position: relative;	text-align: center;	top: -10px;	width: 780px;} p {	font-size: 20px;}#feedback {	background-color: #EED0D6;	border-radius: 10px 10px 10px 10px;	height: 100px;	margin: 0 auto;	padding-top: 20px;	position: relative;	text-align: center;	top: 40px;	width: 760px;}#pagefeedback {	background-color: #FFFFFF;	border-radius: 20px 20px 20px 20px;	height: 430px;	margin: 20px auto;	position: relative;	width: 800px;}input {	background: none repeat scroll 0 0 #FFFFFF;	border: 1px solid #781351;	border-radius: 5px 5px 5px 5px;	font-family: times New Roman;	font-size: 15px;	padding: 4px;}textarea {	background: none repeat scroll 0 0 #FFFFFF;	border: 1px solid #781351;	border-radius: 5px 5px 5px 5px;	color: #000000;	margin-bottom: 10px;}h3 {	font-size: 18px;} .rounded_row {overflow:hidden; 	background-color: #EED0D6;	border-bottom-left-radius: 10px;	border-bottom-right-radius: 10px;	border-top-left-radius: 10px;	border-top-right-radius: 10px;	margin: 0 10px 10px;	text-align: center;} .rounded_row h2  {	background-color: #BA6E7B;	border-bottom-left-radius: 0;		border-bottom-right-radius: 0;	border-top-left-radius: 10px;	border-top-right-radius: 10px;	height: 30px;	text-align:center;	margin:0;	line-height:30px;	}	.rounded_row div { width:225px; } .rounded_row div.col1 {float:left;}.rounded_row div.col3 {float:right;} .rounded_row div.col2 {margin:20px auto;}.rounded_row .text {margin: 0 25px;}.rounded_row .pic{ margin: 20px;} .rounded_row .roundpic{border-radius: 10px 10px 10px 10px;} </style></head><body> <div id="page"> <div id="header" class="fullwidth"><div class="navigation">  <a href="#">Bookings</a>  <a href="#">Inside Caravan</a>  <a href="#">Outside Caravan</a>   <a href="#">Local Scenery</a>  <a href="#">Things To do</a>		</div><h1> <br /> HOLIDAY HOME <br /> TO LET <br /> ON ANGLESEY </h1></div> <div class="rounded_row"><h2> Welcome </h2><div class="col1 text"><h3> A delightful and charming 6 berth holiday caravan in approx 2 acres of land.<br/><br/>Set on the outskirts of Amlwch with beautiful sea and coastal views towards Bull Bay.</h3></div> <div class="col3 text"><h3> The caravan is close to all local amenties and is accessed via a small lane leading to a driveway with ample parking space. </h3></div> <div class="col2 pic"><img src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-static-caravan-outside.JPG" alt="" /></div></div>  <div class="rounded_row"><h2> Location </h2><div class="col1 pic"><img src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-sea-view-1.JPG" alt="" /></div><div class="col3 pic"><img src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-sea-view-2.JPG" alt="" /></div> <div class="col2 text"><h3> Amlwch is situated on the north eastern corner of Anglesey and is some fifteen miles from Holyhead and the same distance from Llangefni. </h3></div>  </div> <div class="rounded_row"><h2> Contact </h2><div class="col1 text"><p> Sue & Andre Rudolph, <br/> Cae Uchaf, <br/> Rhosybol, <br/> Anglesey, <br/> LL68 9TR ,<br/> Tel: 01407 832 800</p></div><div class="col3 text"><form method="post" action="contact.php"> Your Email: <br/> <input name="email" type="text"/> <br/> Message: <br/> <textarea name="message" rows="5" cols="20"> </textarea> <br/> <input type="submit"/> </form></div><div class="col2 pic"><img src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-sea-view-3.JPG" alt="" /></div> </div> <div class="rounded_row"><div class="col1 pic"><img class="roundpic" src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-lounge-1.JPG" alt="" /></div><div class="col3 pic"><img class="roundpic" src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-lounge-3.JPG" alt="" /></div><div class="col2 pic"><img class="roundpic" src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-lounge-2.JPG" alt="" /></div></div> </div> </body> </html>

[DarkxPunk]

I have fixed the problem and cleaned up the code. If you have any questions I am here. HTML

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Holiday Caravan on Anglesey | David & Katie Richards</title> <link href="styles/layout.css" rel="stylesheet" type="text/css"/> <meta name="norton-safeweb-site-verification" content="6vxtxsru9l58sc8xmg1p1huy-uaazfq124q2tx8xum569z8bfru6kwnfzg35yqoq5v3w820wvefblcd-wptuwomu7x7eb70br47q8byhbusbadlm9v7dv5ouz0rs9ijq" /> <script type="text/javascript">   var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-27938242-1']);  _gaq.push(['_setDomainName', '.holiday-anglesey.co.uk']);  _gaq.push(['_trackPageview']);   (function() {	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })(); </script> </head> <body> <div id="pageWrap"> <div id="header"><div id="nav">  <a href="">Bookings</a>  <a href="">Inside Caravan</a>  <a href="">Outside Caravan</a>  <a href="">Local Scenery</a>  <a href="">Things To do</a>  </div><div id="slogan"><h1><br />HOLIDAY HOME<br />TO LET<br />ON ANGLESEY</h1></div></div> <div class="container"><div class="title"><h2>Welcome</h2></div><div class="contentWrap"><div class="left"><h3>A delightful and charming 6 berth holiday caravan in approx 2 acres of land.<br/><br/>Set on the outskirts of Amlwch with beautiful sea and coastal views towards Bull Bay.</h3></div><div class="center">fdgdfg</div><div class="right"><h3>The caravan is close to all local amenties and is accessed via a small lane leading to a driveway with ample parking space.</h3></div></div></div> <div class="container"><div class="title"><h2>Location</h2></div><div class="contentWrap"><div class="left">dfdf</div><div class="center"><h3>Amlwch is situated on the north eastern corner of Anglesey and is some fifteen miles from Holyhead and the same distance from Llangefni.</h3></div><div class="right">dfdf</div></div></div> <div class="container"><div class="title"><h2>Contact</h2></div><div class="contentWrap"><div class="left"><p>Sue & Andre Rudolph,<br/>Cae Uchaf,<br/>Rhosybol,<br/>Anglesey,<br/>LL68 9TR,<br/>Tel: 01407 832 800</p></div><div class="center">dfdfdfdf</div><div class="right"><form method="post" action="contact.php">Your Email:<br/><input name="email" type="text"/><br/>Message:<br/><textarea name="message" rows="5" cols="20"></textarea><br/><input type="submit"/></form></div></div></div> <div class="container"><div class="title"><h2>sdfsdf</h2></div><div class="contentWrap"><div class="left">dfdf</div><div class="center">sdfsdf</div><div class="right">dfdf</div></div></div> </div> </body></html>

CSS

body,.content,.left,.center,.right {margin: 0;border: 0;padding: 0;width: 100%;height: 100%;}body,.container {background-color: #EED0D6;}body {font-family: Arial,Helvetica,sans-serif;padding: 20px 0;}#pageWrap {background-color: #FFFFFF;border-radius: 10px;margin: 0 auto;padding: 20px;width: 780px;}#header,.container {border-radius: 8px;width: 780px;}#header {background: url(http://www.holiday-anglesey.co.uk/media/holiday-anglesey.png) no-repeat scroll right top transparent;height: 245px;}#nav,.left,.center,.right {float: left;}#nav {width: 160px;}#nav a {border-color: #781351;border-radius: 0 8px 4px 0;border-style: solid solid solid none;border-width: 1px 1px 1px 0;color: #000000;display: block;margin: 9px 0;padding: 8px 10px;text-align: right;text-decoration: none;}#nav a:hover,#nav a:active {background: none repeat scroll 0 0 #EED0D6;color: #781351;}#slogan {float: left;text-align: center;text-transform: uppercase;padding-left: 30px;}.container {border-radius: 10px 10px 10px 10px;text-align: center;padding-bottom: 10px;}.contentWrap {width: 750px;margin: 10px auto;overflow: hidden;}.title {background-color: #BA6E7B;border-radius: 10px 10px 0 0;height: 30px;}.left,.center,.right {width: 225px;}.left { }.center {margin: 0 35px;}.right { }input {    background: none repeat scroll 0 0 #FFFFFF;    border: 1px solid #781351;    border-radius: 5px 5px 5px 5px;    font-family: times New Roman;    font-size: 15px;    padding: 4px;}textarea {    background: none repeat scroll 0 0 #FFFFFF;    border: 1px solid #781351;    border-radius: 5px 5px 5px 5px;    color: #000000;    margin-bottom: 10px;}h3 {    font-size: 18px;}p {    font-size: 20px;}

[Ashley Webb]

Thank you very much to dsonesuk and darkxpunk! I'm guessing that the idea here would be for me to copy and paste the code supplied. It is incredibly tempting to do so but doing so would be an admisiion of failure on my part. I probably wouldn't learn anything either! Again, thankyou both for taking the time to code that up for me, it is appreciated and I hope neither of you mind me working out what you have done and why it is better, then implementing that which I understand! I dont want to you to take a look at the site and be offended that I haven't copy and pasted your code! I got my wrist slapped for using too many div's, also using div background to show photos instead of img tags. I will work through and cut out unnesecary div's! Again, thankyou. I will reply again once I have altered my code to make sure that you approve!

[DarkxPunk]

Hey no problem I am just offering a template for you to work from.What I did was not give is a height and used overflow content hidden to make sure it wrapped around your content.I agree it's not best to copy paste our work, but one tactic I use is take our code open it up and beside it have a blank slate and try each addition we did and learn what everything does along the way.I am here for any questions.

[Ashley Webb]

Good evening dsonesuk and darkxpunk! I have removed every case of position relative, with top, left and used padding instead and have 'unwrapped' all block elements and styled the content instead as suggested by dsonesuk. I used the basic html structure as suggested by darkxpunk and used overflow:hidden without defining height on anything. Thank you very much for your css. Between you you have taught me exactly what I wanted to learn and some useful advice I didn't know I needed to know! Please take a look and see if you have any further suggestions and check that I have grasped what you suggested. Again, please accept my gratitude for your time, efforts and expertise, its greatly appreciated!

[Ashley Webb]

I thought it was a good idea but I think unwrapping the content has messed the styling of the content in chrome... Also, when I first go to the homepage, half the css is not applied, then when I press refresh it's fine. That happens in all browsers. Does anybody know why? Thank you in advance.

[DarkxPunk]

I don't know why it does not always work. Could you put the CSS and HTML code again so we can have a look?

[Ashley Webb]

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Holiday Caravan on Anglesey | David & Katie Richards</title><link href="/styles/homepage.css" rel="stylesheet" type="text/css"/><meta name="norton-safeweb-site-verification" content="6vxtxsru9l58sc8xmg1p1huy-uaazfq124q2tx8xum569z8bfru6kwnfzg35yqoq5v3w820wvefblcd-wptuwomu7x7eb70br47q8byhbusbadlm9v7dv5ouz0rs9ijq" /><script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-27938242-1']);  _gaq.push(['_setDomainName', '.holiday-anglesey.co.uk']);  _gaq.push(['_trackPageview']);  (function() {	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script></head><body><div id="page"><div id="header">  <div id="nav">   <a href="">Bookings</a>   <a href="">Inside Caravan</a>   <a href="">Outside Caravan</a>   <a href="">Local Scenery</a>   <a href="">Things To do</a>   </div>  <h1><br />HOLIDAY HOME<br />TO LET<br />ON ANGLESEY</h1></div><div class="container" id="welcome">  <div class="title"><h2>Welcome</h2></div>  <div class="content">   <h3 class="left" id="textleft">A delightful and charming 6 berth holiday caravan in approx 2 acres of land.<br/><br/>Set on the outskirts of Amlwch with beautiful sea and coastal views towards Bull Bay.</h3>   <img id="welcomepic" class="center" src="/media/holiday-anglesey-static-caravan-outside.JPG" alt="Outside of a holiday caravan on Anglesey"/>   <h3 class="right" id="textright">The caravan is close to all local amenties and is accessed via a small lane leading to a driveway with ample parking space.</h3>  </div></div><div class="container" id="location">  <div class="title"><h2>Location</h2></div>  <div class="content">   <img class="left" id="locationpicleft" src="media/holiday-anglesey-sea-view-1.JPG" alt="Sea View on Anglesey"/>   <h3 class="center" id="locationtext">Amlwch is situated on the north eastern corner of Anglesey and is some fifteen miles from Holyhead and the same distance from Llangefni.</h3>   <img class="right" id="locationpicright" src="/media/holiday-anglesey-sea-view-2.JPG" alt="Sea View on Anglesey"/>  </div></div><div class="container" id ="contact">  <div class="title"><h2>Contact</h2></div>  <div class="content">   <p class="left" id="contacttext">Sue Rudolph,<br/>Cae Uchaf,<br/>Rhosybol,<br/>Anglesey,<br/>LL68 9TR,<br/>Tel: 01407 832 800</p>   <img class="center" id="contactpic" src="/media/holiday-anglesey-sea-view-3.JPG" alt="Sea View on Anglesey"/>   <div class="right">    <form method="post" action="contact.php">Your Email:<br/><input name="email" type="text"/><br/>Message:<br/><textarea name="message" rows="5" cols="20"></textarea><br/><input type="submit"/></form>   </div>  </div></div><div class="container" id="bottompics">  <div class="content">   <img alt="" src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-lounge-1.JPG"/>   <img alt="" src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-lounge-2.JPG"/>   <img alt="" src="http://www.holiday-anglesey.co.uk/media/holiday-anglesey-lounge-3.JPG"/>  </div></div></div></body></html>

body {    background-color: #EED0D6;    font-family: Arial,Helvetica,sans-serif;    padding: 20px 0;}#page {    background-color: #FFFFFF;    border-radius: 10px 10px 10px 10px;    margin: 0 auto;    padding: 20px;    width: 780px;}#header {    background: url("http://www.holiday-anglesey.co.uk/media/holiday-anglesey.png") no-repeat scroll right top transparent;    border-radius: 8px 8px 8px 8px;    height: 245px;    width: 780px;}#nav {    float: left;    width: 160px;}#nav a {    border-color: #781351;    border-radius: 0 8px 4px 0;    border-style: solid solid solid none;    border-width: 1px 1px 1px 0;    color: #000000;    display: block;    margin: 9px 0;    padding: 8px 10px;    text-align: right;    text-decoration: none;}#nav a:hover {    background: none repeat scroll 0 0 #EED0D6;    color: #781351;}#nav a:active {    background: none repeat scroll 0 0 #EED0D6;    color: #781351;}#header h1 {    float: left;    padding-left: 30px;    text-align: center;    text-transform: uppercase;}.container {    background-color: #EED0D6;    border-radius: 10px 10px 10px 10px;    padding-bottom: 10px;    text-align: center;    width: 780px;}.title {    background-color: #BA6E7B;    border-radius: 10px 10px 0 0;    height: 30px;}.content {    margin: 10px auto;    overflow: hidden;    width: 100%;}.left {    float: left;    padding-left: 10px;    width: 225px;}.center {    float: left;    margin: 0 35px;    padding-left: 10px;    width: 225px;}.right {    float: right;    padding-right: 10px;    width: 225px;}#welcomepic {    padding-top: 25px;}#textright {    padding-top: 35px;}#locationpicleft {    padding-top: 10px;}#locationtext {    padding-top: 25px;}#locationpicright {    padding-top: 10px;}#contacttext {    padding-top: 15px;}#contactpic {    padding-top: 23px;}input {    background: none repeat scroll 0 0 #FFFFFF;    border: 1px solid #781351;    border-radius: 5px 5px 5px 5px;    font-family: times New Roman;    font-size: 15px;    padding: 4px;}textarea {    background: none repeat scroll 0 0 #FFFFFF;    border: 1px solid #781351;    border-radius: 5px 5px 5px 5px;    color: #000000;    margin-bottom: 10px;}#bottompics {    margin-top: 20px;}#bottompics img {    border-radius: 10px 10px 10px 10px;    margin-left: 10px;    margin-right: 10px;    margin-top: 20px;}h3 {    font-size: 18px;}p {    font-size: 20px;} 

[DarkxPunk]

Hey, In regards to having the CSS not load I am not sure... The only thing I can guess is its happening because of the way you are calling the CSS file. I have it layer out like this: styles/homepage.css (This is the location of the CSS file)index.html (This is the location of the HTML file, on the same level as the 'styles' directory) I then call it by using href="styles/homepage.css" Thats the only thing I can guess. Now just a comment not a criticism but this code here:

.content {    margin: 10px auto;    overflow: hidden;    width: 100%;}.left {    float: left;    padding-left: 10px;    width: 225px;}.center {    float: left;    margin: 0 35px;    padding-left: 10px;    width: 225px;}.right {    float: right;    padding-right: 10px;    width: 225px;}

You notice how you have everything aligning in different directions and you have each element having its own padding. Now this is fine technically. But to guarentee your content is centered you should 'wrap' the content having the 'wrap' center the content and then add margins to the center div. Its up to you. Peace

[sandra93usa]

You can see more detail in herehttp://adf.ly/4YveL