how can i achieve the attached layout
using html, bootstrap, CSS
where the circles will contains an images
and a detail box will be beside them
question has been updated with code snippet
what i have done is not accurate the sizes not responsive
and if i make the circle bigger than the rectangle it does not align vertically in middle
also the code inside the rectangle is not middle
could any one please provide me a demo
custom layout
.rectangle1{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle1{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.rectangle1{
display: inline-block;
height: 100px;
width: 100%;
background: #6f0a18;
position: relative;
}
.circle1{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.circle2{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
right:0%;
margin-right:-25px;
top: 0px;
background:red;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="rectangle1">
<img class="circle1" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-left: 100px;">Title</h3>
<p style="padding-left: 100px;"> Sub Title</p>
</div>
</div>
<div class="col-md-6">
<div class="rectangle1">
<img class="circle2" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-right: 100px; text-align: right;">Title</h3>
<p style="padding-right: 100px; text-align: right;"> Sub Title</p>
</div>
</div>
</div>
</div>
.outer-wrapp {
padding:30px;
}
ul {
list-style:none;
padding:0;
}
ul li {
margin: 55px 0px;
}
.wrapp{
padding:0px 15px;
}
.left .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-left: 5%;
padding-left: 20%;
}
.left .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
left: -37.5px;
}
.right .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-right: 5%;
padding-right: 20%;
}
.right .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
right: -37.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapp">
<div class="row">
<div class="col-xs-6 col-sm-6">
<ul class="left">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
<span>Text</span>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<ul class="right">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Try this. it works for you.
Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
height: 40px;
width: 40px;
background-color: #000;
border-radius: 50%;
}
#id1 {
border: 1px solid black;
padding: 11px;
margin: 30px;
width: 100px;
}
</style>
</head>
<body>
<h2>Circle CSS</h2>
<div class="circle"><div id='id1'> text here</div></div>
</body>
</html>
try this
.container{
width:100%;
background:red;
margin:10px 0;
}
#image{
width:20%;
float:left;
}
#image img{
border-radius: 50px;
}
#text{
width:80%;
float:left;
}
#text h3{
padding:10px;
}
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
Related
i am beginner to css.
i want to make new div into new line like this,
i try my code like this
<style>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.one{
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
</style>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
but result like this
how to move, the second image to new line..
pls anybody help me. i ll appreciate your answer
div{
/*display:inline-block;*/ /* deleted */
/*float:left;*/ /* deleted */
color:#fff;
font-size:20px;
}
.some {
margin-bottom: 10px; /* new */
}
.one{
float: left; /* new */
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
separate each block ( here i added a div with class name some )
and as you want one side .one and another side .three so just add float:left; on .one
you can use something like this.
.box-wrapper {
border: 1px solid #000;
width: 100%;
display: block;
position: relative;
}
.box-wrapper:before, .box-wrapper:after{
clear:both;
display:table;
content:"";
}
.box-tall {
width: 50%;
background:#ded9d9;
height: 200px;
float: left;
}
.box-left {
width: 50%;
float: left;
}
.box-1 {
background: #8f8fde;
height: 100px;
}
.box-2 {
background: #d2c47a;
height: 100px;
}
<div class="box-wrapper">
<div class="box-tall">
tall
</div>
<div class="box-left">
<div class="box-1">top</div>
<div class="box-2">bottom</div>
</div>
</div>
You should add clear:both or clear:left to make the div to be displayed in the new line
Try the following code after style tag
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<br>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<br>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
I think this is what you want to do
Hope it helps
Let me know if you require any further help
You need to clear the float on your .one div.
This is the only part that would change:
CSS:
.one{
width:100px;
height:100px;
background:red;
clear:left;
margin-bottom: 15px;
}
You may want to consider altering your markup as well by wrapping each group of divs, but this will get you what you need.
Fiddle: https://jsfiddle.net/k4dw68pg/
Here is the solution.
try this code out :
<style>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.one{
width:100px;
height:100px;
background:red;
clear:both;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
</style>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
You can use the below. you were not clearing out your floats.
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="clearfix">
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="clearfix">
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.clearfix{
clear:both;
}
.one{
width:100px;
height:100px;
background:red;
margin-bottom:20px;
display:block !important;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
You can add a div to wrap your group of image/name/desc and then set clear: both; to this div:
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.image-wrapper {
clear: both;
margin-bottom: 20px;
}
.one{
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="image-wrapper">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
I am trying to create a list that will show messages. The image below is what I wish to achive. Check the codepen for how it looks as of now!:
As you can see apart of the ui jumps up as it it utilizing float. I can't set a fixed height on the avatar red area as the message area can vary in height (basically the whole message can vary in size). I've gotten it to work by removing the float on the text-container however I'm not able to lineup the green arrow then. Any ideas?
Hree is codepen code for yous to fiddle with!
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="center">
<ol id="holder" class="scroll" style="background:pink;">
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
</div>
<div class="text-arrow">
</div>
</li>
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
</div>
<div class="text-arrow">
</div>
</li>
</ol>
</div>
</body>
</html>
css:
/* Styles go here */
div.center
{
max-width: 1200px;
width: 1000px;
min-width:800px;
display: block;
margin-left: auto;
margin-right: auto;
}
ol {
list-style-type: none;
padding: 0em;
margin: 0em;
}
li {
display: inline;
margin: 0em;
padding: 0em;
left: 0em;
}
message {
background: red;
width: 100%;
height: auto;
}
div.thumb-fav-container {
margin-top: 20px;
float:left;
padding:10px;
width:70px;
background: lime;
}
div.thumb-fav-row {
height:20px;
margin-left:5px;
margin-bottom:5px;
background: silver;
}
div.thumb {
float:left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-size: contain;
}
div.fav {
float: left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png');
background-size: contain;
}
div.thumb-fav-num {
float: left;
margin-left:10px;
text-align: center;
background: pink;
}
div.text-container {
float:left;
margin-left:10px;
margin-top: 10px;
width:700px;
padding:20px;
background: silver;
}
div.text-arrow {
margin-top:20px;
float:left;
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-left: 30px solid lime;
border-top: 30px solid transparent;
}
div.message-avatar-container {
float:right;
padding:10px;
margin-top: 20px;
width:100px;
height:70px;
background: red;
}
div.message-avatar {
float:left;
width:50px;
height:50px;
background-image:url('http://findicons.com/files/icons/1072/face_avatars/300/a04.png');
background-size: contain;
}
Little mistake in your CSS:
Instead of:
message {
background: red;
width: 100%;
height: auto;
}
You should have:
.message {
clear:both;
float:left;
height: auto;
}
This yields the expected output (demo):
.image-fixed-size-and-vertical-middle {
width: 40px;
height: 40px;
vertical-align: middle;
padding-top: auto;
padding-bottom: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group">
<li class="list-group-item">
<div class="col-xs-3 col-md-2">
<div class="image-fixed-size-and-vertical-middle">
<img class="img-responsive" src="http://placehold.it/122x122">
</div>
</div>
<div class="col-xs-9 col-md-10">
<h4>header</h4>
<p>content</p>
</div>
<div class="clearfix"></div>
</li>
</ul>
The image is in the top of col. how to make it vertical middle?
plz try this one:
Html:
<div class="image-fixed-size-and-vertical-middle">
<img class="image" src="http://www.mictronics.de/yampp_color_themes/bmp0_test_image.bmp" />
</div>
Css
.image-fixed-size-and-vertical-middle{
display:table-cell;
vertical-align:middle;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}
.image-fixed-size-and-vertical-middle img{
position:relative;
height:100px;
border:1px solid grey;
}
ty to use this in style
<style>
.image-fixed-size-and-vertical-middle
{
position:relative;
min-height:69px;
}
.image-fixed-size-and-vertical-middle img
{
width: 40px;
height: 40px;
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
margin:auto;
}
</style>
Here is the demo code I have tried to written. Please help me...
#mainContainer {
width: 100%;
height: 100%;
white-space: nowrap;
background: brown;
}
ul {
list-style: none;
}
#mainContainer > ul {
column-count: auto;
-webkit-column-count: auto;
-moz-column-cont: auto;
column-width: 300px;
-webkit-column-width: 300px;
-moz-column-width: 300px;
background: yellow;
}
#mainContainer > ul > li {
display: inline-block;
height: 50px;
}
#id1 li,
#id2 li {
background: blue;
padding: 1%;
border-radius: 5px;
width: 300px;
text-align: center;
margin: 5px 0px;
}
<div id="mainContainer">
<ul>
<li>
<div id="id1">
<h2>Title 1</h2>
<hr/>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<li>l4</li>
</ul>
</div>
</li>
<li>
<div id="id2">
<h2>Title 2</h2>
<hr/>
<ul>
<li>l5</li>
<li>l6</li>
<li>l7</li>
<li>l8</li>
</ul>
</div>
</li>
</ul>
</div>
I want to have only vertical scrolling so I have made the main container div of infinite width with css white-space attribute.
I want to divide the list elements in proper column as given in figure.
Modify ul css as below:
#mainContainer > ul {
column-count:auto;
-webkit-column-count:auto;
-moz-column-cont:auto;
column-width:300px;
-webkit-column-width:300px;
-moz-column-width:300px;
background:yellow;
white-space:normal; //added
width:100%;//added
}
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/730/
How about this alternativ, without the column count.
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
#main>li {
display: inline-block;
vertical-align: top;
min-width: 300px;
}
#main h2 {
font-size: 1em;
border-bottom: 1px solid black;
}
#main>li>ul {
width: 100%;
}
#main ul li {
display: inline-block;
width: 47%;
margin: 1%;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
text-align: center;
}
<ul id="main">
<li>
<h2>Title 1</h2>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<li>l4</li>
</ul>
</li>
<li>
<h2>Title 2</h2>
<ul>
<li>l5</li>
<li>l6</li>
<li>l7</li>
<li>l8</li>
</ul>
</li>
</ul>
Demo Code Successfully working
css
.mainContainer-for-features{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:#000;}
.mainContainer-for-features header{position:fixed; top:0px; left:0px; right:0px; width:100%; height:45px; padding-top:15px; text-align:center; background:rgba(0,0,0,0.8); color:#fff;}
#content-display { position:absolute; top:60px; left:0px; right:0px; bottom:0px; background:#fff; white-space:nowrap; overflow:hidden; overflow-x:auto; padding-left:15px;}
.cols{display:inline-block;}
.blocks{width:400px; height:150px; background:blue; margin:3px;}
html
<div class="mainContainer-for-features" id="ebooks-mainContainer">
<header>Simple CSS Grid</header>
<div id="content-display">
<div style="display:inline-block; background:#fff; padding:10px;">
<h1>Title 1</h1><hr/>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
</div>
<div style="display:inline-block; background:#fff; padding:10px;">
<h1>Title 2</h1><hr/>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
</div>
</div>
</div>
I want to display two boxes inline. I tried a lot to solve it.
.checks {
width:100%;
}
.moinfo {
background:#F29400;
width:50%;
padding-left:10px;
padding-right:10px;
margin-top:30px;
color: white !important;
padding-bottom:20px;
height:300px;
display:inline-block;
}
.role {
background:green;
width:50%;
padding-left:10px;
padding-right:10px;
margin-top:30px;
color: white !important;
padding-bottom:20px;
height:300px;
}
.hmovie {
border-bottom:3px dotted #93117E;
color:white;
width:200px;
}
.cat {
float:left;
width:100%;
padding-bottom:3px;
border-bottom:2px dotted white;
}
.cat {
float:left;
width:100%;
padding-bottom:3px;
}
.subcat {
float:left;
width:40%;
}
.dcont {
float:left;
width:60%;
}
<div class='checks'>
<div class='moinfo'>
<h2 class='hmovie'>Movie Information</h2>
<div class='cat'>
<div class='subcat'>Genre:</div>
<div class='dcont'>".$dummy[0]."</div>
</div>
<div class='cat'>
<div class='subcat'>Year:</div>
<div class='dcont'>".$dummy[1]."</div>
</div>
<div class='cat'>
<div class='subcat'>Running Time:</div>
<div class='dcont'>".$dummy[2]."</div>
</div>
<div class='cat'>
<div class='subcat'>Language:</div>
<div class='dcont'>".$dummy[3]."</div>
</div>
<div class='cat'>
<div class='subcat'>Subtitles:</div>
<div class='dcont'>".$dummy[4]."</div>
</div>
<div class='cat'>
<div class='subcat'>Country:</div>
<div class='dcont'>".$dummy[5]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Awards:</div>
<div class='dcont'>".$dummy[6]."</div>
</div>
</div>
<div class='role'>
<h2 class='hmovie'>Cast Information</h2>
<div class='cat'>
<div class='subcat'>Cast:</div>
<div class='dcont'>".$dummy[7]."</div>
</div>
<div class='cat'>
<div class='subcat'>Director:</div>
<div class='dcont'>".$dummy[8]."</div>
</div>
<div class='cat'>
<div class='subcat'>Writer:</div>
<div class='dcont'>".$dummy[9]."</div>
</div>
<div class='cat'>
<div class='subcat'>Producers:</div>
<div class='dcont'>".$dummy[10]."</div>
</div>
<div class='cat'>
<div class='subcat'>Music:</div>
<div class='dcont'>".$dummy[11]."</div>
</div>
<div class='cat'>
<div class='subcat'>Cinematography:</div>
<div class='dcont'>".$dummy[12]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Editor:</div>
<div class='dcont'>".$dummy[13]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Sound:</div>
<div class='dcont'>".$dummy[13]."</div>
</div>
</div>
</div>
JSFiddle Demo
Any help will be appreciated.
Since you have applied padding, the effective total width of both <div>'s with width 50% will be more than 100%. You can Apply box-sizing:border-box for both the <div>s to include the padding while calculating the width and height.
Still, inline-block elements will respect the linebreaks in your HTML which will be converted to a white space, Breaking your 100% total again. You can either try fixing it using these hackish methods, Or you can simply float them left and right respectively instead.
.checks {
width:100%;
}
.moinfo {
box-sizing:border-box;
float:left;
background:#F29400;
width:50%;
padding-left:10px;
padding-right:10px;
margin-top:30px;
color: white !important;
padding-bottom:20px;
height:300px;
}
.role {
box-sizing:border-box;
float:right;
background:green;
width:50%;
padding-left:10px;
padding-right:10px;
margin-top:30px;
color: white !important;
padding-bottom:20px;
height:300px;
}
.hmovie {
border-bottom:3px dotted #93117E;
color:white;
width:200px;
}
.cat {
float:left;
width:100%;
padding-bottom:3px;
border-bottom:2px dotted white;
}
.cat {
float:left;
width:100%;
padding-bottom:3px;
}
.subcat {
float:left;
width:40%;
}
.dcont {
float:left;
width:60%;
}
<div class='checks'>
<div class='moinfo'>
<h2 class='hmovie'>Movie Information</h2>
<div class='cat'>
<div class='subcat'>Genre:</div>
<div class='dcont'>".$dummy[0]."</div>
</div>
<div class='cat'>
<div class='subcat'>Year:</div>
<div class='dcont'>".$dummy[1]."</div>
</div>
<div class='cat'>
<div class='subcat'>Running Time:</div>
<div class='dcont'>".$dummy[2]."</div>
</div>
<div class='cat'>
<div class='subcat'>Language:</div>
<div class='dcont'>".$dummy[3]."</div>
</div>
<div class='cat'>
<div class='subcat'>Subtitles:</div>
<div class='dcont'>".$dummy[4]."</div>
</div>
<div class='cat'>
<div class='subcat'>Country:</div>
<div class='dcont'>".$dummy[5]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Awards:</div>
<div class='dcont'>".$dummy[6]."</div>
</div>
</div>
<div class='role'>
<h2 class='hmovie'>Cast Information</h2>
<div class='cat'>
<div class='subcat'>Cast:</div>
<div class='dcont'>".$dummy[7]."</div>
</div>
<div class='cat'>
<div class='subcat'>Director:</div>
<div class='dcont'>".$dummy[8]."</div>
</div>
<div class='cat'>
<div class='subcat'>Writer:</div>
<div class='dcont'>".$dummy[9]."</div>
</div>
<div class='cat'>
<div class='subcat'>Producers:</div>
<div class='dcont'>".$dummy[10]."</div>
</div>
<div class='cat'>
<div class='subcat'>Music:</div>
<div class='dcont'>".$dummy[11]."</div>
</div>
<div class='cat'>
<div class='subcat'>Cinematography:</div>
<div class='dcont'>".$dummy[12]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Editor:</div>
<div class='dcont'>".$dummy[13]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Sound:</div>
<div class='dcont'>".$dummy[13]."</div>
</div>
</div>
</div>
You need to add display:inline-flex to your .checks.
.checks {
width: 100%;
display: inline-flex;
}
.moinfo {
background: #F29400;
width: 50%;
padding-left: 10px;
padding-right: 10px;
margin-top: 30px;
color: white !important;
padding-bottom: 20px;
height: 300px;
display: inline-block;
}
.role {
background: green;
width: 50%;
padding-left: 10px;
padding-right: 10px;
margin-top: 30px;
color: white !important;
padding-bottom: 20px;
height: 300px;
}
.hmovie {
border-bottom: 3px dotted #93117E;
color: white;
width: 200px;
}
.cat {
float: left;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px dotted white;
}
.cat {
float: left;
width: 100%;
padding-bottom: 3px;
}
.subcat {
float: left;
width: 40%;
}
.dcont {
float: left;
width: 60%;
}
<div class='checks'>
<div class='moinfo'>
<h2 class='hmovie'>Movie Information</h2>
<div class='cat'>
<div class='subcat'>Genre:</div>
<div class='dcont'>".$dummy[0]."</div>
</div>
<div class='cat'>
<div class='subcat'>Year:</div>
<div class='dcont'>".$dummy[1]."</div>
</div>
<div class='cat'>
<div class='subcat'>Running Time:</div>
<div class='dcont'>".$dummy[2]."</div>
</div>
<div class='cat'>
<div class='subcat'>Language:</div>
<div class='dcont'>".$dummy[3]."</div>
</div>
<div class='cat'>
<div class='subcat'>Subtitles:</div>
<div class='dcont'>".$dummy[4]."</div>
</div>
<div class='cat'>
<div class='subcat'>Country:</div>
<div class='dcont'>".$dummy[5]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Awards:</div>
<div class='dcont'>".$dummy[6]."</div>
</div>
</div>
<div class='role'>
<h2 class='hmovie'>Cast Information</h2>
<div class='cat'>
<div class='subcat'>Cast:</div>
<div class='dcont'>".$dummy[7]."</div>
</div>
<div class='cat'>
<div class='subcat'>Director:</div>
<div class='dcont'>".$dummy[8]."</div>
</div>
<div class='cat'>
<div class='subcat'>Writer:</div>
<div class='dcont'>".$dummy[9]."</div>
</div>
<div class='cat'>
<div class='subcat'>Producers:</div>
<div class='dcont'>".$dummy[10]."</div>
</div>
<div class='cat'>
<div class='subcat'>Music:</div>
<div class='dcont'>".$dummy[11]."</div>
</div>
<div class='cat'>
<div class='subcat'>Cinematography:</div>
<div class='dcont'>".$dummy[12]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Editor:</div>
<div class='dcont'>".$dummy[13]."</div>
</div>
<div class='lcat'>
<div class='subcat'>Sound:</div>
<div class='dcont'>".$dummy[13]."</div>
</div>
</div>
</div>
There are 2 ways to do this:
You need to add "display:inline-block" to the second element + "box-sizing: border-box;" to both elements in order to include the padding in the "50%" width.
Your code should look like this:
.moreinfo{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display:inline-block;
width:50%;
}
Remove the display property and add "float:left" (this will actually change the display to block);
Add "overflow:hidden" to the parent.
http://jsfiddle.net/7jeye9y6/7/
you need to add
display:inline-block
to second box, and change width of boxes
http://jsfiddle.net/7jeye9y6/2
Just add display inline flex to you .checks class and -webkit-inline-flex if safari
.checks{
width:100%;
display:inline-flex;
}
You need to use display:inline-block for both the div. Also use box-sizing:border-box to calculate excess padding. Update your CSS like below.
.moinfo{
background:#F29400;
width:50%;
padding-left:10px;
padding-right:10px;
margin-top:30px;
color: white !important ;
padding-bottom:20px;
height:300px;
display:inline-block;
font-size: 14px;
box-sizing:border-box;
}
.role{
background:green;
width:50%;
padding-left:10px;
padding-right:10px;
margin-top:30px;
color: white !important ;
padding-bottom:20px;
height:300px;
font-size: 14px;
display:inline-block;
box-sizing:border-box;
}
DEMO
You are using 50% 50% and placing paddings left and right of 10px; this makes it more than 100%; also, either you choose float:left; or display:inline;
This Made them displayed inline:
.moinfo{
background:#F29400;
width:46%;
margin:0px;
padding-left:2%;
padding-right:2%;
margin-top:30px;
color: white !important ;
padding-bottom:20px;
height:300px;
display:inline-block;
float:left;
}
.role{
margin:0px;
background:green;
width:46%;
padding-left:2%;
padding-right:2%;
margin-top:30px;
color: white !important ;
padding-bottom:20px;
height:300px;
float:left;
}
Add this into your .moinfo and .role
display:inline-block;
box-sizing:border-box;