I have written tabular structure using DIV controls. It shows data correct only when column values have same length of characters. If column values have different number of characters then column gets enlarge itself to accommodate all characters in a column. How to set FIX width of each column DIV?
I have following HTML DIV structure:
<body>
<div class="ParentContainer">
<div id="row1" class="row">
<div>
<label id="row1_to" class="divLabel">contact1#test.com
</label>
</div>
<div>
<label id="row1_from" class="fromLabel">test1#something.com
</label>
</div>
<div>
<label id="row1_subject" class="subLabel">Need to create new organization1
</label>
</div>
</div>
<div id="row2" class="row">
<div>
<label id="row2_to" class="divLabel">contact2#test.com
</label>
</div>
<div>
<label id="row2_from" class="fromLabel">test2#something.com
</label>
</div>
<div>
<label id="row2_subject" class="subLabel">Need to create new organization2
</label>
</div>
</div>
</div>
</body>
Following is the CSS:
.ParentContainer
{
margin: 0 auto;
width: 960px;
table-layout:fixed;
}
.row
{
background-color: #FFFFFF;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #CFD4DA;
font-size: 12px;
}
.row > div
{
display: inline-block;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
.rowSelected
{
background-color: #CEE3F6;
}
.fromLabel
{
position: relative;
left: 64px;
}
.subLabel
{
position: relative;
left: 120px;
}
Please suggest.
You forgot to style those div as table:
Relevant CSS:
.ParentContainer {
display: table;
...
}
.row {
display: table-row;
...
}
.row > div {
display: table-cell;
...
}
Demo: http://jsfiddle.net/abhitalks/824hw/1/
Make your div display as a table cell and assign width for the table cell. Remove position relative property for your labels.
Update your css like below.
.ParentContainer
{
margin: 0 auto;
width: 960px;
table-layout:fixed;
}
.row
{
background-color: #FFFFFF;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #CFD4DA;
font-size: 12px;
display:table-row;
}
.row > div
{
display: table-cell;
width:33%;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
.rowSelected
{
background-color: #CEE3F6;
}
.fromLabel, .subLabel, .divLabel
{
text-align:left;
}
JSFIDDLE DEMO
Related
I have set my search bar div element as inline-block, as well as the img.
However, the div element is below the image, instead on the same horizontal line.
Anyone can advise me why this is happening?
body {
margin: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#header img {
height: 56px;
display: inline-block;
margin-left: 20px;
}
#search {
display: inline-block;
}
#search input {
display: inline-block;
width: 584px;
height: 38px;
border: 1px solid #d9d9d9;
}
#search input:hover {
border: 1px solid black;
}
<div id="header">
<img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" />
<div id="search">
<form>
<input type="text" name="search" />
</form>
</div>
</div>
Your styles are working as they should; the #search input element's width is just too wide! Try looking at the result on a wider screen, and you will see the elements appear inline as expected.
Anticipating your next question, you can prevent wrapping of inline elements using the rule (on the container, e.g. #header):
white-space: nowrap
Anticipating your next question (if I may be so bold), you will probably want to set CSS rule:
vertical-align: middle
on both #header img and #search to get the look you want.
Here is the code snippet with what you want. The problem here is width of input. Since its more it bring the div to next line.
body {
margin: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#header img {
height: 56px;
display: inline-block;
margin-left: 20px;
}
#search {
display: inline-block;
height: 100%;
position: relative;
top: -22px;
}
#search input {
display: inline-block;
width: 480px;
height: 38px;
border: 1px solid #d9d9d9;
}
#search input:hover {
border: 1px solid black;
}
<div id="header">
<img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" />
<div id="search">
<form>
<input type="text" name="search" />
</form>
</div>
</div>
The total width of image and search input is greater than full width of screen. Try with lesser width either of image or search input.
try this one
body {
margin: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#header img {
height: 56px;
display: inline-block;
margin-left: 5px;
}
#search {
display: inline-block;
height: 100%;
position: relative;
top: -22px;
}
#search input {
display: inline-block;
width: 450px;
height: 38px;
border: 1px solid #d9d9d9;
}
#search input:hover {
border: 1px solid black;
}
<div id="header">
<img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" />
<div id="search">
<form>
<input type="text" name="search" />
</form>
</div>
</div>
Here is a codepen with my issue http://codepen.io/anon/pen/aNWEvQ.
HTML:
<div class="dialog-wrapper">
<div class="dialog">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.dialog-wrapper {
border: 1px solid red;
position: absolute;
}
.dialog {
min-width: 50px;
max-width: 80%;
border: 1px solid green;
margin: auto;
}
p {
border: 1px solid blue;
font-size: 16px;
font-family: Arial;
}
Why does the p tag not expand to the width of the text and force .dialog and .dialog-wrapper to expand as well?
Is there CSS that can make the paragraph expand as I desire?
Since .dialog-wrapper is absolutely positioned and all left, right and width are auto, its width will be determined by the shrink-to-fit algorithm. Basically, it will be the width of the text.
Then, if you use max-width: 80% on a child, that will be smaller than the width of the text. So the text will overflow, or it will break into multiple lines.
Instead, you should add some margin:
.dialog {
margin: 0 10%;
}
* {
box-sizing: border-box;
}
.dialog-wrapper {
border: 1px solid red;
position: absolute;
}
.dialog {
min-width: 50px;
border: 1px solid green;
margin: 0 10%;
}
p {
border: 1px solid blue;
font-size: 16px;
font-family: Arial;
}
.wrapper2 {
top: 100px;
}
.wrapper2 p {
width: 253px;
}
.wrapper3 {
top: 200px;
}
.wrapper3 p {
width: 315px;
}
<div class="dialog-wrapper">
<div class="dialog">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
<div class="dialog-wrapper wrapper2">
<div class="dialog">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
<div class="dialog-wrapper wrapper3">
<div class="dialog">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
Change the .dialog { max-width: 100%; }
and both they will expand.
Try this :
.dialog-wrapper {
display: table;
// add other properties
}
.dialog {
display: table-cell;
// add other properties
}
p {
display: table-cell;
// add other properties
}
Now the parent container dialog-wrapper will now adjust to the width of the child elements, i.e. dialog and p.
Use word-wrap:break-word on the style for p.
Remove fixed widths of p. You may also want to give your
.dialog-wrapper a fixed width.
codepen: http://codepen.io/anon/pen/WwjddX
I want to left align the textareas within two different divs.
Below is what have tried, but it doesn't work.
.credentials {
margin-top: -5px;
background-color: black;
}
label {
margin-left: 20px;
color: white;
vertical-align: middle;
}
textarea {
vertical-align: middle;
height: 25px;
margin-top: 10px;
margin-left: 30px;
}
.username {
height: 50px;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>
It outputs the following result:
Try this CSS table layout (no markup changes). Set the container div as table, and two inner divs as table-row, and label + textarea as table-cell, with some other CSS adjustments, see the comments in the code snippet.
.credentials {
display: table;
width: 100%;
background: black;
border-collapse: separate;
border-spacing: 10px; /*for spacing*/
}
.username, .key {
display: table-row;
}
label, textarea {
display: table-cell;
vertical-align: middle; /*or top/bottom*/
}
label {
width: 1%; /*small value*/
white-space: nowrap; /*prevent wrapping*/
color: white;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>
Edit: as one of the comment below pointed out using <input> elements rather than <textarea>, and I think that makes sense. See the updated code snippet.
.credentials {
display: table;
width: 100%;
background: black;
border-collapse: separate;
border-spacing: 10px; /*for spacing*/
}
.credentials .username,
.credentials .key {
display: table-row;
}
.credentials label,
.credentials input[type="text"],
.credentials input[type="password"]{
display: table-cell;
vertical-align: middle;
padding: 4px;
}
.credentials label {
width: 1%; /*small value*/
white-space: nowrap; /*prevent wrapping*/
color: white;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<input type="text">
</div>
<div class="key">
<label>Activation key:</label>
<input type="password">
</div>
</div>
There is more than one way to achieve this, answer of Pangloss is nice but i like to suggest something different also without touching the code.
I would never use textarea for this kind of work
calc is a relative new thing check your search engine for more information
If you don't know the < selector in css i suggest to look over here
.credentials {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
/*fallback color if nothing is found*/
}
.credentials > div > label {
display: inline-block;
min-width: 150px;
/*maximum width of label*/
text-align: right;
/*style*/
padding: 5px;
/*style*/
}
/*extra to make sure it never flip under label and stay inside view*/
.credentials > div > textarea {
max-width: calc(100% - (150px + 5px + 5px + 8px + 8px + 1px + 1px));
/* min-width + padding-left + padding-right + margin-left + margin-right + border-left + border right OR just 178px */
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>
Here is a fiddle of the below:
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
line-height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>
What I want is for the #filterSeparator to be aligned with the other divs.
For some reason, all the other divs are below the #filterSeparator.
If I put text inside #filterSeparator, then it works.
Is there a way for me to get it to work without placing any text inside #filterSeparator?
fiddle
For inline / inline-block elements, use the vertical-align property:
.filterDivActual, #filterSeperator {
display: inline-block;
vertical-align: middle ; /* or some other value: */
}
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
I don't know why it does this but you can fix it by using float:left; instead of display:inline-block
Putting content in the empty <div> will fix it.
<div id='filterSeperator'> </div>
#filterSeparator:before {
content: ".";
visibility: hidden;
}
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
#filterSeparator:before {
content: ".";
visibility: hidden;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>
I want to set three header div's 25% 50% 25% Horizontally, shown in image, have laid them three div's in header div with corresponding css, but the div's are placed vertically shown here.
Have checked with previous answers which I couldn't get a lead, give me a directions please! Thanks
HTML code:
<div id="header">
<div id="header-left" class="div-border">
<h6 align="center">Image holder</h6>
</div>
<div id="header-middle" class="div-border">
<h1 align="center">Dashboard</h1>
</div>
<div id="header-right" class="div-border">
<h6>
<span >
<span style="line-height: 24px;" id="border-around">
<b>Profile | Help | Admin </b>
</span>
</span>
</h6>
</div>
</div>
CSS code:
#header {
background-color:#fecb00;
color:white;
text-align:center;
padding:5px;
}
#header-left {
width: 25%;
}
#header-middle {
width: 50%;
}
#header-right {
width: 25%;
}
.div-border {
border: 2px solid silver;
}
#border-around {
border: 1px solid #000;
}
You have to set box-sizing: border-box to include borders to width calculation, set display: inline-box to display elements inline, vertical-align: middle and eliminate white spacing between divs.
.div-border {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/khbv2mac/1/
Your elements are displayed as block elements by default, which means that they will take an entire 'line' to themselves unless floated. You can either float your elements, or display them inline-block.
The accumulated width of your three elements is wider than 100% of the width of the page, because their borders are not included in the width you specify. You can fix this by changing box-sizing.
Note: I have commented out the white-space between your inline-block elements. Because they are displayed inline, space between them will be acknowledged.
body{margin:0}
#header {
background-color:#fecb00;
color:white;
text-align:center;
}
#header-left {
width: 25%;
}
#header-middle {
width: 50%;
}
#header-right {
width: 25%;
}
.div-border {
/* Style changes here */
display:inline-block;
box-sizing:border-box;
border: 2px solid silver;
}
#border-around {
border: 1px solid #000;
}
<div id="header">
<div id="header-left" class="div-border">
<h6 align="center">Image holder</h6>
</div><!--
--><div id="header-middle" class="div-border">
<h1 align="center">Dashboard</h1>
</div><!--
--><div id="header-right" class="div-border">
<h6><span><span style="line-height: 24px;" id="border-around"><b>Profile | Help | Admin </b></span></span></h6>
</div>
</div>
JSFiddle
used to floating element as like this
*{ // add this line
box-sizing:border-box; // add this line
} // add this line
#header {
background-color:#fecb00;
color:white;
text-align:center;
padding:5px;
overflow:hidden; // add this line
}
#header-left {
width: 25%;
float:left; // add this line
}
#header-middle {
width: 50%;
float:left; // add this line
}
#header-right {
width: 25%;
float:left; // add this line
}
.div-border {
border: 2px solid silver;
}
Demo
you can try it using css order property .
code:
<html>
<head>
<style>
#header {
background-color:#fecb00;
color:white;
text-align:center;
padding:5px;
width:100%;
display: -webkit-flex; /* Safari */
display: flex;
}
#header-left {
width: 25%;
-webkit-order:1;
order:1;
}
#header-middle {
width: 49%;
-webkit-order:2;
order:2;
}
#header-right {
width: 25%;
-webkit-order:3;
order:3;
}
.div-border {
border: 2px solid silver;
}
#border-around {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="header">
<div id="header-left" class="div-border">
<h6 align="center">Image holder</h6>
</div>
<div id="header-middle" class="div-border">
<h1 align="center">Dashboard</h1>
</div>
<div id="header-right" class="div-border">
<h6>
<span >
<span style="line-height: 24px;" id="border-around">
<b>Profile | Help | Admin </b>
</span>
</span>
</h6>
</div>
</div>
</body>
</html>
fiddle : http://jsfiddle.net/invincibleJai/sbuveeLw/