Trying to line up two boxes side by side without success

HTML & CSS
1

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;
}
2

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:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

[COLOR="#FF0000"][I]your CSS here[/I][/COLOR]

</style>
	
</head>
<body>

[COLOR="#FF0000"][I]your HTML here[/I][/COLOR]

</body>
</html>

Full guidelines:

3

Thanks for your help


<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

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).


<!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.:slight_smile: