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;
Related
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>
I have made 4 rectangle boxes in CSS. Here is the fiddle for it.
At this moment, they are looking exactly similar to the below design. I am wondering, how I can make exactly same (below) design (which I have made in fiddle) in Bootstrap 4
The CSS which I am using for the boxes are:
/***** Company heads CTO, CFO, and CEO START ************/
.company-heads {
margin-left: 300px;
padding-top: 80px;
font-style: italic;
margin-right: 289px
}
.company-heads .rectangle {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
margin-right: 22px;
width: 355px;
height: 100px;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 100px;
position: relative;
}
.company-heads .rectangle .circle {
background: #aaa;
border-radius: 100%;
height: 60px;
width: 60px;
position: absolute;
top: 20px;
left: 20px;
}
/***** Company heads CTO, CFO, and CEO FINISH ************/
The width of the rectangle box is currently 355px but can be adjust according to the screen size.
I tried using the following code in Bootstrap 4 but it didn't work out.
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 left-side">ABC</div>
<div class="col-lg-3 right-side">DEF</div>
</div
</div>
.row {
text-align:center;
}
.col-md-4 {
border-radius:20px;
margin:10px;
border:1px solid #000;
display:inline-block;
float:none !important;
}
.col-md-2 {
border-radius:100%;
height:60px;
width:60px;
background:#ccc;
width:25%;
margin:20px;
}
.row h1, .row p {
font-style:italic;
text-align:left;
}
.row h1 {
font-size:1.4em;
}
.row p {
font-size:1em;
}
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-2"></div>
<h1>Will's profile, CEO</h1>
<p>Say something inspiring will</p>
</div>
<div class="col-md-4">
<div class="col-md-2"></div>
<h1>Will's profile, CEO</h1>
<p>Say something inspiring will</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-2"></div>
<h1>Zeeshan, CTO</h1>
<p>Say something inspiring</p>
</div>
<div class="col-md-4">
<div class="col-md-2"></div>
<h1>Whoever yall hire next</h1>
<p>Say something inspiring</p>
</div>
</div>
</div>
Here is the codepen of the demo working. New Demo
h1 {
font-style: italic;
}
p {
font-style: italic;
}
.col-md-5 {
border-radius:15px;
margin:10px;
border:1px solid #000;
}
.col-md-2 {
border-radius:100%;
height:60px;
width:60px;
background:#ccc;
width:25%;
margin:20px;
}
.row h1 {
font-size:1.4em;
}
.row p {
font-size:1em;
}
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="col-md-2"></div>
<h1>Will's profile, CEO</h1>
<p>Say something inspiring will</p>
</div>
<div class="col-md-5">
<div class="col-md-2"></div>
<h1>Will's profile, CEO</h1>
<p>Say something inspiring will</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="col-md-2"></div>
<h1>Zeeshan, CTO</h1>
<p>Say something inspiring</p>
</div>
<div class="col-md-5">
<div class="col-md-2"></div>
<h1>Whoever yall hire next</h1>
<p>Say something inspiring</p>
</div>
</div>
</div>
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>
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 have the following HTML:
<p>messy</p>
<div class="row">
<div class="cell">
<div class="one wrapper">1</div>
</div>
<div class="cell">
<div class="two wrapper">2</div>
</div>
<div class="cell">
<div class="three wrapper">
<div class="foo">3</div>
</div>
</div>
</div>
<p>good</p>
<div class="row">
<div class="cell">
<div class="one wrapper">1</div>
</div>
<div class="cell">
<div class="two wrapper">2</div>
</div>
<div class="cell">
<div class="three wrapper">3</div>
</div>
</div>
With this CSS:
.row {
display: table;
table-layout: fixed;
overflow: hidden;
background-color:blue;
width:100%;
}
.cell {
display: table-cell;
overflow: hidden;
padding: 0;
}
.wrapper {
overflow: hidden;
position: relative;
padding:0;
display: block;
height:42px;
background-color:red;
}
.one {
width:100px;
}
.two {
width:40px;
}
.three {
width:100px;
}
.foo {
padding: 10px;
}
You can see the fiddle here.
Why is three messing up the layout in case a child has a padding? I've read various articles about margin collapsing in the past, but I could'nt fix this layout using one of the techniques.
It's simple just add vertical-align: middle; in .cell Class.
jsFiddle