Div structure, same auto widths for every column - html

lets see this table:
<table border="1">
<tr><td>1111</td><td>42342324</td><td>ffffffff</td></tr>
<tr><td>11</td><td>442324</td><td>fdadasdfffffff</td></tr>
</table>
I need to do something like that but with DIV elements (sorry, boss wont allow tables). The real problem is, how to set same widths without direct setting it? I mean, if the first row is longer, then it will be actual width, otherwise the 2nd row's.
Preferably without javascript/jQuery hacking.

I'm assuming you want the "columns" to grow in width together with the content? dynamically setting the width of each div in the column?
I can't think of a way to do this with css, but some jiggery pokery with some divs might work.
<style>
.table{
border:1px solid black;
position:relative;
}
.column{
border:1px solid red;
display:inline-block;
}
.cell{
border:1px solid blue;
float:left;
clear:both;
}
</style>
<div class="table">
<div class="column">
<div class"cell">11</div>
<div class"cell">ffff</div>
</div>
<div class="column">
<div class"cell">1111</div>
<div class"cell">f</div>
</div>
<div class="column">
<div class"cell">1</div>
<div class"cell">fff</div>
</div>
</div>

I think you want to check out flexbox for modern browsers, with a JavaScript fallback for older browsers.
http://css-tricks.com/using-flexbox/
Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids
http://caniuse.com/flexbox shows pretty decent support.. IE10, FF, Chrome, Safari, and even Opera! *
*using combined "old and new" syntax

<div id="main_div">
<div id="nr1"> </div>
<div id="nr2"> </div>
</div>
and you use css to style : width ,height ,margin ,position of each div

Related

CSS: about div id and div class

Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.
HTML:
<div id="body">
<div id="box1" class="style"></div>
<div id="box2" class="style"></div>
<div id="box3" class="style"></div>
//(and so on)//
</div>
CSS:
.style {
//(put elements here)//
}
There is not really a right thing to do as everything depends on the situation and circumstances.
Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?
You can also use the IDs you have to override styles for the <div>s individually:
.style {
color: red;
}
#body1 {
color: blue;
}
Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).
I would also follow the W3C's advice when picking class names for elements and using them in your HTML:
...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
ID's are unique:
-Each element can have only one ID
-Each page can have only one element with that ID
Classes are NOT unique:
-You can use the same class on multiple elements.
-You can use multiple classes on the same element.
Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.
http://www.w3schools.com/tags/att_global_id.asp
http://www.w3schools.com/tags/att_global_class.asp
Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.
If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.
HTML
<div id="body">
<div></div>
<div></div>
<div></div>
</div>
CSS
#body div {
background:red;
width:100px;
height:100px;
display:inline-block
}
DEMO
You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.
<div id="body">
<div class="mystyle"></div>
<div class="mystyle"></div>
<div class="mystyle"></div>
//(and so on)//
</div>
<style>
.mystyle{color:#000;}
<style>
You can use this
<div id="demo">
<div class="box test"></div>
<div class="box test"></div>
<div class="box test"></div>
</div>
CSS:
#demo
{
margin:0;
padding:0;
}
.box
{
Width:100px;
height:50px;
background:red;
}
.test
{
color:white;
}
you can apply two class.

How to correctly use tableless layout with borders using CSS?

I'm working on a new HTML page and I want to use a table-less layout. Bear in mind that what follows here is only part of the page, but I think it paints a clear picture of what I'm trying to do.
The HTML below is meant to render six cells with text inside. I want the cells to be sized appropriately to contain the text inside.
The problem I'm having is that the borders are drawn incorrectly. In both IE and Firefox, I see two problems:
1) One of the borders is drawn outside the table.
2) The borders between the cells in the first row are drawn incompletely.
<!DOCTYPE html>
<html>
<head>
<style>
html
{
}
.reviewRow
{
clear:both;
}
.reviewBlock
{
float:left;
border-top: 1px solid #444;
border-left: 1px solid #444;
}
.rightBorder
{
border-right: 1px solid #444;
}
.bottomBorder
{
border-bottom: 1px solid #444;
}
</style>
</head>
<body>
<div class='reviewRow'>
<div style="width:200px;" class='reviewBlock'>
THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS
</div>
<div style="width: 225px" class='reviewBlock'>
ABC
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
December 25, 2012
</div>
</div>
<div class='reviewRow bottomBorder'>
<div style="width:300px;" class='reviewBlock'>
Hello, World!
</div>
<div style="width: 125px" class='reviewBlock'>
123
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
May 1, 2013
</div>
</div>
<div style='clear:both;'></div>
</body>
</html>
Don't go what others say, that don't make layouts using tables, but when it comes to tabular data and if you use div's for making a table doesn't make any sense to me, just don't use tables for designing layouts, but YOU SHOULD USE IT FOR TABULAR DATA
Still if you want to use you can refer this
By the way, to answer the question... You can use display:table, table-cell and table-row (in CSS3)
But I agree with Mr. Alien : just use tables for tabular data.
See the height of html elements are computed based on the content inside them unless you explicitly specify it.
Your second div has taken only the height necessary to show ABC and hence the border showed up only that much. To fix this you must specify a certain height to each of the div so that they appear just as you want.
If you are trying to show data in a tabular manner just use tables. They are there for that purpose only. You can obviously style them in order to make them better looking.
If you're trying to do this for tabular data, then by all means use a table that's what it's there for. Not doing so it about like trying to use Photoshop to make a spreadsheet when Excel would be the better tool.
You can change the number of columns a cell takes up by using the colspan attribute. By default, of course, a cell takes up 1 column (colspan="1"), but if you need it to take up more, you simply change the number. You can do the same thing for rows with rowspan.

