How do i make one div adjustable while other succeeding column fixed? - html

Help newbie in div for php or html without using css or table.
Trying to do this 4 x column, 2 x row using div with the following behavior
// [.....adjustable....][fixed][fixed][fixed]
// [.....adjustable....][fixed][fixed][fixed]
Below are my codes----------------------------------------
<form action="welcome.php" method="get">
<div style="position: relative; width: 100%; ">
<div id="left" style="position:relative;float:left;width:68%;"> left </div>
<div id="right" style="float:left;width:13%;"> Name: </div>
<div id="right2" style="float:left;width:13%;"> Age: </div>
<div id="right3" style="float:left;width:6%;"></div>
</div>
<div style="position: relative; width: 100%; ">
<div id="left2" style="position:relative;float:left;width:68%;"> left2 </div>
<div id="right4" style="float:left;width:13%;"> <input type="text" name="name"></div>
<div id="right5" style="float:left;width:13%;"> <input type="text" name="age"></div>
<div id="right6" style="float:left;width:6%;"> <input name="submit" type="submit"></div>
</div>
The 68% is equal to 860 pxl on my screen. It should change if it goes to other screen resolution. I tried making the 68% to 100% and the other div with id=right to style="position:fixed..." but it just mess up and puts everything on left side.

The easiest way of accomplishing this, is by using display: table and display: table-cell, to style divs as a table, without using an actual table:
Example on jsbin. See display on mdn.
I'll add both the CSS version and the, discouraged, inline style version to this post:
CSS version
<div class="parent">
<div class="left">ASDF</div>
<div class="right">asdf</div>
<div class="right">asdf</div>
<div class="right">asdf</div>
</div>
With CSS:
.parent {
display: table;
width: 100%;
}
.left {
width: auto;
border: 1px dotted blue;
display: table-cell;
}
.right {
display: table-cell;
width: 50px;
border: 1px dotted green;
}
Inline style version
<div style="display: table; width: 100%;">
<div style="display: table-cell;">ASDF</div>
<div style="display: table-cell; width: 150px;">asdf</div>
<div style="display: table-cell; width: 150px;">asdf</div>
<div style="display: table-cell; width: 150px;">asdf</div>
</div>

Related

Misaligned "outline" with uneven number of divs

My issue is that I wanted side-by-side elements with borders, but I noticed without doing some margin-hack it was difficult to use the border property and it still didn't look right. However when I use outline or box-shadow, I get this alignment issue at the end.
.inner {
outline: 1px solid black;
width: 50%;
height: 50px;
float: left;
margin: 0;
display: inline-block;
box-sizing: border-box;
position: relative;
background: #fff;
}
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
It looks alright when there's an even number of elements but when I have this last element it looks odd. Some might suggest I just make it fit to the end which would be okay but the size can be configurable sometimes so this could be a common occurrence.
What is the proper way to achieve this where the last element lines up the border(or outline) correctly?
Because you're using outline to create your border, the outlines at the center are actually overlapping one another. When you get to the bottom where there is only one div the outline is not being overlapped and therefore looks misaligned. You could solve this issues by building it as a table:
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
}
.inner {
display: table-cell;
border: 1px solid black;
width: 50%;
height: 50px;
background: #fff;
}
<div class="table">
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
</div>
</div>

Wrap a group of CSS table cells to a new line

