SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    733
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to line up two boxes side by side without success

    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.

    Code:
    .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;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Make sure to give us all the info. CSS on its own has no meaning, as it has no context. Set up a working example like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    your CSS here
    
    </style>
    	
    </head>
    <body>
    
    your HTML here
    
    </body>
    </html>

    Full guidelines:
    http://www.sitepoint.com/forums/show...Posting-Basics
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    733
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help
    Code:
    <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>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You didn't have the divs inside the main container and you always need to set the vertical-alignment when using display;inline-block (or when using display:table-cell).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .container1 {
    	border:1px solid #000;
    	background: #ccc;
    	width:1270px;
    	display:block;
    	margin:0px;
    	padding:10px;
    }
    .box1 {
    	width: 620px;
    	min-height: 300px;
    	background: red;
    	display:inline-block;
    	*display:inline;/* ie7 hack for inline-block*/
    	*zoom:1.0;
    	vertical-align:top;
    	border: 1px solid #000;
    }
    .box2 {
    	border:1px solid #800;
    	display:inline-block;
    	*display:inline;/* ie7 hack for inline-block*/
    	*zoom:1.0;
    	vertical-align:top;
    	width:580px;
    	min-height:255px;
    }
    .gallery ol{
    	margin:0;
    	padding:0;
    	list-style:none;	
    }
    </style>
    </head>
    
    <body>
    <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 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>
    </body>
    </html>
    You also set the video to 620px but your wrapper was smaller than that. Dimensions must add up correctly or things will stick out.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •