Hello I am currently working on a website for Web Development courses and I am having an issue where the CSS3 float properties are not working as the text that is in the right column is overlapping the image in the left column. Also, the header is overflowing down below into the right and left columns. I will include the code and screenshots. Any help is greatly appreciated. It won't allow me to add my css file for my external stylesheet. Here is a synopsis of it: body { background-color: #d2b48c; width: 900px; text-align: center; } .floatleft { float: left; margin: 10px 20px 10px 20px; padding: 0px 0px 10px 10px; clear: left; } .header { height: 120px; margin: 10px 20px 10px 20px; padding: 0px 0px 10px 10px; } .container { width: 900px; margin: 0px auto; /* This will center the container on the page. */ } .left, .right { float: left; width: 50%; }
Try this one: body { background-color: #d2b48c; width: 900px; text-align: center; } .floatleft { /*float: left; margin: 10px 20px 10px 20px; padding: 0px 0px 10px 10px; clear: left;*//* why float inside float?*/ max-width: 100%; } .header { /*height: 120px;*//* delete this line to let div.header contents flow freely */ margin: 10px 20px 10px 20px; padding: 0px 0px 10px 10px; } .header img{ width: 10%;/* you may want to adjust this further */ } .container { width: 900px; margin: 0px auto; } .left, .right { float: left; width: 50%; } Code (CSS):
Float has been around since before CSS3 was a twinkle in the W3C's eye -- you don't say "CSS3's float property". In fact, you don't have ANYTHING in your example that isn't valid as CSS2. That said, your inconsistent and gibberish use of widths is most likely a hefty contributor to your woes. PX metric widths? Inaccessible garbage and should have been one of the first things any instructor or course should have told you. Perfect total widths? ALSO asking for the layout to fail. Using a H2 for the tagline below the H1? what even makes that the "start of a new subsection" -- that text should be PART of the h1. (typically use the SMALL tag to de-emphasize it). Using classes like "left" and "right"? presentational nonsense that has no business on any website if you are going to bother using CSS; things in your markup should say what things ARE or WHY they are getting presentation, not what that presentation is. Probably also help if you had MEDIA targets on your CSS <LINK> since sending screen layout to all isn't exactly a winner either. ... and people wonder why I consider college education in IT to not be worth a sheet of bog roll, and most educators to be completely unqualified to teach anyone ANYTHING! Most likely they have failed to teach you even the most rudimentary basics of HTML, things you should know before you even THINK about playing with layout. Things like what headings mean -- H1 being the heading (singular) under which EVERYTHING on the page is a subsection... H2 indicating the start of a subsection of the H1... H3 indicate the start of subsections of the H2 before it and so forth. HR means a change in topic where a heading is unwanted/unwarranted, NOT "draw a line across the screen" -- not really seeing change of topics out of either of those so the H2 and HR are wrong. When it comes to your float problem, float the image, JUST the image, then set overflow:hidden on the content area next to it if you don't want it to de-indent past the float. Half your DIV go in the trash as things like that image shouldn't need a DIV if that's going to be the only element there. ... and really you shouldn't be using pixels for much of anything other than the image size. Fonts, widths and everything else should be declared in EM's so it's accessible and scales to the user preference...or that width on body is unreliable and unpredictable cross-browser -- Again, things they should be teaching you before you even got this far; if concepts like the WCAG haven't even been mentioned yet, I'd suggest trying to get a refund for the coursework as the teacher isn't qualified to open their mouth on the subject. I rarely do rewrites when people say it's homework, but just to show you what I mean: <!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" > <title> The Sound Bay Ferry Service </title> </head><body> <div id="top"> <h1> The Sound Bay Ferry Service<br /> <small>Serving Sound Bay for Over 50 Years</small> </h1> <img src="images/boat.jpg" alt="Sound Bay Ferry Boat" class="leadingPlate" > <div class="postPlate"> <p> The Sound Bay Ferry Service is pleased to announce that service from Sound Bay to Bay Island will resume on Sunday, May 1. We will be running limited service from May 1 until Memorial Day. </p><p> Extra service will be provided during the entire Memorial Day weekend. There will be additional stops in Breeze Lake and Smithville. Ten-trip tickets and monthly passes will be available starting June 1. </p><p> Starting July 4, we will be launching a new era in ferry service as we commission our fourth ferry, the Cove Cruiser. More details will be forthcoming as we get closer to the maiden voyage. The Cove Cruiser will be one of our more spacious ferries. There will be plenty of room for passengers on deck and below. </p><p> The first 100 passengers on the Cove Cruiser will ride for free! The first 1000 passengers will receive raffle tickets. First prize in the raffle is an all-expenses-paid trip to Madison, Wisconsin. You'll stay as our guest for three days and two nights at the new Madison Towers Resort Hotel. All meals and round-trip transportation are included. </p> <!-- .postPlate --></div> <!-- #top --></div> </body></html> Code (markup): With this as the CSS: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } body { padding:0 1em; font:normal 100%/150% "segoe ui",helvetica,sans-serif; background:#D2B48C; } #top { min-width:48em; max-width:60em; margin:0 auto; padding-top:1em; } h1 { /* set top padding below to background height plus any extra desired padding */ padding:64px 0.5em 0.5em; margin-bottom:0.5em; text-align:center; font:bold 200%/120% "segoe ui",helvetica,sans-serif; background:url(images/bgIcon.gif) top center no-repeat; border-bottom:3px solid #642; } h1 small { font:bold 75%/120% "segoe ui",helvetica,sans-serif; } .leadingPlate { float:left; margin:0 1em 1em 0; } .postPlate { overflow:hidden; /* prevent post float de-indent */ } p { padding:0 0 1em; } Code (markup): Give or take +/- 5%. I was guessing slightly. The CSS starts out with a reset as you can't trust padding and margins on those elements to be the same across browsers, and remembering when to set or not set those is an effort in futility.
Thanks for your quick response. Yes, everything I have learned from Web Development has been self-taught. College is no more than being assigned a bunch of assignments without adequate explanations and when you try to ask a professor they are never available during their office hours. I am so glad I joined this forum. Who knows, maybe I can correct some of my bad coding habits and actually learn something. I will plug in the scripts you have here and see how it looks. Here is the image that we need to match for our assignment: The second picture is how your corrected code displayed in Firefox. Notice how the columns are not side by side with the left column being the image and the right being the text with the header centered and the logo to the left. I must match designs exactly with the one displayed in ferry.jpg
You didn't copy the CSS or place it in the right spot. Separate file. Your second pic quite obviously isn't getting the new CSS applied to it. That second code block should be in a "screen.css" file in the same directory as the markup. Though centering the image top to bottom is a "not-viable" concept typical of tables for layout -- an outdated method of building a website that really shouldn't be done. There are tricks you can use in a modern approach to pull it off, but I usually advise against that. I guess if I "really" had to do it that way, I'd probably just make it a background image like I would the one in the heading.
Thinking on it, due to their placement and not really being content, NEITHER image belongs in the HTML as IMG tags. Here's a working demo of how I'd approach that in a nice open directory so you can see the bits and pieces... http://www.cutcodedown.com/for_others/john60178/ ... and a tossed a .rar archive in there with all the needed files for you. Really though that's BAD design -- the vertically centered image looks horrid when the layout narrows (and fixed width layouts are for mouth breathing halfwits) and I centered the text top to bottom in the header since flush top like that made things look just "slapped in there any old way". Basically, your starting point was rubbish and bad design, not a shock you were having trouble. Though you also mentioned another problem with "courses" is the teacher was the one who should be helping you understand this... but of course "can't be bothered" or "lacks the time".