I'm experimenting with CSS properties of a two-level set of DOM elements to make it appear like it's a table. The topmost element is just one, it wraps its children, which, in turn, form a flat list of lookalike elements. Like this:
<div class="t">
<div class="c">First row</div>
<div class="c">2</div>
<div class="c">3</div>
<div class="c">4</div>
<div class="c">5</div>
<div class="c">Second row</div>
<div class="c">7</div>
<div class="c">8</div>
<div class="c">9</div>
<div class="c">0</div>
</div>
I'm trying to make this list form two rows, each containing 5 elements. So the CSS I'm using is like:
.t {
display: table;
width: 100%;
}
.c {
display: table-cell;
}
.c:nth-child(5n + 1):after {
content: '-';
display: table-row;
}
Which isn't working.
Is there a way to keep two levels of nesting and still have a list that appears as if it was a table?
If you can edit the HTML, just make the structure to like a complete table.
.t {
display: table;
width: 100%;
}
.r {
display: table-row;
}
.c {
display: table-cell;
}
<div class="t">
<div class="r">
<div class="c">First row</div>
<div class="c">2</div>
<div class="c">3</div>
<div class="c">4</div>
<div class="c">5</div>
</div>
<div class="r">
<div class="c">Second row</div>
<div class="c">7</div>
<div class="c">8</div>
<div class="c">9</div>
<div class="c">0</div>
</div>
</div>
Based on what/how you want them to behave, you can use float, (haven't tested for cross browser support on this one though) but they will not behave as a normal table.
Another option is to use flexbox (will still not behave as a normal table though)
.t {
display: table;
width: 100%;
}
.c {
display: table-cell;
float: left;
width: 20%;
}
<div class="t">
<div class="c">First row</div>
<div class="c">2</div>
<div class="c">3</div>
<div class="c">4</div>
<div class="c">5</div>
<div class="c">Second row</div>
<div class="c">7</div>
<div class="c">8</div>
<div class="c">9</div>
<div class="c">0</div>
</div>
To achieve your expected result, I have used position:relative option and display:table-cell
HTML:
<div class="t">
<div class="c">First row</div>
<div class="c">2</div>
<div class="c">3</div>
<div class="c">4</div>
<div class="c">5</div>
<div class="c">Second row</div>
<div class="c">7</div>
<div class="c">8</div>
<div class="c">9</div>
<div class="c">0</div>
</div>
CSS:
.t {
display: table;
width: 100%;
}
.c {
display: table-cell;
padding: 1%;
border: 1px solid black;
text-align: center;
width: 10%;
}
.c:nth-child(n+6) {
display: table-cell;
position: relative;
left: -50%;
top: 60px;
}
Codepen-http://codepen.io/nagasai/pen/mEOjLL

Text align left in a centered div with input fields

I have input fields which are supposed to be shown centered and then the texts to these input fields are supposed to be aligned left and "start" with the input fields.
http://jsfiddle.net/tfbatp5v/2/
.inputdes {
color: #9b9b9a;
font-size:20px;
height: 200px;
}
.blue {
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue">text1<br><input id="inputfield1" /></div>
<div class="blue">text2<br><input id="inputfield2" /></div>
<div class="blue">text3<br><input id="inputfield3" /></div>
</div>
</div>
However, no matter what I do, every time when I use text-align: left; it automatically aligns the inputfields left as well. I tried to group the text areas together with class names but it doesn't work. Does anyone know the answer?
Thanks !
It's recommended to not use align="center", because align attribute is deprecated. You should use the CSS text-align property on the container.
The rule display: table; will make the element to "shrink-to-fit" the content inside, without need to specify the width value.
#parent {
display: table;
margin: 0 auto;
}
.welcome {
text-align: center;
}
.inputdes {
color: #9b9b9a;
font-size: 20px;
height: 200px;
}
.blue {
height: 70px;
}
<div id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue">text1<br><input id="inputfield1" /></div>
<div class="blue">text2<br><input id="inputfield2" /></div>
<div class="blue">text3<br><input id="inputfield3" /></div>
</div>
</div>
Try something like the following. The idea is that we limit the width of the .inputdes div, then put the text in a nested div that has text-align: left. That way we can have the inputs centered but the text aligned left within its div.
.inputdes{
color: #9b9b9a;
font-size:20px;
height: 200px;
width: 200px;
}
.inputdes > div > div {
text-align: left;
margin: 0 15px;
}
.blue{
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<br>
<div class="inputdes">
<div class="blue" ><div>text1</div>
<input id="inputfield1"/></div>
<div class="blue" ><div>text2</div>
<input id="inputfield2" /></div>
<div class="blue" ><div>text3</div>
<input id="inputfield3" /></div>
</div>
</div>
You could give the input around the fields a fixed width and give the inputs a width: 100% to use text-align: left.
.inputdes{
color: #9b9b9a;
font-size:20px;
height: 200px;
width: 200px;
text-align: left;
}
input {
width: 100%
}
.blue{
height: 70px;
}
<div align="center" id="parent">
<div class="welcome">Welcome</div>
<div class="inputdes">
<div class="blue" >text1<br>
<input id="inputfield1"/></div>
<div class="blue" >text2<br>
<input id="inputfield2" /></div>
<div class="blue" >text3<br>
<input id="inputfield3" /></div>
</div>
</div>
Here's the updated Fiddle:
https://jsfiddle.net/tfbatp5v/11/

How to make input[type=text] to fill remaining horizontal space?

Does any have an idea how to do so?
I created this fiddle http://jsfiddle.net/matusko/2pctr9ok/3/ and all I want to do is, that the input behave the same way as the upper divs.
CSS:
.left {
float:left;
width:180px;
background-color:#ff0000;
}
.right {
width: 100%;
background-color:#00FF00;
display: block;
}
HTML:
<div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<br/>
<div>
<div class="left">
left
</div>
<input type="text" placeholder="right" class="right"/>
</div>
I dont understand why input doesnt behave like div, even when propriety inspector says that its display is block.
You can use calc in CSS to dynamically calculate the width for you.
Sample below:
.left {
float: left;
width: 180px;
background-color: #ff0000;
}
.right {
width: calc(100% - 180px);
background-color: #00FF00;
display: inline-block;
}
input[type="text"] {
box-sizing: border-box;
width: 100%;
}
<div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<br/>
<div>
<div class="left">left</div>
<div class="right">
<input type="text" placeholder="right" />
</div>
</div>
For < IE9 I would suggest the following http://jsfiddle.net/2pctr9ok/4/
Putting the left bottom in position:absolute, the whole bottom block in overflow:hidden and apply a padding-left:180px on the input.

div (table-cell) does not expand when width is set to 100%

I convert table element to all divs, but div of element does not expand like colspan="5" when width attribute is set 100%. How to make it expands full width? How to expand full width 2nd row?
<style>
.table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
width: 100%;
padding: 10px;
border: black solid 1px;
}
</style>
<div class="table">
<div class="tr">
<div class="td">Product</div>
<div class="td">Unit Price</div>
<div class="td">Quanity</div>
<div class="td">Total Points</div>
<div class="td">Temp</div>
</div>
<div class="tr">
<div class="td">
<span>Serial Number</span>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input maxlength="50" name="serialNo" id="serialNo" type="text">
</div>
</div>
</div>
</div>
Use table-layout: fixed:
.table {
display: table;
width: 100%;
table-layout: fixed;
}
Also, I would recommend you to use <table> instead of <div> in the tabular form.