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;
}
ralphm
October 11, 2013, 2:37am
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:
When posting a coding question, it’s important to help people to help you. Ideally, post a link to a web page that demonstrates the issue. If that’s not possible (for example, if your site is not live yet) there are various other options. You might,...
Reading time: 7 mins 🕑
Likes: 11 ❤
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>
PaulOB
October 11, 2013, 4:01pm
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.