jamesjmann Posted March 29, 2011 Share Posted March 29, 2011 I'm having problems using "<br clear="all">" for structuring the profile template for my users. Here's my html: <html> <div id="profile"> <div id="default"> </div> <div id="other"> </div> <div id="contact"> </div> <div id="body"> <div id="sidebar"> </div> <div id="main"> </div> <br clear="all"> </div> <!--End Body--> <div id="friends"> </div> <div id="comments"> </div> </div><!--End Profile--> </html> And here's my CSS: <style> #body #content #profile #body #sidebar { float: left; width: 250px; margin-top: 10px; padding: 5px; color: #555; margin-right: 15px; } #body #content #profile #body #main { float: left; width: 450px; margin-top: 10px; padding: 10px; color: #555; border-left: 1px solid #CCC; } #body #content #profile #default { float: left; width: 300px; margin-right: 15px; padding: 5px; } #body #content #profile #other { float: left; width: 425px; border-left: 1px solid #CCC; padding: 10px; } #body #content #profile #contact { width: 225px; margin-top: 10px; padding: 5px; } #body #content #profile #friends { width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 25px; } #body #content #profile #comments { width: 70%; margin-left: auto; margin-right: auto; } </style> The problem is, the "<br clear="all">" right after "#body #content #profile #body #main" is making everything after "#body #content #profile #body" span down multiple lines...This happens on profiles that do not contain a lot of information. On profiles that DO contain a lot of information, this isn't a problem. I'm having lots of trouble understanding why this is. Anyone have a solution? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 29, 2011 Share Posted March 29, 2011 i really recommend to buy a decent, book, the code above is just madness. If not show us an online example that this is working i just tested it locally and as i guessed none of the elements are given properties, because you skipped the chapters about selectors id's and classes when learning this, which is pretty much what css is about. more over your missing a type attribute in <style> (should be <style type="text/css"> ) clear is not a valid attribute for <br /> (it looks abit like the clear:both, but that's something different) Do you have an online example because the code above is not doing anything. Look at this (your own code): #body #content #profile #body #sidebar { float: left; width: 250px; margin-top: 10px; padding: 5px; color: #555; margin-right: 15px; } what you here do is set the properties to the element #sidebar inside of #body that sits inside of#profile that sits inside of #content that again sits in #body. That will never work with the mark up you have more over you are using #body 2 times, so if it were valid it should have been a class instead of an #id. Quote Link to comment Share on other sites More sharing options...
jamesjmann Posted March 29, 2011 Author Share Posted March 29, 2011 i really recommend to buy a decent, book, the code above is just madness. If not show us an online example that this is working i just tested it locally and as i guessed none of the elements are given properties, because you skipped the chapters about selectors id's and classes when learning this, which is pretty much what css is about. more over your missing a type attribute in <style> (should be <style type="text/css"> ) clear is not a valid attribute for <br /> (it looks abit like the clear:both, but that's something different) Do you have an online example because the code above is not doing anything. Look at this (your own code): #body #content #profile #body #sidebar { float: left; width: 250px; margin-top: 10px; padding: 5px; color: #555; margin-right: 15px; } what you here do is set the properties to the element #sidebar inside of #body that sits inside of#profile that sits inside of #content that again sits in #body. That will never work with the mark up you have more over you are using #body 2 times, so if it were valid it should have been a class instead of an #id. The reason why I structure it all that way is to make my CSS more easy to read and more organized, and the CSS does work (all of it), except for that one, stupid html tag "<br clear="all">". See, basically what I want to do is have two columns for the member's profile: one for the "general" information and the other for the more "personal" information. I want them to sit side by side, and I've always learned to use the clear property on a <br> tag for making any other element after them to sit below them (if you know what I mean). This works on my main template, just not in this particular document for some reason. Also, I don't think the two "body" IDS are what's causing this problem. This problem was still occurring even before I added the second body id, which I inserted in the hopes of solving this really annoying problem. And the code actually is doing something. I omitted everything I currently contain within the <div>'s as I figured they were irrelevant to this post. BUT, to show you an example of what's going on here, I'll post some pictures...one for the profile that does work, and one for a profile of the several that don't. I attached a picture of the only profile with a lot of information that does not suffer from this CSS blight. The other profiles look the same, except there's a HUGGEEEEE gap between the "sidebar" and "main" divs and the "friends" div. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
jamesjmann Posted March 29, 2011 Author Share Posted March 29, 2011 Oh, and I can assure that I've check and rechecked my HTML code: nothing as far as I can tell that is causing this problem, so it would have to be the CSS. I'm guessing there is an alternative to the <br clear="all"> method that does the same thing? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 29, 2011 Share Posted March 29, 2011 well good to hear your happy with your code and despite the fact I tell you that with that mark up and css, it's impossible for elements to get there style. I even explained it... It seems to work for you.. well that is good, unless you try to view it any of the modern browsers. Now pictures are nice, but i just don't believe it works with the code above. Also, I don't think the two "body" IDS are what's causing this problem. This problem was still occurring even before I added the second body id, which I inserted in the hopes of solving this really annoying problem. be happy with the fact people point out more things in your code. like i did on the ID's or type attribute. 've always learned to use the clear property on a <br> tag for making any other element after them to sit below them (if you know what I mean). This works on my main template, just not in this particular document for some reason. interesting... As for your break=all thing, maybe have a look at something called clear:both; Just for the record, you don't have to agree with me, but I am pretty sure it will save you crap loads of time figuring out how and what. for a layout you want, you will need Float and clear Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 29, 2011 Share Posted March 29, 2011 if you have read this: http://www.w3.org/TR/CSS2/visuren.html You should know exactly how to do this. But than again I can allready tell you you need float and clear for this. hope it helps, if not, show some online example so we can fix it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.