I'm using this css (below) but box 1 and box 2 won't line up side by side inside container1. box 2 is directly below box1. What can I do to fix this? Any help will be appreciated. .container1 { border:1px solid #; background: #; padding:0px; width:1290px; height:320px; display:block; margin:0px; } .box1 { width: 610px; height: 300px; background: #; display:inline-block; border: 1px solid #000000; border-width: 1px; padding: 0px; margin: 0px; } .box2 { border:1px solid #800000; border-width: 1px; padding:0px 0px 0px 0px; display:inline-block; width:580px; height:255px; margin:0px; } HTML:
Your second DIV isn't inline-block... NOT that you should use inline-block as this is really more FLOAT's job... Though fixing the height of such tall elements, alongside the inaccessible wreck that makes up the fixed widths makes one wonder if what you're attempting to do even belongs on a website. Also the incomplete declarations (did you remove the colors for some reason?) could make anything after those lines be ignored. But as sweatpea69 said, we really need to see the markup you're applying this too. CSS without the markup it's applied to is like saying "It's green" without actually saying what it is.
Thanks for your replies. Please tell me what you mean by "your second DIV isn't inline-block"? Here's the html. I look forward to additional help, please. </head> <body> <div class="container"> <div class="box1"> <div id="content"> <div class="gallery"> <ol> <li> <div class="tn3 content"> <video width="620" height="343" type="video/mp4" poster="../img/image1.jpg" src="../video/"></video> </div> </li> </ol> </div> </div> </div> </div> <div class="box2"> <span class="headline">Text Sample Text</span><br /> <span class="home-text">Text sample text sample text sample text sample</span> </div> <div class="container1"> <div class="box1"> <div id="content"> <div class="gallery"> <ol> <li> <div class="tn3 content"> <video width="620" height="343" type="video/mp4" poster="../img/image1.jpg" src="../video/"></video> </div> </li> </ol> </div> </div> </div> </div> <div class="box2"> <span class="headline">Text Sample Text</span><br /> <span class="home-text">Text sample text sample text sample text sample</span> </div> </body> </html> Code (markup):
That's a my bad -- I didn't see the inline-block on .box2 Generally speaking inline-block due to the unpredictable space between inline-level elements (that's different between browsers AND fonts AND font-size AND font renderers) using them to try and put things next to each-other is unreliable. Try this: .container1, .box1, .box2 { margin:0; padding:0; } .container1 { overflow:hidden; /* wrap floats */ width:1290px; /* also trips haslayout, so floats are wrapped legacy IE */ height:320px; } .box1 { float:left; width:610px; height:300px; border: 1px solid #000000; } .box2 { overflow:hidden; /* prevent float de-indent */ width:580px; height:255px; border:1px solid #800000; } Code (markup): Should do what you are trying to do... though again the fixed widths is just asking to build an inaccessible website; whatever it is you are trying to do for layout, I would advise against even TRYING to do it. Likewise you've got some issues in the markup like using span+BR to do a numbered heading's job, ordered list around VIDEO for christmas only knows what, etc, etc...
Deathshadow come look at my new post in CSS, and use your expertise to solve this brain dead problem i am having with my code.
It was very simple; I don't understand why people replied so long. Only we have to tell him to use float property.