I'd like to create a 3 column layout, with the middle being for all the content and menus and the other two being a solid background color.
I have something like this set up already, but the middle column doesn't extend to the bottom of the page. How can I get this middle column to extend to the bottom of the page?
Since most pure-CSS answers to this question are not supported by browsers, your best best is often to use a background image for this. Create the image with the right sized columns and apply it to whatever contains all three columns on the page. Make sure that the image can be horizontally repeated, and it will do so all the way down to the bottom of the page, even if the middle column is not actually the right size.
This site is really helpful for this sort of thing:
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
But I think the basic idea is you create a float:left div and then a float:right div and then another div for the middle.
Related
I'm trying to create a blog post display grid. My fiddle is here These divsare currently centered in the middle of the page, which is fine; however, I would like to:
Change the alignment of the divs to the left, not the center; so that as each post is generated, such is done in the natural reading order.
Make the height of the divs responsive. By this I mean, the height of the individual divs are already responsive; however, the next row of divs is aligned based on the bottom of the single-longest div in the row above it. I would like for each div to fill in the space not taken by the div above it, as depicted in the picture below
Currently, my code renders me this:
Any idea as to how I achieve this? Thank you!
You could use this modern CSS approach (won't work for older browsers)
column-break-inside: avoid; // for each content "widget"
OR
You can use some of the javascript libraries allowing you to achieve this:
bricklayer.js
Masonry
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
I'm trying to create a list of products using a <table> since it's basically a table with rows and columns.
I want to have one of the columns list whether the item status is available or unavailable, and I'd like to represent this with a little green icon if available, red if otherwise. I also want that icon to be clickable to change it.
So I Googled and found I might be able to position it if it's a background image, but I want it clickable, so that's no good.
I've tried all the vertical aligns and centers etc.. that I've read and tried margins and padding and all sorts but I can't get my little icon image to be in the middle (horiz and vert) of my little <td>.
To clear something up:
I just want to know how to align the image within the <td>. The image itself is the anchor, when its clicked, the page reloads and the icon chanages. I've tried positioning this image within the <td> but can't. That's my question: How to position it?
Not sure why you are having difficulty aligning your image within the table cell. Tables contain many helpful properties that help with alignment. Here's an example table with images aligned to the center of the table cell.
http://jsfiddle.net/Puppies4Life/zka5Q/
First of tables should only be used for data and a list of products isn't data. I'd recommend using either plain old divs or a UL with lots of floated LI elements.
For your icon it would probably be best to make it an 'A' tag and either have the icon sitting as an image in the 'A' tag or have it as a background to the 'A' tag.
To align it horizontally make it's parent container text-align:center.
I'll assume that each product is going to be an image and be a set height? If so then to align it vertically simply make the padding-top of the container the correct height to set it in the center.
Hopefully the above will work for you :)
I've got a table#Content which has a background that extends beyond it's horizontal bounds. I've sliced up the the backgrounds and made a table#Main, with td#Left, td#Content (which contains table#Content), and td#Right. I've set the backgrounds into the td#Left and td#Right, positioned correctly.
Question 1) I can't get the whole table#main to be centered on the page.
Question 2) The design is beyond 960px. But the main content is within 912px. The td#Left and td#Right are extra. Is there a way to keep the main content centered and if needed shrink the td#Left & td#right.
[update] I'm open to directions towards a div solution.
[update2] I'm going to rephrase the question. How do I make 3 columns fill the screen, with 2 outer columns be auto/% and have the middle one be 912px.
For the table and margin: 0 auto; to center it if that doesn't work put a surrounding div with that style in it along with a width....
The table background just add background:url(...) center center ;
I'd give you an example but I'm on my phone
I have been trying to position content within a table row. The row in question in turn contains 2 other tables and 1 small thumbnail image (each within a table cell of course). The row was positioned using valign="top" till now. This worked well getting contents of all the three columns to the top.
However, I wanted to position it using CSS position:relative; vertical-align:text-top;
This positions the cell content well if there is no thumbnail image. However, once the image is included, the other columns are not positioned at all. See the image below.
*Sincere Apologies for the Shoddy Image Formatting.
I want the two tables as well as the thumbnail to be vertically aligned to the top.
Please note that all margins and paddings are set to 0 and the sizes in the image are actuals.
Does somebody know why my browser (Firefox) is behaving this way and how to correct it?
Ok got it! It seems that vertical-align:text-top aligns an element to the top of the parent element's text and not to the top of the parent element! Changing it to vertical-align:top did the trick :)