we have 4 lines displaying like this in page
we want to move all texts of first column to left & keep all 4 colon[:] in same line
<div class="all-link">
<p>Delivery :</p>
<span>Delivery.com</span>
<div style="clear: both; height: 0px;"> </div>
<p>Parcelled.in:</p>
<span>Parcelled.in</span>
<div style="clear: both; height: 0px;"> </div>
<p>DTDC:</p>
<span>DTDC</span>
<div style="clear: both; height: 0px;"> </div>
<p>Speed Post:</p>
<span>Speed Post</span>
<div style="clear: both; height: 0px;"> </div>
</div>
i am trying with `position : relative & left , right pixels but i need to use lot of code for that.
Check below html, it might help you.
<div class="all-link">
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Delivery <b style="float:right">:</b></p>
<span>Delivery.com</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Parcelled.in <b style="float:right">:</b></p>
<span>Parcelled.in</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">DTDC <b style="float:right">:</b></p>
<span>DTDC</span>
<div style="clear: both; height: 0px;"> </div>
<p style="display: inline-block;margin: 0;text-align: left !important;width: 90px;">Speed Post <b style="float:right">:</b></p>
<span>Speed Post</span>
<div style="clear: both; height: 0px;"> </div>
</div>
Ths is really tabular data so an actual table would be best but CSS Tables can manage this with a slight HTML structure change.
Wrap each paragraph and associates span in a div and these wrapper can act as table rows.
.all-link {
display: table;
margin: 1em;
}
.all-link .row {
display: table-row;
}
.all-link .row p,
.all-link .row span {
display: table-cell;
padding: .25em;
border:1px solid lightgrey;
}
.all-link .row p {
text-align: right;
}
<div class="all-link">
<div class="row">
<p>Delivery :</p>
<span>Delivery.com</span>
</div>
<div class="row"><p>Parcelled.in:</p>
<span>Parcelled.in</span>
</div>
<div class="row">
<p>DTDC:</p>
<span>DTDC</span>
</div>
<div class="row">
<p>Speed Post:</p>
<span>Speed Post</span>
</div>
</div>
Related
[enter image description here][1]currently i am facing one problem.
I generated table using div with fix header and scrollbar to div row section.
but problem is both div are not taking whole 50% 50% width.
I have tried following code.but not working.
.brd2 {
height: auto;
max-height: 100px;
overflow: auto;
position: absolute;
width: 100%;
}
.back-clr {
background-color: red;
}
HTML PART
<div class="container">
<div class="row">
<div class="col-md-8">
<div style="display: table;width:100%">
<div style="display: table-row">
<div style="width:50%; display: table-cell;">
Test
</div>
<div style="width:50%; display: table-cell;">
test
</div>
</div>
<div class="brd2" style="display: table-row;">
<div class="content" style="width:50%; display: table-cell;">
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
</div>
<div class="content back-clr" style="width:50%;display: table-cell;">
this is second div
</div>
</div>
</div>
</div>
</div>
</div>
Is it possible to use some divs and css to make a book cover like the one below(ignore the orange background) with editable titles, most the book covers I checked online don't look like this. I know am probably asking a lot but I would really appreciate any help on this.
Yes.
<div style="width:400px; height:800px">
<div style="display: table; width:400px; height: 100px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle; background-color:blue;">
<h4 style="color:white;text-align:center">
<i style="color:yellow">image</i>Training book header text
</h4>
</div>
</div>
<div style="display: table; width:400px; height: 250px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<h1 style="text-align:center">Training book body text</h1>
</div></div>
<div style="display: table; width:400px; height: 100px;">
<div style="display: table-cell; vertical-align: middle; background-color:grey;">
<h4 style="color:white;text-align:center">
Training book footer text<i style="color:yellow; float:right">image</i>
</h4>
</div>
</div>
</div>
https://jsfiddle.net/457567wy/
I am trying to center the text span in the following table-cell, table-row
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-cell; width:400px;">
<div style="display: table-row; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
jsfiddle ( http://jsfiddle.net/7p3zgne0/ )
table-cell and table-row are inverted.
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-row; width:400px;">
<div style="display: table-cell; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
It should probably be like this:
<div style="display: table; margin-left: auto; margin-right: auto;">
<div style="display: table-row; width:400px;">
<div style="display: table-cell; text-align: center;">
<span>
Test
</span>
</div>
</div>
</div>
Note how the table-cell is inside the table-row. In your code, you have them the other way around.
http://jsfiddle.net/sfcaa3Lk/
<div align="center">
center aligned content (like a span)
</div>
Apply this to your deepest div node
I have a two divs it's containing in parent div. first div at left side and second at right.
So, i want a right div at middle of parent with out using margin.
HTML
<div class="clearfix" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="rfloat" style="background-color: #00FF66; display: table-cell; vertical-align: middle;">
Follow
Message
Report
</div>
</div>
CSS
.inline-block {
display: inline-block;
}
.rfloat {
float: right;
}
.lfloat {
float: left;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
and here's jsfiddle http://jsfiddle.net/fmr3Y/
This how you can do it
DEMO
HTML
<div class="rfloat" style="background-color: #00FF66; display: table; height: 60px">
CSS
a {
display: table-cell;
vertical-align: middle;
}
Use display:table -- demo
<div class="clearfix" style="background-color: #CCCCCC; display:table;width:100%;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
<div class="ss" style="background-color: #00FF66; display: table-cell; vertical-align: middle;"> Report
Message
Follow
</div>
</div>
You could mimic the flex justify-content with display and text-align:justify : DEMO
.inline-block {
display: inline-block;
font-size:16px;/* do not forget to reset font-size to childs*/
font-size:1rem;
text-align:center;/* left, right, .. */
}
.justify:after {
display: inline-table;
content: " ";
width:100%;
height:0;
vertical-align:top;/* no extra gap please */
}
.justify {
text-align:justify;/* will span element from one side to the other */
font-size:0;/* reduce line-height and avoid gap from pseudo element */
}
HTML updated with class name :
<div class="justify" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;vertical-align: middle;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="inline-block" style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</div>
I had Changed Your structure to make Right Div at center
<table class="clearfix" style="background-color: #CCCCCC; width: 100%;text-align: center; ">
<colgroup>
<col style="width: 19%"/>
<col style="width: 75%"/>
</colgroup>
<tr>
<td>
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
</td>
<td>
<div style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</td>
</tr>
</table>
Here is Working Demo Too.Working Fiddle
I am trying to split the page into two sections. One left area and right will be the content page. I have the following html but looks like it is not working. Any ideas, what I am not doing right?
<div id="wuiMainArea">
<div id="wuiMainContent">
<div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
</div>
</div>
Like this
<div id="wuiMainArea" style="border: 1px solid;">
<div id="wuiMainContent" style="border: 1px solid;">
<div id="wuiLeftArea" style="border: 1px solid;float: left;">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav" style="border: 1px solid; float: left;">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
#wuiMainArea, #wuiMainContent{
margin: 0 auto;
width: 960px;
}
#wuiLeftArea, #wuiInpageNav{
/* use half of the main content div's width */
/* -2 because of 1px-border on both sides */
width: 478px;
display: inline-block;
float: left;
}
It'll be better to use CSS styling HTML.
Define the widths to fit your needs. Also I recommend using classes instead of ids when appling same styles to multiple elements.