Even out space layout (table)

For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.
No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.
The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.
Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.
Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);
Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.
The rough HTML I have right now is something like this:
<table id="portfolio">
<tr>
<td>
<div class="portfolioItem">
<div class="portfolioItemImage">
<a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
</div>
<br clear="both" />
<div class="portfolioItemDescription">
<h3>Title</h3>
<p>Description lorem ipsum etc.</p>
</div>
</div>
</td>
</tr>
</table>
Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn't relevant here.
Here is the CSS associated with it:
#portfolio {
width:100%;
}
#portfolio td {
width:33%;
}
#portfolio .portfolioItem {
border: 1px solid #000;
}
#portfolio .portfolioItem .portfolioItemImage {
margin:0px;
padding:0px;
}
Again; can this be done? And how?
Thank you!
I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.
I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }​
I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.
The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.

How Do I Get A Border From YUI GRID Tool?

I'm very new to YUI. And I used this tool to generate some css grid layouts. But even though I get the code, when rendered in browser I can't able to see the borders at all. But others(like alignment, the number of columns..) are correct.
How do I add border to the YUI generated code?
Thanks in advance
You can add a border to YUI2 grids by adding styles to the yui-u class
.yui-u {
border: 1px solid black;
}
However, borders don't play very nice with YUI2 grids because it relies on percentage based widths for columns, so you'll have to insert another div inside each unit and add a border to that div:
<style>.yui-u-inner { border: 1px solid black; }</style>
<div class="yui-g">
<div class="yui-u first">
<div class="yui-u-inner"></div>
</div>
<div class="yui-u">
<div class="yui-u-inner"></div>
</div>
</div>
There may be more elegant solutions.
You should consider moving to YUI3. YUI2 is only on maintenance mode and there is no new development besides basic bug fixing. YUI3 is quite active and in particular its CSS grids are a lot simpler to use.

HTML - Given a Table, how to allow one column to be fluid without breaking the layout

I have the following:
<div style="width:100%;">
<table>
<tr>
<td style="width:30px;">hi</td>
<td style="width:40px;">hi</td>
<td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>
<td style="width:25px;">hi</td>
</tr>
</table>
</div>
What I want to happen is for this table to grow to 100% possible of the outer DIV. Problem is, that the table, with a lot of text inside, ID='lotoftext' is causing the table to grow to a width bigger than the outer div which then breaks the page.
Any ideas? thanks
can you use max-width? You might need to put a div inside that specific TD and give that the max-width
Unless it is tabular data, you should build it using DIVs and CSS. You should be able to achieve what you want with less of a headache this way.
AnApprentice, to achieve this layout using DIV's and CSS (alternate option to using tables) you could approach the situation like this:
CSS:
#body_container{
max-width:700px;
}
.data-container{
background-color:#ccc;
zoom:1;
}
.data-content_a{
width:30px;
float:left;
background-color:#3FF;
}
.data-content_b{
width:40px;
float:left;
background-color:#CF0;
}
.data-content_c{
width:25px;
float:right;
background-color:#9FF;
}
.data-content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 26px 0 71px;
clear:left;
display:inline;
}
.clear{
clear:both;
padding:0;
margin:0;
}
HTML:
<div id="body_container">
<div class="data-container">
<div class="data-content_c">4</div>
<div class="data-content_a">1</div>
<div class="data-content_b">2</div>
<div class="data-content_lotsoftext">lots of text goes here!</div>
<div class="clear"></div>
</div>
</div>
The #body_container (or outter container) can to set to any width or no width. The left margin on the .data-content_lotsoftext is the combined width of .data-content_a and .data-content_b (70px + 1px to be on the safe side) and the right margin on .data-content_lotsoftext is the width of data-content_c (25px + 1px to be on the safe side).
By not assigning a width to .data-content_lotsoftext it will automatically stretch to be full width. display:inline helps it sit better in ie6.
Tested in Firefox, Chrome, IE8, IE7 and IE6 (IE6 and 7 are a little glitchy - if anyone could help refine the CSS to get it to work perfectly in IE6 and 7, please shout out!)
Hope this helps.
Dan
The scenario you are describing is simply not suited for a table. A table should only be used when displaying tabular data. You should be using some other kind of html elements to build your structure and style it with CSS.