Hello, i need a little bit of help on my site that i am developing: www[dot]aquafishy[dot]com See those 2 boxes? I need them side by side. Here is the code: HTML: <div class="sidebar"> <span class="style1">Heading </span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque venenatis nibh at nulla. Fusce magna ipsum, volutpat non, bibendum a, tincidunt at, odio. Mauris massa. Nam dignissim nunc nec dolor. Sed ut lectus id est posuere commodo. Proin sit amet odio. In accumsan vestibulum ante. Duis aliquet lacinia nisi. Nulla sagittis felis a pede. Ut porta diam vitae metus. Etiam fermentum ligula eu diam. Vivamus orci pede, vehicula in, nonummy a, auctor eu, purus. Nam eu ipsum. Vivamus ullamcorper. Morbi risus quam, pretium ut, convallis in, nonummy sit amet, sem. Phasellus ultrices, mauris non facilisis fringilla, est pede tristique turpis, eu iaculis orci quam nec leo. Duis mauris eros, facilisis vel, scelerisque nec, aliquam et, nisi. </p> </div> <div class="content"> <span class="style1">Heading </span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque venenatis nibh at nulla. Fusce magna ipsum, volutpat non, bibendum a, tincidunt at, odio. Mauris massa. Nam dignissim nunc nec dolor. Sed ut lectus id est posuere commodo. Proin sit amet odio. In accumsan vestibulum ante. Duis aliquet lacinia nisi. Nulla sagittis felis a pede. Ut porta diam vitae metus. Etiam fermentum ligula eu diam. Vivamus orci pede, vehicula in, nonummy a, auctor eu, purus. Nam eu ipsum. Vivamus ullamcorper. Morbi risus quam, pretium ut, convallis in, nonummy sit amet, sem. Phasellus ultrices, mauris non facilisis fringilla, est pede tristique turpis, eu iaculis orci quam nec leo. Duis mauris eros, facilisis vel, scelerisque nec, aliquam et, nisi. </p> </div> Code (markup): CSS: .sidebar { margin: 10px; padding: 5px; background: #202020; border: 1px solid #000000; width: 210px;} .sidebar h2 { font-size: 18px; font-weight: bold; text-align: justify; } .content { margin: 10px; padding: 5px; background: #202020; border: 1px solid #000000; width: 210px;} .content h2 { font-size: 18px; font-weight: bold; text-align: justify; } Code (markup): I also need to fix my 2nd Navigation Bar, the text is supposed to be white and when you hover over the links it should turn blue, as it does in Firefox. But it doesnt seem to work in IE6 (The color of the text is blue even when you dont hover) CSS code of My nav bar: .second_nav ul li { display: inline; text-color: #F0F0F0; } .second_nav { font-size:12px; text-color: #F0F0F0; border-top: 1px solid #000; border-bottom: 1px solid #000; background: url('images/sec_nav.gif'); padding: 3px; margin: 0px 0px 0px 0px; margin-bottom: 3px; } .second_nav ul { lcolor: #F0F0F0;margin: 0px 0px 0px 25px; padding: 0px; padding-left: 10px; } .second_nav ul li a { ; color: #F0F0F0;padding: 3px 4px 3px 4px; margin: 0; margin-bottom: 3px; } .second_nav ul li a:hover { background: url('images/sec_nav_hov.gif'); color: #2a95c6; padding: 3px; border: 1px solid #000;} Code (markup): Hope you guys can help. Cheers!
You could float them: .sidebar { margin: 10px; padding: 5px; background-color: #202020; border: 1px solid #000; width: 210px; float: left; <-- you can do this so long as you have a width specified .content { margin: 10px; padding: 5px; background-color: #202020; border: 1px solid #000; width: 210px; float: left; <---- so long as there's room, this div will "float" next to the other } h1, h2 { font-size: 18px; font-weight: bold; text-align: justify; } Code (markup): I would not have two different classes if the stylings are the same, but then I assume your site isn't finished. I think you're not using correct properties for the nav bar: .second_nav ul li { display: inline; text-color: #F0F0F0; <-- color refers to text; there is no "text-color" that I know of } Code (markup): but even so, my fake IE6 did the same thing as my FF; is it possible you have an override setting on your IE? The user's browser can have a stylesheet as well, and it overrides what's on the page in some instances. Looks fine to me.
Thanks, you have fixed my worse problem of my divs. Which i love you for But i still don't know how to fix my Nav bar. Code: .second_nav ul li { display: inline; color: #F0F0F0; } .second_nav { font-size:12px; color: #F0F0F0; border-top: 1px solid #000; border-bottom: 1px solid #000; background: url('images/sec_nav.gif'); padding: 3px; margin: 0px 0px 0px 0px; margin-bottom: 3px; } .second_nav ul { color: #F0F0F0;margin: 0px 0px 0px 25px; padding: 0px; padding-left: 10px; } .second_nav ul li a { color: #F0F0F0;padding: 3px 4px 3px 4px; margin: 0; margin-bottom: 3px; } .second_nav ul li a:hover { background: url('images/sec_nav_hov.gif'); color: #2a95c6; padding: 3px; border: 1px solid #000;} Code (markup): Also, howd i make the div on the right so it fills up the rest of the page? Will percentage work?
Other than changing "text-color" to "color", I don't know what you could fix-- like I said, on my (fake for Linux) IE, it does what it's supposed to. Have you tried looking at the site on another computer's IE? The float: left thing is one idea. Another thing you could do is have a main container div around the two you already have-- called main or wrapper or whatever. The div on the right could have position: relative instead of float, and then you'd set the margins for it (whatever size you want on top, bottom, and right sides), with the left side being a margin big enough to fit the left div (for instance, make the margin-left: 220px or so, because then there's room for the left div which is 210 px wide). The left div stays with float: left. Anything that floats needs a width on it. You could try (with what you have now, two floating divs) to give the right div a width of like 80% or something.
MAN, you deserve a cookie for this Thanks! It all works now! I positioned the box on the right to position: relative then set margins. Thankyou so much. (You can test it by resizing your window!) I added reputation. Argh: Now in IE 6 on my pc, the left border of the right hand side box is missing.
Hmmm, yeah I see it too. Good thing it's a black border in a black box on an almost black background : ) There's no IE bug regarding this that I know of... you could try setting a defined width (in pixels) for the right box (so it doesn't widen to fill the screen) and then add/remove margins from both boxes to see if somehow the border is being covered up. (The set width would only be for testing purposes; you'd change it back to what you have now when you're done.)
Ok, i need it to strech to the width of the screen, when i increase the right hand side box's left margin to around 600px the border appears, but it only appears when its about 200px away from the other box..
If adding a margin to the left side of the right box eventually fixes it... you could remove (make a negative) the right margin of the left box. That may help you keep their positions correct while still showing the border... James' example is nice, except there are no margins mentioned anywhere. Since you want a space between two of your boxes, one of them needs a margin. James' version is more like my first example I gave you: two floating boxes. If you are still using my second example with one floating box and one relatively-positioned box, then you have to keep the left margin on the right box to give the float room (I believe... someone can tell me otherwise). Two floating boxes next to each other keep each other away-- one shouldn't crowd the other, so if you are using the two floating boxes, you'd only need enough margin on each to give a bit of room between the two and between their outer edges and the edge of the page. If you go back to two floating boxes, I think you can still have left box width=whatever and right box width=80% but then I wonder how that works out with different screen resolutions or when the browser is resized. Play with them all.
You can see how I handled margins via W3C Style Sheet (CSS) Validation of my Home page - scroll down to see the code. You may prefer to use margins for only one of each adjoining box. BTW, floating boxes using % produces layout that renders as intended in all screen resolutions -- you avoid the horizontal scrolling often required by use of fixed positioning (pixels for example) in reduced screen resolutions. James