2 Divs side by side

yandoo · November 29, 2013

Hiya I can't get my 2 divs to sit next to each other. Instead the 2nd one is below the first (although with space between then if they were side by side)

Heres the css:

#wrapper{
width: 800px;
 float: left;
  border: 1px solid;
  margin: auto;
}

#workshop1{
width: 300px;
height:420px;
background-color: #028ec1;
border-radius:25px;
 padding-top: 5px;
  float: left;

  }

#image1{
width: 300px;
height:188px;
  padding-top: 5px;
}

#description1{
width: 280px;
height:160px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  word-spacing:-1px;
  color: #ffffff;
  font-size: 13px;
  text-align: justify
}

#workshop2{
width: 300px;
height:420px;
background-color: #028ec1;
border-radius:25px;
 padding-top: 5px;
margin-left: 400px;
  float: left;
  }

#image2{
width: 300px;
height:188px;
  padding-top: 5px;
}

#description2{
width: 280px;
height:160px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  word-spacing:-1px;
  color: #ffffff;
  font-size: 13px;
  text-align: justify
}

If anybody could help that would be ace.

Thanks

PravinS · November 30, 2013

check this sample CSS and HTML

#maindiv
{
    width:500px;
    background-color:#000;
    height:100px;
    padding:3px;
}
#leftdiv
{
    width:250px;
    background-color:red;
    float:left;
    height:100px;
}
#rightdiv
{
    width:250px;
    background-color:#fff;
    float:right;
    height:100px;
}


<div id="maindiv">
    <div id="leftdiv"></div>
    <div id="rightdiv"></div>
</div>

linuxfreakphp · December 22, 2013

here is my way with two div's in the same line:

html sample code: ( as sub div's to 'sub' it's works as well. )

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<!--<div id='sub'>-->
			<div id='sub1'>1</div>
			<div id='sub2'>2</div>
		<!--</div>-->
	</body>
</html>

css sample code:

/* background-color sub1 and sub2 */
#sub1
{
background-color: #3856FF;
}
#sub2
{
background-color: #1A44FF;
}
/* width + height + display (two div's in the same line) */
#sub1, #sub2
{
display:inline-block;
height:400px;
width:400px;
}

notice: if you will change:

display:inline-block;

into this line:

/*display:inline-block;*/

you will see what display do.

here i got a sample with three div's in the same line:

(html)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<link rel="stylesheet" href="index3.css" />
	</head>
	<body>
		<!--<div id='sub'>-->
			<div id='sub1'>1</div>
			<div id='sub2'>2</div>
			<div id='sub3'>3</div>
		<!--</div>-->
	</body>
</html>

(css)

/* background-color sub1 and sub2 */
#sub1
{
background-color: #3856FF;
}
#sub2
{
background-color: #1A44FF;
}
#sub3
{
background-color: #FFEB6C;
}
/* width + height + display (two div's in the same line) */
#sub1, #sub2, #sub3
{
display:inline-block;
height:400px;
width:400px;
}

w3cschool - display

hope that will help you.

Sign In

2 Divs side by side

Recommended Posts

yandoo

Link to comment

Share on other sites

PravinS

Link to comment

Share on other sites

linuxfreakphp

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information