Distortion Posted November 2, 2009 Share Posted November 2, 2009 I have a site with a gradient background. In this background I have a white bar where the main content goes. The content is made up out of other boxes so I get something like. <div class="content"> <div class="box1"> blehblehbleh </div> <div class="box1"> blehblehbleh </div> <div class="box2"> blehblehbleh </div> <div class="box3"> blehblehbleh </div></div> I haven't specified a height for 'content' because I want it to wrap around the other boxes.IE knows what to do, but firefox completely ignores the boxes and stops somewhere completely random.Any suggestions? Link to comment Share on other sites More sharing options...
thescientist Posted November 3, 2009 Share Posted November 3, 2009 It would certainly help me, and for others I'm sure, if we could actually see what you're talking about. Link to comment Share on other sites More sharing options...
how2html Posted November 3, 2009 Share Posted November 3, 2009 <div class="content"> <div class="box1"> blehblehbleh </div> <div class="box1"> blehblehbleh </div> <div class="box2"> blehblehbleh </div> <div class="box3"> blehblehbleh </div></div> I really don't get the question. You are going to have to explain further, or give a link to your webpage. Link to comment Share on other sites More sharing options...
Distortion Posted November 3, 2009 Author Share Posted November 3, 2009 - Link to comment Share on other sites More sharing options...
jlhaslip Posted November 3, 2009 Share Posted November 3, 2009 .memberbox, .ratebox are presently positioned using 'absolute' methods.check out the 'float' method for positioning the second column.Float, margin and padding are what you need to study. Lots of 2-column layouts are to be found on GOOGLE. Link to comment Share on other sites More sharing options...
thescientist Posted November 3, 2009 Share Posted November 3, 2009 no doctype either! :)check this out and tidy your page up too...validator.w3.org Link to comment Share on other sites More sharing options...
Distortion Posted November 3, 2009 Author Share Posted November 3, 2009 float sucks. If I use float my box goes everywhere exept where I want it, my page is perfectly tidy if you don't like it tidy it up yourself, you might be right about the doctype though, margin and padding have influence on the rest of your page which I don't want, and google layouts are google layouts, not my layouts.I'll figure this out myself thank you. Link to comment Share on other sites More sharing options...
thescientist Posted November 3, 2009 Share Posted November 3, 2009 float sucks. If I use float my box goes everywhere exept where I want it, my page is perfectly tidy if you don't like it tidy it up yourself, you might be right about the doctype though, margin and padding have influence on the rest of your page which I don't want, and google layouts are google layouts, not my layouts.I'll figure this out myself thank you.wow, ok, sorry we're all just trying to help. There's really no need for attitude when you're the one coming to a community for help. But still, we persist on anyway...By setting a doctype, you force the browser into rendering a certain way, one which might be a bit more predictable, and also something you could anticipate for. The reason people recommend float is because other position attributes are somewhat unreliable and tend to make things get all wonky, and floats, padding's, and margin's generally accomplish most of what people require when it comes to positioning elements. Validating, with a good (read: strict DTD) is a good way to reduce the number of potential rendering conflicts that can arise cross-browser, and will make you're code more readable, reliable, standards compliant, and scalable. As far as 'Google layouts', I think he just meant that there are plenty of examples out there to help you find what you're looking for, and then you could come back and ask more questions if you were still confused. Most people just suggest Google because I think these days it's the most common search engine.Hope that clears some things up for you. Good practices are better to adopt early on, and you'll thank us for showing you the way. The people here know what they are doing because a lot of them do this professionally or are just innately good at this kind of stuff. I would just take the time to listen first before simply dismissing what has been good advice and offerings of assistance. Link to comment Share on other sites More sharing options...
Synook Posted November 4, 2009 Share Posted November 4, 2009 Note that floats, rather than absolute positioning, are the correct way to lay things out. Link to comment Share on other sites More sharing options...
Distortion Posted November 4, 2009 Author Share Posted November 4, 2009 ok I'm sorry, its just that on every site I've asked this untill now people gave me the same short answer like, oh it's your doctype. But it isn't. And I got a little angry because I still haven't found why FF does this.I've validated it, but I didn't get any errors except for not specifying the doctype.I can't really find the thing I want on google. They'll have pretty much the same as I had, but without the white content box that isn't working on my site.I removed the link because the php/mysql scripts are still very unsafe.Using floats is what I tried to do first, but I can't locate something higher than its original position with float.This is what I want. When I use float on the left boxes, it'll go next to the last item instead of next to the first. Hence I used float only for the items and not for the boxes. Link to comment Share on other sites More sharing options...
thescientist Posted November 4, 2009 Share Posted November 4, 2009 This is why he suggested a two column layout. Have a column/container/div for the items and another column/container/div for your boxes.<div id="container" width="700px"><div id="boxes" padding-left="500px"> boxes</div><div id="items "float:left"> items</div></div>or something like that. that was only meant as a quick illustration, the styles are obviously not declared right and should be in a CSS, but again, google will have this kind of info. seriously though, its the first link! Link to comment Share on other sites More sharing options...
Distortion Posted November 5, 2009 Author Share Posted November 5, 2009 Please don't pretend I'm stupid. The only thing I wanted to know is why firefox doesn't act the way IE does and if there was a workaround.Since you're not able to answer that question I'll use your 'google' method. My original question was not 'how to do a 2 column css layout' so that google link is slightly inappropriate. However, because it seems to be a fact that "floats, rather than absolute positioning, are the correct way to lay things out. "I'll reprogram my css with 2 extra boxes.Please note that with absolute positioning everything worked great, except for the interpreting mistake by firefox. Link to comment Share on other sites More sharing options...
Synook Posted November 5, 2009 Share Posted November 5, 2009 Did it work in Webkit et al.? One of the problems with absolute positioning is that it doesn't exactly work that well cross-browser. Also, it doesn't work as well with dynamic content, and breaks up the flow of elements. It is still appropriate to use absolute positioning in some cases, but not for the overall document layout. Link to comment Share on other sites More sharing options...
Distortion Posted November 6, 2009 Author Share Posted November 6, 2009 Thanks for that tip, i'll keep that in mind.The problem is that I've removed all absolute positions and it still doesn't do what I want. At least the browser support is consistent now, IE also doesn't seem to notice the content box. There must be a programming error somewhere, I'll look into that again.I don't know what Webkit is, i tried to download the program (i have windows vista) but it gave me an error when I started FindSafari.exeThank you for the help so far. Link to comment Share on other sites More sharing options...
thescientist Posted November 6, 2009 Share Posted November 6, 2009 what's your code up to now? Link to comment Share on other sites More sharing options...
Synook Posted November 7, 2009 Share Posted November 7, 2009 I don't know what Webkit is, i tried to download the program (i have windows vista) but it gave me an error when I started FindSafari.exeWebkit is the rendering engine used by Safari, Chrome, Konqueror (sort of) and some mobile browsers. It uses a implementation method distinct from Firefox's Gecko, IE Trident, and Opera's Presto engines to figure out how to render pages, and as a result you can sometimes (or often) get differing results for the different browsers... even though they all follow the same standards!Unless you want to make your own browser, you probably want to download Safari or Chrome, rather than the engine itself. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.