I'm brand new to web development and I have build a little website with 3 pages. My goal is to use #media tags to make it responsive for the following: max-widths: 980px, 768px and 640px. I did the first page and it's been acting weird. How can I make the entire website responsive? Please to assist. My code for all 3 pages and the media is attached. Thanks.
/*first page */
<head>
<title>AboutMe</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*second page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center-portfolio">
<h3> Portfolio</h3>
<hr>
<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
<div class="div6"><p><i>please to hover on the images</i></p></div>
<div class="banner1">career picture 1</div>
<div class="banner2">chocolate tour</div>
<div class="zoomIn banner5">Abidjan</div>
<div class="banner4">career picture 2</div>
<div class="banner3">Guild Brussels</div>
</div>
</div>
<div class="footer">
<p class="footer-copyright"> Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*third page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center">
<h3> Contact</h3>
<hr>
<form>
Name:<br>
<input id="namebox" type="text" name="name" required="" placeholder="your name">
<br><br>
Email:<br>
<input id="emailbox" type="Email" name="email" required="" placeholder="example#yahoo.com">
<br><br>
Message:<br>
<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
</textarea>
<br><br>
<input type="submit" value="submit" name="submit">
</form>
<br>
</div>
</div>
<div class="footer">
<p class="footer-copyright">
Copyrigtht © 2019 Portfolio "name" All rights reserved.
</p>
</div>
</div>
</body>
/* Width at 768px and below */
#media screen and (max-width: 768px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
/*Width at 640px and below */
#media screen and (max-width: 640px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
Start out by removing fixed width properties. I am having a hard time seeing how you need width: 50% on everything. Then start by just addressing the styles of your .container element.
A good techniques is setting the max-width to the width you have in mind for the site to be viewed on a normal desktop screen, in the demo I used 600px but you can use any value that feels right.
Then in you media query assign a new max-width value that is appropriate for the screen size in the query, here i used 80% becuase typically on small screens you want the content to mostly fill the width of the screen with a little space on the sides, but again you can configure this to your needs in a variety of ways.
The main thing here is that your container element is now responsive and the content inside can fill up the space however you like from there. Run the snippet and click the Full page link to play around with the screen width and see the behavior working.
.container {
max-width: 600px;
margin: 0 auto;
}
#media screen and (max-width: 640px;) {
.container {
max-width: 80%;
}
}
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
I wish you had a sketch of what the final product will look like it would have been very helpful. There is more to making a page responsive than writing just valid HTML tag and corresponding styles and mind typos because from your code the extra % sign will make
.middle-about-me{
width: 50%%;
}
misbehave.
There a couple of things you need to know to be able to make a page responsiveness effective and very close to what you want.
Firstly you should consider resetting the default styles that the browser naturally applies to valid HTML tags by using normalize.css or utilize the power of universal selector which is almost as good in modern browsers, something like:
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}
html{
font-size: 62.5% /* (10/16) * 100% and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}
body{
box-sizing: border-box;
}
img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}
so with the that basic reset you can always rely on using ems or rems for fonts an percentages for images and other block element when it feels appropriate.
This little write up is not enough to teach you all you need to know about responsiveness in the web but I hope it shed light on your path. Meanwhile those were not my original ideas i took a course by 'Jonas Schmedtman', He actually thought me those.
If you have a sketch of what the final pages should look like or you are still not very clear with what i have tried to explain so far please don't hesitate to add a comment so that we tidy it up together.
Related
i am making a website for school. The images need to float right with some <p> text to left of it but cant make it work. Who can help me, see img for clearence. Here is some code:
.img-inno {
float: right;
height: 10%;
width: 10%;
text-align: left;
}
<header class="inno"> Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
Eventually you will have some good data which shoes will fit the best. The data will be sent via email.
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it! </p>
More info? Click here
</footer>
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</article>
<article>
<header class="inno"> Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</article>
As c.m. noted it is better to do it with CSS Flexbox.
Check out the following example to get an idea of how it works.
<!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">
<style>
article {
display: flex;
justify-content: space-between;
/*flex-wrap: wrap;
Use this if you want the images to wrap under the text for smaller screen sizes*/
}
.left {
flex-grow: 3;
flex-shrink: 1;
flex-basis: auto;
}
.right {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.img-inno {
max-width: 200px;
width: 100%;
}
</style>
<title>Document</title>
</head>
<body>
<article>
<div class="left">
<header class="inno">
Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
<p>Eventually you will have some good data which shoes will fit the best. The data will be sent via email.</p>
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it!</p>
<p> More info? Click here</p>
</footer>
</div>
<div class="right">
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</div>
</article>
<article>
<div class="left">
<header class="inno">
Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
</div>
<div class="right">
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</div>
</article>
</body>
</html>
Use CSS Flexbox
That is the html code
<article>
<p>Text</p>
<img src=""/>
</article>
and that css
article {
width: 500px;
display: flex;
}
then you can put spacing with margin and padding on your p or img and you can align your content, too
don't use float anymore, that's not modern coding style
read more about flexbox, there is a nice guide at css-tricks.com
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
I have a grid layout consisting of 4 rows in Twitter Bootstrap.
I would like each row to be even in height, with equal padding between the content of each row.
However the padding on the rows are currently unequal.
For example the space at the foot of the li items in 'Technologies' and the hr line is significantly narrower than the space at the foot of 'Education'.
I cannot see in my CSS where I am going wrong, but how can I apply equal padding throughout? Thanks in advance
Here is the link to my website where the issue is.
<div class="container">
<div id="greeting">
<p>
My interest in coding primarily stemmed from my day job which exposed me to the basics of HTML. I've still got a long way to go but it's my ambition to forge a long-term career as a developer, and I'm very determined to reach my goal.
</p>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Technologies</h2>
</div>
<div class="col-md-4">
<h2 class="tech-header">Comfortable</h2>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Bootstrap</li>
<li> Adobe PhotoShop</li>
</ul>
</div>
<div class="col-md-4">
<h2 class="tech-header">Finding my feet</h2>
<ul>
<li> JavaScript</li>
<li> JQuery</li>
<li> PHP</li>
<li> SQL</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Experience</h2>
</div>
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2><br><h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Education</h2>
</div>
<div class="col-md-8">
<h2>University of Brighton</h2><br><h3>October 2003 to July 2006</h3>
<ul>
<li> BA(Hons) Social Science (2:1)</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-12" id="button">
View my full CV
</div>
</div>
Here is your specific code :
HTML :
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2>
<br> <----- REMOVE THIS
<h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
Css:
#resume h3, #resume .col-md-8 li, #resume .col-md-8 p {
top: -60px; <----- REMOVE THIS
position: relative;
}
If you remove the <br/> and the top:60px; every thing returns to the normal.
I am having a bit of a problem with one of my containers. It is not expanding with my content. Here is the code:
<!--center section start-->
<div id="centerContent">
<!--center left begin-->
<div id="centerLeft">
<h2>
Special Disney Ticket Offer!
</h2>
<p class="specCont">
<img class="specImg" src="images/universal-main-offer.jpg" alt="Special Universal Studios Ticket Offer!" />
Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom, Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value! Call & ask for the Resort offer<br />(restrictions apply).<br /> <strong>Call us: 1-800-544-7646</strong>
</p>
</div>
<!--center left end-->
<!--center right begin-->
<div id="centerRight">
<a href="http://tix.greatorlandodiscounts.com/index.php?catid=106">
<img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" />
</a>
</div>
<div class="clear"></div>
<!--center right end-->
</div>
<!--center section end-->
CSS:
#centerContent {
width: 980px;
height: 100%;
background-image:url(../images/main-special-bg-strip.png);
background-repeat:repeat-y;
}
#centerLeft {
width: 572px;
height: 100%;
float:left;
}
#centerRight {
width: 408px;
height: 100%;
float:right;
}
What I am looking to do is have the centerContent div stretch with the two divs inside. I have a background strip on the centerContent that will allow the white background to expand 100%.
I hope that made some sort of sense and thank you in advance for any and all help.
Add overflow:auto; to #centerContent.
Since the child divs are floated, the parent collapses and acts like it has no content. Adding overflow:auto; restores the expected behavior.