GPSJane Posted December 23, 2009 Share Posted December 23, 2009 This seems like it should be obvious so I blame it on the lack of sleep (and my HTML/CSS rustiness).How on earth do I get a second <DIV> block to appear next to the one before it? For some reason I am just stuck. Link to comment Share on other sites More sharing options...
jeffman Posted December 23, 2009 Share Posted December 23, 2009 Not so obvious. Tutorials still don't cover this thoroughly enough. The key is the float property.In your CSS, the first div will need a width definition. You probably have that, but it needs saying. Both divs will need this: float:left . That will push them up to each other. The next element on the page will need this: clear:both. That will make sure it starts on the next "line." The floating divs will also need to be the same total height (margins, padding etc. combined total), or the clear property won't work correctly in all browsers. The element that is supposed to be on the next line will get hooked up on the edge of one of the previous blocks. Link to comment Share on other sites More sharing options...
GPSJane Posted December 23, 2009 Author Share Posted December 23, 2009 Not so obvious. Tutorials still don't cover this thoroughly enough. The key is the float property.In your CSS, the first div will need a width definition. You probably have that, but it needs saying. Both divs will need this: float:left . That will push them up to each other. The next element on the page will need this: clear:both. That will make sure it starts on the next "line." The floating divs will also need to be the same total height (margins, padding etc. combined total), or the clear property won't work correctly in all browsers. The element that is supposed to be on the next line will get hooked up on the edge of one of the previous blocks.Ok so I tried float but all I ended up with was the second block under the first block. The second block must take it's width from the total available space less the first block's width. The first block has a width though. Also the height thing could get tricky as it's fluid but I'll cross that bridge when I get to it. Link to comment Share on other sites More sharing options...
thescientist Posted December 23, 2009 Share Posted December 23, 2009 A div should automatically take up the available width, hence the second block should just take up the remaining space. Hard to tell without seeing the code in question. Could you elaborate on your concern regarding the height issue?If possible, providing a link or your code as you pose some of these questions, we can help identify the problem/solution quicker. Link to comment Share on other sites More sharing options...
GPSJane Posted December 23, 2009 Author Share Posted December 23, 2009 I went back and did it again to check and actually it works!But now I have a whole new set of problems. It's very weird...The second block is set way lower than the first. Odd.Then all the links from the first block are repeating in the second block but not using the original text - rather the new text in the second block. That is so weird.Since this probably doesn't make sense, you can look on http://weblizard.co.za.plesk8.wadns.net/index2.html to see what I mean Link to comment Share on other sites More sharing options...
GPSJane Posted December 23, 2009 Author Share Posted December 23, 2009 Nevermind, I found my mistake. I deleted the closing </A>'s when deleting something else.I think that was my problem with everything including the blocks not aligning.Thanks! Link to comment Share on other sites More sharing options...
thescientist Posted December 23, 2009 Share Posted December 23, 2009 Do you use Firefox to develop in/with? By outlining elements, I can see that there is some sort of link above your first line that say content in #content.Also, there could be some potential confusion to arise from having <HTML xmlns="http://www.w3.org/1999/xhtml"> when you're validating to a HTML DTD. It throws an error in the validator I think, and confusing a DTD could be dicey.Sometime when laying out a site, I like to keep borders on my elements as I place them about the page so as to better visualize the space the elements take up. And then I remove them as it all comes together. Link to comment Share on other sites More sharing options...
thescientist Posted December 23, 2009 Share Posted December 23, 2009 I think the blocks not aligning is because you're first element in your #content div is an h3 tag. Link to comment Share on other sites More sharing options...
GPSJane Posted December 23, 2009 Author Share Posted December 23, 2009 Hey thanks. Yeah I used to keep borders on too. I should.Why on earth would an H3 tag cause the content DIV to misalign?I think it may actually be because of the line-height property in A.menu which causes the text to be little lower. But I can't get the text in the A block to vertically align otherwise...? Link to comment Share on other sites More sharing options...
GPSJane Posted December 23, 2009 Author Share Posted December 23, 2009 Ok, so I added the borders for a clearer view and then realised that the contents DIV is not 100%, so I added full lines of text. Now it is 100% - of the BODY and it's underneath the menu DIV. I tried float:right which did nothing.It's available on http://weblizard.co.za.plesk8.wadns.net/index2.html Do you use Firefox to develop in/with? By outlining elements, I can see that there is some sort of link above your first line that say content in #content.Also, there could be some potential confusion to arise from having <HTML xmlns="http://www.w3.org/1999/xhtml"> when you're validating to a HTML DTD. It throws an error in the validator I think, and confusing a DTD could be dicey.Sometime when laying out a site, I like to keep borders on my elements as I place them about the page so as to better visualize the space the elements take up. And then I remove them as it all comes together. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.