I am working with the 12 column grid style sheet from http://cssgrid.net/
It's great, the only problem is that I cannot have empty columns on the left side of the page. If I create an empty div with class "threecol" for example, the contentless div is not being displayed.
.row .threecol {
width: 22.05%;
}
Here is the whole CSS file.
My question: Is there a way to add a class to empty columns that prevents them from being ignored, so I actually have an empty div with the given %-width?
You'll either have to make the div "not empty" with something like a  , or to explicitly set a height (or min-height) value on it. As your div is empty, setting its height should probably not affect your layout anyway.
Related
I have a div #customers_table which contains several <div> columns. I am not using any <table>, rather I make my inner divs behave like a table columns. These columns/data is coming from database. So the columns can be less or more depending on what you choose to add or remove in this web page.
I can't set a fixed width to #customers_table as I explained above we don't know in advance how many columns are going to display. So I wanted a horizontal scrollbar when the columns are enough to view in screen. The horizontal scrollbar will appear when the columns are out of viewpoint.
A sample extracted part of my HTML:
<div id="customers">
<div id="customers_table">
div columns
div columns
div columns
...
...
...
</div>
</div>
To achieve this, I wrapped my #customers_table div within a parent div #customers. I have applied following CSS to these 2 divs:
#customers {
overflow-x:auto;
overflow-y:hidden;
width:100%;
}
#customers_table {
border:1px solid red;
min-width:1500px;
padding:5px;
}
You can see that I am applying a min-width of 1500px. Though it does work when I add 2 or 3 more columns from my website. But when I add more and more columns the columns headers/divs are screwed up and break to second line.
Please see the screenshots below:
This is fine (when columns are less):
We can scroll through to see hidden data.
But when we add more and more columns then this issue arises:
I can't increase min-width since I don't know how many new columns will come in this table. So what is the solution to this problem so that the end result should match with my first screenshot irrelevant of the fact how many new columns a person can add?
I have a bootstrap model, which contains a 3 column layout. Each column contains a table with several tbody elements. The last column may contain hidden table elements (generated with style: 'display:none').
If all elements of the last column are hide, I want the modal to resize to fit to the smaller content. Currently the width stays the same, whatever content is displayed. How can I get such a behaviour?
you could try to actually give those columns a class and set their width to 0 or 1 px...
.one-wide { width:1px; }
<th class="one-wide">
But that is how i would solve it, since i like classes better anyway, you can just give them the display none as well.
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
i'm really stumped by this current page i'm working on. The layout is a grid.
The page is dynamic so the cells (divs) will be shifting about or even disappearing over time.
Because the location of the last cell will be changing, i want this last cell(div) to always extend horizontally across the remainder of the containing div. The point being to create a gray top border.
here's a link, it's obvious to see what i'm trying to do.
http://www.tomcarden.net/ug-post.html
i thought it would be easy. i thought the last cell (div) if not given a width attribute would naturally take up the remaining space in the row but it's not (?)
the class of this div is .last-cell.
i tried making the width:100% but that doesn't work. that breaks the page. the cell clears and starts a new row, i tried clear:none so it would stay floated to left but that didn't work. this can't be that hard...?? can anyone lend some advice on this?,
big thanks in advance.
Quite tricky, but try adding this:
.last-cell {
width: 100%;
margin-top: -153px;
}
The width: 100%; will indeed make it into one row, bumped by the last picture, but with the negative margin you push it back up. To keep the image on top, apply:
.grid {
z-index: 100;
}
I have this table1 inside of a span tag (span is inside of td tag)
the problem is that the row data of the Table1 is appearing outside of td ...the data should appear within the boundaries of td tag..right ? coz the span is contained within the td tag...how do I make sure that the width of span remains fixed..like it shouldn't display stuff outside of td tag which is its container
Firebug shows table1's width as 100%
[Edit]
ok I added display:block; in span tag first..didnt work...when I added the same in Table tag the columns of the Table shrank..ie spaces between col.s shrank and row data isn't anymore displaying outside of td's area
Now what I wanna ask is that if I set Table{display:block;} in the css file..how would it affect other tables ??I don't want other tables to get screwed up...Just want this one fixed..Also, the table is being created on runtime using Telerik's RadEditor so will display:block fix table's width and not let its rows' data flow outside td area??
<span>s are inline elements, like <a> and <img>, therefore they cannot accept rules like width:, height: and others.
To allow the <span> to accept these rules, add display: block; to the Span's CSS.
This will allow it to accept the width rule and fill up your TD.
That or just change your <span> to a <div>.
If that doesn't work, post your code and we'll take a closer look :)
A span is an inline element and so cannot have an explicit width set. What is in the span? If it's a continuous string then there is no way for the browser to know where to cut the string and make it wrap. If you don't want to see the excess content then you can set overflow:hidden on the element but that's not always a good idea. Perhaps post the code you are working with and we can provide more specific help.