I am trying to convert my table design to css div design.
What does not work:
1.)
The black div will have list items therefore I need scrollbars which is shown at the moment. Thats fine.
But I do not want to limit the height to 400px. My former design had 100% for the height so it takes all vertical space on the screen.
2.) The red div (rightContent) should have a fixed width of 200px; When I set this what do I have to set, that the leftContent takes all horizontal space.
Above all in the old table layout were no outer vertical scrollbar visible around the whole layout.
I tested this on IE9
http://jsfiddle.net/pEMwP/4/
For Question1:
If you want a scrollbar, you should not set the height property to auto. Instead you can dynamically set the Div height via Javascript like this.
document.getElementById("ListData").style.height=<your Size>;
For Question 2:
If you want to set height to Red Div. You can specify like this.
height: 200px;
overflow:hidden;
this will limit the div to 200px. Now you can increase your other div/divs width to occupy this space .
If I was starting something like this from scratch I'd rethink the layout so I didn't have such tight constraints, but as you're converting an existing site I appreciate this might not be an option.
You could use the display: table;, display: table-row; and display: table-cell; declarations to get a semantically correct (it's not tabular data, right?) structure which behaves just like the oft misused <table> of yore. Admittedly, you'd have to implement some work-around for IE6&7 (probably 2-3% of users), but perhaps you could accept that it's usable but imperfect in those browsers?
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
Related
In tables, if you have a row, that row is the same height and all cells in the row grow and shrink with dynamic content. (If one cell has a ton of text and the other cells not much they are all the same height, letting you make columns and rows).
With the popularity of div float layouts using tables is often frowned upon. However how do I duplicate this and other functionality and benefits of a table while still keeping the display set to block for the benefits of a block, cross browser?
I've seen many hacks but they always seem to be too complicated, interfere with each other, or take tweaking. I am looking for a standard reliable method for the following:
Make div boxes the same height across a row with a wrapping container
<style>
.cell { float:left; }
</style>
<div class="row">
<div class="cell">Content 1 with more width</div>
<div class="cell">Content 2<br>with<br>more<br>height<br>Content 2<br>Content 2<br></div>
<div class="cell">Content 3</div>
</div>
In this case all div's of class "cell" will have the same height, and not be fixed height at all and be floated and will stay that way for dynamic content of any size.
Vertically center content
In this case using the example above, all content would be vertically aligned to the middle, for dynamic content of any size.
Make div's of class "cell" share a common width that is based on the wrapper "row"
In a table when you specify width as 100% or fixed width the cells will automatically try to all be the same width, unless an image or block like item prohibits this. How can this be achieved with floating divs? As if you say, float all "cell" to the left, you can specify a min width or a fixed width, but I know of no way to make them share a common width that is dynamic, like a table. In floated divs by themselves they shrink to the size of the content.
How to avoid content pushing against the container/wrapper "row" and treat it as if it were just a block
For whatever reason when a floating div is inside a wrapper you can get odd behavior where content will "stick" to the wrapper as if were floating too. Even sometimes when using a <br style="clear:both"> at the end I had this happen.
If you could answer all these questions about floating divs for me it is most appreciated. Please don't tell me to break this into separate questions as they are all related to the same thing. Please don't tell me this would be better asked somewhere else. If however you wish to be helpful great :)
If the solution is using display:table-cell alone, I've tried this, it makes the divs not behave as a block, shrinking it, the background shrinks to the content too, and in other ways it does not behave as a block. Also some versions of IE do not support this and I am looking for a cross browser solution. Thank you.
If you want your div elements to behave like table cells, you can style them that way:
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 33.33%;
vertical-align: middle;
text-align: center;
}
This does not rely on setting a height or min-height on the .cell elements, so the height will remain flexible.
--- jsFiddle DEMO ---
You may apply the CSS like this;
.row{
height: 200px;
}
.cell{
display:block;
float:left;
height:100%;
}
Here is a working Live Demo.
and Here is a workaround to distribute the columns also.
Hope this helps
Note: DO NOT add percentage attribute to child divs to fill parent div (for example 50% each for 2 child divs, 25% for 4 child divs etc) since these vary according to number of divs and cannot be calculated accurately sometimes
Well, I went the jQuery route...
http://jsfiddle.net/dtgEt/1/
I would like to point out that while yes, some people will just use a table, a table is for displaying tabular data, not layout. A div has no semantic meaning and therefor is a better choice, in my opinion (unless it is actually tabular data that your are publishing to the web).
My solution works in IE 7 and probably would in IE 6. If you want to align your content in the center of the container there are many good ways to do that others have suggested (beat me to it).
If you need the formatting of a table, but you have to support older browsers that don't have support for display:table, then use a table. It's pretty much that simple.
Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.
For instance, a table (or display:table, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.
I'm trying to make a calendar, and I've got it mostly working except I want to space it out a bit. I tried setting the table to width: 210px and table-layout: fixed so it'd work like this, but I can't seem to get it worked. Here is the jsFiddle; when I set the width to 210px it just slides the table over. Fixed doesn't seem to do anything.
How can I set the column width to stretch to fit (and evenly spaced).
Try removing display: inline-block from the table#cal styling.
http://jsfiddle.net/ELpS8/1/
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
I have this and it got an HTML img#logo-image, on some occasions it will not be displayed, display:none.
The problem is that the entire div#menu-title should fit the width of the page.
I tried putting width:100%, but when the img#logo-imag" is displayed it breaks the line being below the img#logo-image.
The width:100% does not work with elements float:left
Just unfloat the menu-title div and remove the width.. it will automatically be 100% of the header then.. and if the image is present it will adjust the ul#menu list to make room for it, which is a natural behaviour
if you want the menu-list to really only take the available width (say for a background color or something then you can add overflow: hidden; to ul#menu - though I don't see a need for that in your example code
here's a simplified version of your Fiddle - hover on the header to make the image disappear and see the ul#menu adjust to suit
Example Fiddle
You have both logo-image and menu-title floating left. Since they arent really in separate divs, they are all part of the same div, they appear next to each other. On top of that, you set the menu-title to be 760, which isn't the width of the page. At least that what it looks like you did. Do not use width 100% because resizing the page will shrink that menu title.
You really just have to play around with the divs, but i would say that separating those two divs would make you be able to stack them on top or below each other.
And in using Chrome's inspect element feature, I don't see a display:none for the image's css. I don't know why that would do that.
I'm really not sure of what you are trying to accomplish since making the div#menu-title width: 100% doesn't leave any room for anything else on the same row.
Why not let them both be inline and let the widths be whatever they need to be?
Anyway, I have a guess at what you want. You want those two elements to behave as being in a table, inside a table row, and each in a table-cell so that the image takes a maximum width, and the div#menu-title taking all of the rest of the place. In that case put them in a table, or use display: table-cell for the image and the div and fiddle around with that.
I want to make a textfield in my html page to expand as much as possible to fit the parent width. Here is an image shows what I want.
(source: ez2learn.com)
I try to use width: 100%, but the browser sets the width of elemnt as its parent's, which makes no room for other elements, they have to to be placed in second line. How can I let the element to expand as much as possible to fit all space in single line?
Thanks.
If you want to make the input ‘100% minus the widths of those other things’ you're into CSS layout stuff.
You could float: left the label, float: right a wrapper around the buttons, and set left and right margins on a wrapper around the input, then set the input to width: 100%.
(But personally, liquid-layout forms is one of the places I still typically resort to tables, as combining a series of fixed- and variable-width columns is something that easily stretches CSS layout beyond its limits.)
I agree with bobince. I would look into a table option. I would either decide on fixed:width that works for you within the table, or try to make the width:100% within the table.