#create-summary {
width: 200px;
height:150px;
margin-top:20px;
overflow-x:auto;
overflow-y:auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2
<div class="lv5">1.2.2.2.1. Title1.2.2.2.1</div>
<div class="lv5">1.2.2.2.2. Title1.2.2.2.2
<div class="lv6">1.2.2.2.2.1 Title1.2.2.2.2.1</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see the
class "lv6" and class"lv5" is not display correctly even I set overflow-x:auto.
How to set overflow:x auto to make it correctly?
You mean like that?
#create-summary {
width: 180px;
height:200px;
margin-top:20px;
overflow-x: auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
white-space: nowrap;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
You need to make the whole div larger, Or you can set overflow-x to scroll.
#create-summary {
width: 250px;
height:200px;
margin-top:20px;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
Add CSS white-space: nowrap; to lvl elements.
Related
The Dompdf has a bug that it does not base on the div css to scale size which the div has over the page size. I have tried the table which the css not work for it. How can i limit the size?
Here is the code:
HTML
<style>
.table {
display: table;
width:100px;
padding:5px;
}
.row {
display: table-row;
border-bottom: 1px solid black;
width:100px;
}
.cell {
display: table-cell;
width:100px;
border: 1px solid #000000;
text-align:left;
padding:3px;
}
.cell_DB{
width:100px;
}
</style>
<div class="table cell_DB" border="0" cellpadding="3">
<div class="row cell_DB" >
<div class="cell cell_DB" >
Title
</div>
</div>
<div class="row cell_DB">
<div class="cell cell_DB">
<p class="cell_DB">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>
<br/>
</p>
</div>
</div>
<div class="row cell_DB">
<div class="cell cell_DB">
<p class="cell_DB" style="color: blue">
</p>
</div>
</div>
</div>
This is currently solution which make the display to be block.
.cell_DB{
display:block;
}
<p style="word-wrap:break-word;width:98%;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
Try adding <div style="width:80%;"> ....CODES... </div> after </style> tag
I have a sidebar and I want it to fit the browser height.So I used 100vh.
It does work if I deleted the p element(with the background-text class).
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
But when I keep the p element It doesnt work
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
How can I keep the p element and still make the sidebar fit the browser screen height (sorry for my bad english).
if you add float:left to sidebar it works:
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
float:left;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
for an overview on css designing principles take a look at this!!
I want to use div elements to create a table-like layout.
What I want
.tableStyle td {
background: red;
color: #fff
}
.contentBox {
min-height: 200px;
}
<table class="tableStyle" width="100%" cellspacing="10">
<tr>
<td width="25%">
<div class="contentBox">One</div>
</td>
<td width="25%">Two</td>
<td width="50%" colspan="2">Three</td>
</tr>
<tr>
<td colspan="2">
<div class="contentBox">Four</div>
</td>
<td colspan="2">Five</td>
</tr>
</table>
What I have
.table {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 10px;
color: #fff
}
.table .row {
display: table-row;
}
.table .table-cell {
display: table-cell;
background: red;
width: 50%;
}
.contentBox {
min-height: 200px;
}
.table .smlCell {
width: 25%;
}
.table .table {
border-spacing: 0;
}
<div class="table">
<div class="row">
<div class="table-cell">
<div class="table">
<div class="row">
<div class="table-cell smlCell">
<div class="contentBox">One</div>
</div>
<div class="table-cell smlCell">
Two
</div>
</div>
</div>
</div>
<div class="table-cell">Three</div>
</div>
<div class="row">
<div class="table-cell">
<div class="contentBox">Four</div>
</div>
<div class="table-cell">Five</div>
</div>
</div>
I want to have equal spacing between the cells marked "One" and "Two".
I also want all cells in a row to be of same height.
After searching on net, I know that there are some limitations or issues
for display: table such as a lack of colspan/rowspan equivalents which may help what I'm trying to accomplish.
Is there anyway (apart form <table>) to create this?
Sure there is!
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='table'>
<div class='cell'>One</div>
<div class='cell'>Two</div>
</div>
<div class='cell'>Three</div>
</div>
<div class='row'>
<div class='cell'>Four</div>
<div class='cell'>Five</div>
</div>
</div>
CSS
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
width:100%;
height:100%;
}
.cell {
display:table-cell;
width:50%;
}
.row {
display:table-row;
}
.cell {
background:red;
color:white;
border:5px solid white;
}
Try this. I have used inline instead of CSS class. You had placed one div in wrong location.
<div class="table">
<div class="row">
<div class="table-cell">
<div class="table">
<div class="row">
<div class="table-cell smlCell">
<div style="width:50% float: left" class="contentBox">One
</div>
<div style="width:50% float: right" class="contentBox">
Two
</div>
</div>
</div>
</div>
</div>
<div class="table-cell">Three</div>
</div>
<div class="row">
<div class="table-cell">
<div class="contentBox">Four</div>
</div>
<div class="table-cell">Five</div>
</div>
</div>
with support for older (ms-explorer?). But if your content is table by it's nature, use table and not those tricks :-)
<!DOCTYPE HTML>
<html>
<head>
<title>Bla!</title>
<style type='text/css'>
/* reset sizing model ... */
* { box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
/* basic div definitions */
div { display:inline-block; min-height:50px; background-color:red; border:solid 3px white; }
/* 1/2 line div */
div.half { width:50%; }
/* 1/4 line div */
div.quater { width:25%; }
</style>
</head>
<body class='body' id='body' >
<div class='quater'> One </div><div class='quater'> Two </div><div class='half'> Three </div><div class='half'> Four </div><div class='half'> Five </div>
</body>
</html>
I'm using div instead of table but I am not getting the border increased while the content increase in a column.
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">am unable to get the white space between col while the content increases</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
.divTable{
display:table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
}
.divRow{
display:table-row;
width:auto;
clear:both;
background-color:#ccc;
}
.divCell{
float:left;
display:table-column;
width:100px;
border-left: 2px solid #fff;
}
Kindly go through the link below:
http://jsfiddle.net/vasanthanvas/H4Zug/
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
http://jsfiddle.net/4Y6cJ/3/
What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:
<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s
.panel { width:100%; padding-bottom:30px; overflow: hidden }
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
HTML
<div class="pick_group">
<h2>Name 1</h2>
<img class="photo" />
<p class="text"></p>
</div>
<div class="pick_group">
<h2>Name 2</h2>
<img class="photo" />
<p class="text"></p>
</div>
The CSS
place this in between just before the
.pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}
.pick_group h2{
style if you want
}
.photo {
width: 200px;
float: left;
margin: 10px 25px;
}
.text {
width: 500px;
float: left;
margin: 10px 25px;
}