I have the following html. I need to align the .faf-text fields to each other vertically without using a table.
<div id="faf-field-2" class="faf-field faf-field-input ">
<div class="faf-name"> Vendor </div>
<div class="faf-text"> Brocade </div>
</div>
<div id="faf-field-6" class="faf-field faf-field-input ">
<div class="faf-name"> Platform </div>
<div class="faf-text"> ADX </div>
</div>
<div id="faf-field-7" class="faf-field faf-field-input ">
<div class="faf-name"> Version </div>
<div class="faf-text"> 12.4 </div>
</div>
An example of what the layout should be like is below :
Vendor Brocade
Platform ADX
Version 12.4
Thanks
You can use the CSS display: table to make your elements act like a table.
Use display: table-row; for the container <div> tags to make it behave like a <tr> and display: table-cell; for the elements inside to make it behave like <td>.
Something like this:
.faf-field-input{
display: table-row;
}
.faf-field-input div{
display: table-cell;
}
.faf-name{
width: 80px; /*for testing*/
}
jsFiddle DEMO
Just use
float: left
for both classes.
An ex:
.faf-name{
width: 200px;
float: left;
/* other CSS may come here */
}
in the same way,
.faf-text{
width: 200px;
float: left;
/* other CSS may come here */
}
It would have been easier and clearer if you have provided jsfiddle. Hope this will work for you
Just Use this css property so faf-text fields to each other vertically without using a table.
.faf-field{display:table-cell;}
DEMO
From your code, it looks to me that you are displaying tabular data.
So it's perfectly good to use a table.
Related
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
I am a noob in CSS and i was actually trying to create a table kind of structure using Html Div and CSS, but got stuck in one issue.
Problem is that I have put 4 columns in 1 single row. The last column contains a text area which is expandable.
When I try to expand the text area, only the last column expands instead of the whole row.
Below is the code demo:
http://codepen.io/anon/pen/oIChn
The code isn't working because you arent following a table structure, which should (always) be:
table
-row
--cell
--/cell
-/row
/table
IN your code, you are using some display:tablexx CSS, however often in elements isolated from other aspects of the table structure they are expecting to be next to, as such the layout is broken.
The correct CSS/HTML structure is (e.g):
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
</div>
CSS
.table {
display:table;
height:100%;
}
.cell {
display:table-cell;
width:50px;
height:100px;
border:1px solid black;
}
.row {
display:table-row;
}
Note that using this there are no specific thead or tbody sections, you can simply adapt your CSS to style headers etc as appropriate.
Add this at the end of your css, should do the trick
.r-tab-head{
display: table-row;
float: none;
}
.divCell {
display: table-cell;
float: none;
}
I have a checkbox next to 3 lines of text. I wish to center the checkbox vertically against these lines of text:
A
[] B
C
I'm attempting to do this via div containers while resisting the immense temptation to revert to tables. Here's my code so far:
<div style="overflow:auto;">
<div style="height:57px; float:left;margin-right:15px;">
<input style="vertical-align:middle;height:100%" type="checkbox"
name="theCheckbox" id="checkboxId">
</div>
<div style="float:left;">
A<br/>
B<br/>
C
</div>
</div>
JSFiddle
While the above 'works', I'm not happy about the hard coded height. Changing 57px to 100% makes the checkbox disappear (computed height becomes 0). Removing the height style from the div alltogether also results in a disappearing checkbox. Can anyone suggest improvments or alternative solutions to achieve my goal?
EDIT: I have to support IE7+ amongst other browsers.
You could treat the elements as a table (without actually using a table) like this:
HTML
<div id="container">
<div class="tableCell">
<input type="checkbox" name="theCheckbox" id="checkboxId">
</div>
<div class="tableCell">A<br/>B<br/>C</div>
</div>
CSS
#container { display: table; }
.tableCell {
display: table-cell;
vertical-align: middle; }
See the fiddle here: http://jsfiddle.net/QpnkV/2/
For backwards compatibility think about using scripts in your dochead like this:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
How about this?
HTML:
<input type="checkbox" name="theCheckbox" id="checkboxId"/>
<div id ="try">
A<br/>
B<br/>
C
</div>
CSS:
#checkboxId{
position:relative;
vertical-align:middle;
}
#try{
position:relative;
display:inline-block;
vertical-align:middle;
}
Here is the JSFiddle
You can position the checkbox vertically using absolute positioning.
For your HTML, you can simplify it as follows:
<div class="wrap">
<input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
<div class="label">A
<br/>B
<br/>C
<br/>D</div>
</div>
and apply the following CSS:
.wrap {
border: 1px dotted gray;
position: relative;
overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.label {
margin-left: 20px;
}
Demo Fiddle: http://jsfiddle.net/audetwebdesign/N23qr/
The tradeoff here is that you need to hard code a value for margin-left on the .label container, which is less restrictive than specifying a height value.
Note About IE7
To get position: relative to work correctly for .wrap, you need to make sure that IE7 invokes the hasLayout property, which can be effected by applying overflow: auto. For more details, see: IE7 relative/absolute positioning bug with dynamically modified page content and specifically, http://www.satzansatz.de/cssd/onhavinglayout.html#rp
I keep reading that you can use html/css columns without using them in a table. The www.w3schools.org site shows that you can, but I can't get it to work out at all in my code. basically I have this idea.
<div container="name">
<dl>item 1 </dl>
<dd>explain</dd>
<dl>item 2 </dl>
<dd>explain</dl>
...
</div>
What I need is for the container to have three columns and the section with the detailed list to be two columns than I will put the info for the third column in its own column. I know the column span is the best way to keep that separate, but I can't find any good explanations for this. And I can't get it to work out of my css page or html page.
I think you're going about it the wrong way. Try this.
html:
<div id="container">
<div id="left-col">
<!-- left column -->
</div>
<div id="content-col">
<!-- content column -->
</div>
<div id="right-col">
<!-- left column -->
</div>
</div>
css:
#container { overflow: hidden; width: 940px; }
#left-col { float: left; width: 200px; margin-right: 20px; }
#content-col { float: left; width: 500px; }
#right-col { float: right; width: 200px; }
demo - http://jsfiddle.net/gk5vD/
FYI - you misunderstood what a dl is, have a look at http://www.htmldog.com/reference/htmltags/dl/
Firstly, please don't use w3schools. </rant>
CSS3 has columns built in. Have a read about it here and here.
I am trying to align a full name,picture and the post just like they do in most social networks (linked-in or facebook).But i cant align them the well.Can anybody please try to fill the gaps with necessary css commands?Thank you in advance.
<div>
<span class="picture"> <img src="/assets/images/rails.png"/></span>
user-full-name
<span class="post"></span>
</div>
css
.picture{height:40px;
width:40px;
}
.user-name{
margin-bottom:35px;
}
.post{ }
.inline_table{
display: inline-table;
position: relative;
}
is another property you might want to look at ... any element which has both position relative AND inline table .. will be aligned left to right butted up against each other.
so in this example:
<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">
will all be aligned along the same row
Here's a basic example: http://jsfiddle.net/GU2aM/ to get you started.
span.picture {
display: block;
float: left;
margin-right: 10px;
}