L.Adlon Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) So, one <div> after another, but have the first one set to float left, and the other to float right? I'm just not sure which is the proper way to position those, since there's several positioning methods available in CSS... position:absolute, float, etc. @DarkxPunk: Thanks, I'll look into that. The first one gave me an error (needs java, although all I am blocking is google-analytics), then another error. The second one works, though. I popped the hood and checked the code. Ya, seems that's how they were doing it... floats. Not sure why mine didn't work before. I'll have to play around some more, and see what I screwed up. Thanks guys. Edited June 16, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
L.Adlon Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) So close... The two divisions are working, but I'm still getting the text that follows that split sneaking in between them. Do I need to so some sort of a float:clear or something to the content that follows the split columns content? Also, when I create a <div> that contains the two left and right <div>'s, it always seems to just end up being a 1 pixel line above the two other <div>'s... not sure why it's not containing them. Basically, I hav it set up like this (<p></p> at start and end represents text before and after the split section): <p></p> <div style="container"> <div style="left"> <img> </div> <div style="right"> <p></p> <p></p> <p></p> </div> </div> <p></p> ...and what happens is that last <p></p> ense up positioning between the image and right text. [Additional note] From what I can see, I think something in the code on the rest of the page is interfering. I've pulled just the split section out of the page, and put it in a clean, blank page, and it works there.. so, something outside is interfering... I'll have to check for unclosed tags or something. Looked clean before, but maybe I missed something. [Later] I checked things out... No unclosed tags. Just can't get it to work. Editor is showing it fine, but Firefox has the main container not containing the two halves. Just a single pixel line across the top, the two halves (positioned properly) underneath, and the text that follows after the split starting between the two halves, as opposed to starting clean underneath the split. Seems the coding is all there (since it works in the editor), but obviously something gets messed up in Firefox. Any theories? Edited June 16, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 16, 2014 Share Posted June 16, 2014 I am sorry did you look at the code examples I linked to? It explains it all, and style though used for styling elements still has to be written as CSS. Otherwise you link external CSS files. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) Yep, I'm doing the styling with CSS. The sample I have at the top is simplified and figurative, just so you see the structure. Can't get the wrapper div to hold the two halves. It just starts and ends before the two halves (in Firefox, but works in my editor, which is more like IE in its behavior). The formatting/positioning of the two halves is working fine... it's the containing div that isn't working, and seemingly as a result, the text AFTER the split section is spilling in between, rather than having the wrapper div holding it away. As far as I can see, I was doing it the same way as that second link example. Edited June 16, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 17, 2014 Share Posted June 17, 2014 Can you post your exact code so we can see maybe where you went wrong? Link to comment Share on other sites More sharing options...
davej Posted June 17, 2014 Share Posted June 17, 2014 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>tab</title><style>body{background-color:#444;}#wrap{width:900px;margin:0 auto;}#left{float:left;width:450px;background-color:#bbb;}#right{float:right;width:450px;background-color:#eee;}footer{clear:both;text-align:center;}p{margin:4px 5px;}</style></head><body><div id="wrap"><div id="left"><p>left...</p></div><div id="right"><p>right...</p></div><footer><p>footer...</p></footer></div></body></html> Link to comment Share on other sites More sharing options...
L.Adlon Posted June 17, 2014 Author Share Posted June 17, 2014 (edited) Ah! I noted something in davej's coding... Although my theory about using a clear on the element after the split was right, I was completely wrong in my syntax for it. I did 'float:clear'... as I was going by memory... and, my memory obviously failed me there! I'll try that out. But, I'm still trying to sort out why the wrapper is prematurely ending before the two split elements... as it the closing <div> was before the split elements... at least in Firefox. In the editor, it displays properly (two halves are within the wrapper). If that were working, I imagine the text after the split would be pushed away from the split by the wrapper. I'll have to port it over to the othe machine, and see how Internet Explorer displays it. I'll try and paste the code here in the forums (I have to transfer it between computers first), but it seems like it's coded right (...again, the editor shows it correctly, so I suspect it's 'right' but something else is borderline, and triggering a fail somehow). I may try and get another HTML editor, as the free version of the one I'm using (HTML_Kit) is a bit old. I hand code everything, but I use the editor for the convenient color coding, instant preview, and stuff like that. I've been looking for a good (free) replacement for HTML_Kit. [A bit later] Cool, the clear:both; on the text after the split solved the issue of the text being placed between the halves (...my bad). So, the only thing still weird (although, seemingly not breaking anything) is the wrapper not enclosing the two halves. The wrapper almost seems redundant, but maybe I'm wrong. Edited June 17, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
L.Adlon Posted June 17, 2014 Author Share Posted June 17, 2014 Here's the coding for the split (with the actual text and stuff stripped away for ease of reading): <div style="width:920px; margin:0 auto;"> <div style="width:300px; margin:0px; float:left;"> <img title="Photo" alt="" src="image/photo.jpg" height="256" width="221" class="gallery" style="float:left; margin-left:40px; margin-right:0px; margin-bottom:20px;" /> </div> <div style="width:615px; margin:0px; float:right;"> <p>(PARAGRAPH OF TEXT)</p> <p>(PARAGRAPH OF TEXT)</p> <p>(PARAGRAPH OF TEXT)</p> </div></div> The split itself always worked fine... just the text following it overlapping (which is now fixed, now that I'm actually using the correct syntax for clear). Just the wrapper is acting weird. I tried setting the height of the wrapper to 100px, just to check... and it did expand (although it didn't push the split elements down). So, right now, the wrapper is 0px heigh (in Firefox, at least), rather than incasing the split elements, and expanding as a result. Must be something outside of this affecting it... although I did a validation, and there's no open tags or anything like that. Link to comment Share on other sites More sharing options...
davej Posted June 18, 2014 Share Posted June 18, 2014 You usually need to add overflow:hidden or overflow:auto to blocks which contain floating blocks or they will collapse to zero-height. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>tab</title><style>div{border:1px dotted red;}img{ height:256px; width:221px;float:left; margin:0 0 20px 40px; }</style></head><body><div style="width:920px; margin:0 auto;overflow:hidden;"> <div style="width:300px; margin:0px; float:left;"> <img title="Photo" alt="alt" src="http://www.tomjewett.com/accessibility/rgb.jpg" class="gallery"/> </div> <div style="width:615px; margin:0px; float:right;"> <p>(PARAGRAPH OF TEXT)</p> <p>(PARAGRAPH OF TEXT)</p> <p>(PARAGRAPH OF TEXT)</p> </div></div></body></html> Link to comment Share on other sites More sharing options...
L.Adlon Posted June 18, 2014 Author Share Posted June 18, 2014 Ah! That makes sense. I've never really used the overflow before, except maybe once for an iFrame, I think. Okay, that totally makes sense. I'll throw that in, and see how it goes. Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now