himynameismark Posted April 8, 2009 Share Posted April 8, 2009 I am very new to using the Div tag (used to be an old-school HTML tables guy), and decided to try to make a test page using external CSS using Div tags and classes. I just wanted to make sure I understood what to do with the Div tags using the Float and Clear attributes in CSS. Here is the code I have in my CSS file: .left { background: blue; width: 24%; float: left; clear: left; }.right { background: black; width: 24%; float: right; }.container { background: yellow; width: 50%; }.top { background: green; width: 100%; float: left; clear: both; } So, it's supposed to have a line of green at the top, then immediately under, a small segment of blue on the left, a yellow area for the content, and a black segment on the right. The yellow, blue, and black are all supposed to touch and be immediately under the green. Here's my problem. The green works fine, the yellow and blue work fine, but there is a line break before the black Div. Keep in mind, this is just a test to make sure I know how to get the Div tags to work properly; I would never seriously use this particular layout for a real web page.Can somebody help me prevent this line break? Also, before the end of the code for ".right" I used to have "clear: right;" and it did the same thing. Link to comment Share on other sites More sharing options...
jlhaslip Posted April 9, 2009 Share Posted April 9, 2009 Can we see the html that goes with this CSS code, please.better yet, can you supply a link to the web page? Thanks. Link to comment Share on other sites More sharing options...
barneyruckus Posted April 9, 2009 Share Posted April 9, 2009 First off... CSS rules!Secondly... Please add a link if you have it live, or the html's side of the story.Also, a bit of advice since you're just getting into CSS. Try to maintain semantic markup. Most people switch to CSS not only for it's power in designing content globally, but also for how "lean" you can make your HTML. Using only <div> tags in the very beginning is okay. Some find it easier to get the gist of CSS, but in the long run it'll come and bite you. I've heard of using <div> tags too much being unofficially referred to as, "Divitis". Ha Anyway... there is a pretty good article here that can explain it better than I can.http://csscreator.com/?q=divitisI'm still not great at making table less websites... but not having "Divitis" anymore helped out a lot. Link to comment Share on other sites More sharing options...
thescientist Posted April 9, 2009 Share Posted April 9, 2009 I've heard of using <div> tags too much being unofficially referred to as, "Divitis". Ha Anyway... there is a pretty good article here that can explain it better than I can.http://csscreator.com/?q=divitis good link Link to comment Share on other sites More sharing options...
himynameismark Posted April 19, 2009 Author Share Posted April 19, 2009 Wow, sorry guys, I didn't realize there were any replies to this. I figured out what the problem I was having was, but now I'm having other issues. I made another sample, a different one this time. This time the CSS is internal, so I'll post the entire code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title> DIV Center Test </title> <style type = "text/css"> #container { margin-left: auto; margin-right: auto; width: 920px; } #right{ width: 110px; background-color: blue; float: right; display: inline; position: relative; } #center{ width: 700px; margin-left: 110px; margin-right: 110px; background-color: black; display: block; position: relative; } #left{ width: 110px; background-color: blue; float: left; display: inline; position: relative; } p { color: white; font-family: Arial, sans-serif; } </style> </head> <body> <div id="container"> <div id="right"> <p> right </p> </div> <div id="left"> <p> left </p> </div> <div id="center"> <p> center </p> </div> </div> </body></html> The problem is, the left and right divs have 3 lines whereas the center div only has 1. The text is coming up on the second line on the left and right, and of course on the only line of the center div.Mr Ruckus, what is wrong with using divs?Also, is there a way to set up subscriptions on this forum or have it e-mail me when people post in threads I post in? I know I could do that on an old music forum I used to post in. Link to comment Share on other sites More sharing options...
thescientist Posted April 19, 2009 Share Posted April 19, 2009 Also, is there a way to set up subscriptions on this forum or have it e-mail me when people post in threads I post in? I know I could do that on an old music forum I used to post in.at the top of the thread, there's an 'options' tab. from that click on track this topic. Link to comment Share on other sites More sharing options...
himynameismark Posted April 19, 2009 Author Share Posted April 19, 2009 at the top of the thread, there's an 'options' tab. from that click on track this topic.Awesome, thanks. Link to comment Share on other sites More sharing options...
chibineku Posted April 20, 2009 Share Posted April 20, 2009 The problem is, the left and right divs have 3 lines whereas the center div only has 1. The text is coming up on the second line on the left and right, and of course on the only line of the center div.What do you want it to do? Divs expand to fit the text inside them unless you tell them otherwise. Link to comment Share on other sites More sharing options...
himynameismark Posted April 20, 2009 Author Share Posted April 20, 2009 Well this was just a test to make sure I could work with divs. I'm new to using them rather than tables, so I'm messing with stuff for now before I try to build anything real. I'm expecting each of the divs to be the same height because there is only one line of text in each. However, when I took out the <p></p> tags, they were all the same size. When I put them back in, the left and right floated divs have an extra line before and after the line including text, but the center div has no extra spaces. Link to comment Share on other sites More sharing options...
chibineku Posted April 20, 2009 Share Posted April 20, 2009 This seems to be another case of IE vs. the world - it works perfectly well on IE, but not on Mozilla. I'm not a CSS expert, or even fluent, so I'll need to defer to someone else to fix you Link to comment Share on other sites More sharing options...
himynameismark Posted April 20, 2009 Author Share Posted April 20, 2009 That's weird. It's doing the exact same thing in FF3 as it is in IE8. Would the p tags have any kind of interference with anything in the div css? Link to comment Share on other sites More sharing options...
chibineku Posted April 20, 2009 Share Posted April 20, 2009 I don't know...I made my own practice page with bare bones CSS and got exctly the same thing.You shouldn't have to, and it's ugly, but you can add padding-top:1em to all the divs and everything falls into place in FF. However, it goes mental in IE. There will undoubtedly be someone who knows how to fix this. In the interim, you could, if all else fails, write some kind of script that checks what the browser is and assigns CSS depending on the browser, so that IE gets what it wants (no padding), and FF gets the padding it needs. Link to comment Share on other sites More sharing options...
chibineku Posted April 20, 2009 Share Posted April 20, 2009 Okay, here is my final attempt, using a bit of JS to sort out the styles. It checks the browser type, and uses a switch to either alter the id of the right, left and content divs in the event of Opera, keeps the originals in the event of IE or anything else, and uses an if clause to change to a third id in the event of Mozilla. for some reason Mozilla would not work in the switch, but works in an if statement. Here it is (well, here is my version, but you can take a few minutes adjusting the CSS properties to make blue backgrounds, etc. etc. The horizontal rule is to prove they're in line! <html><head><title>Div trails and tribulations</title> <script type="text/javascript">function adjustCSS(){var uA = navigator.userAgent;var browserType = "unknown";if (uA.indexOf("Opera") > -1) { browserType = "Opera";} else if (uA.indexOf("Safari") > -1) { browserType = "Safari";} else if (uA.indexOf("Konqueror") > -1) { browserType = "Konqueror";} else if (uA.indexOf("Gecko") > -1) { browserType = "Mozilla";} else if (uA.indexOf("MSIE") > -1) { browserType = "Internet Explorer";}if (browserType="Mozilla") {document.getElementById("left").id="leftMoz"document.getElementById("right").id="rightMoz"document.getElementById("center").id="centerMoz"}switch(browserType) {case Opera:document.getElementById("left").id="leftOpera"document.getElementById("right").id="rightOpera"document.getElementById("center").id="centerOpera"break;default:break;}}</script><style type="text/css">#container{width:80%;align:center;margin-left:10%;}#left{float:left;width:20%;}#leftMoz{float:left;width:20%;padding-top:1em;}#leftOpera{float:left;width:20%;padding-top:2em;}#center{width:auto;}#centerMoz {width:auto;padding-top:1em;}#centerOpera {width:auto;padding-top:0;}#right{float:right;width:20%;}#rightMoz {float:right;width:20%;padding-top:1em;}#rightOpera {float:right;width:20%;padding-top:2em;}</style></head><body onload="adjustCSS()"><div id="container"><div id="left"><p>left</p></div><div id="right"><p>right</p></div><div id="center"><p>center</p></div></div><hr /></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted April 20, 2009 Share Posted April 20, 2009 Browser detection is going to bring you a lot of trouble. Especially in Internet Explorer 8. It will detect it as IE and then render it wrong.Try this code, it should display basically the same in all browsers: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title> DIV Center Test </title> <style type="text/css"> body { margin: 0 auto; width: 920px; } #right { width: 110px; background-color: blue; float: right; } #center{ margin: 0 110px; background-color: black; overflow: auto; } #left{ width: 110px; background-color: blue; float: left; } p { margin: 1em 0; color: white; font-family: Arial, sans-serif; } </style> </head> <body> <div id="right"> <p> right </p> </div> <div id="left"> <p> left </p> </div> <div id="center"> <p> center </p> </div> </body></html> Link to comment Share on other sites More sharing options...
thescientist Posted April 20, 2009 Share Posted April 20, 2009 doesn't IE 7+ not like XHTML either? Link to comment Share on other sites More sharing options...
himynameismark Posted April 20, 2009 Author Share Posted April 20, 2009 Ingolme, what does overflow: auto do?And when you set margin: 0, 110px; I'm assuming 0 is for top and bottom, 110px is for left and right, correct? Link to comment Share on other sites More sharing options...
Ingolme Posted April 20, 2009 Share Posted April 20, 2009 Ingolme, what does overflow: auto do?And when you set margin: 0, 110px; I'm assuming 0 is for top and bottom, 110px is for left and right, correct?Overflow: auto is the key to fixing the problem.When an element A with a top or bottom margin is placed inside a block level element B, the margins of A are transferred to B (I have never known exactly why). When using float, positioning or overflow on element B, this element becomes somewhat independent from the page flow, so that margins of anything inside it (A, for example) will be confined to the space inside it.Writing "margin: X Y;" is the same as writing "margin-top: X; margin-bottom: X; margin-left: Y; margin-right: Y;" Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.