I've been trying to come up with a way to create a 3 column web design where the center column has a constant width and is always centered. The columns to the left and right are variable. This is trivial in tables, but not correct semantically.
I haven't been able to get this working properly in all current browsers. Any tips on this?
Use this technique, and simply specify a fixed width for the centre column.
Check this out: http://www.glish.com/css/2.asp
And replace the width: xx% for #maincenter by a fixed value. Seems to work when I change it with Firebug, worth a shot?
#maincenter {
width: 200px;
float: left;
background: #fff;
padding-bottom: 10px;
}
I think you'd need to start off with initial (fixed) widths for both sidebar columns and then, when the page loads, use javascript to get the window width and calculate the new width of the sidebars.
sidebar width = (window width - center column width) / 2
You could then reapply the javascript if the window is resized.
This article at A List Apart has a solution resulting in a 3-column layout that will :
have a fluid center with fixed width sidebars,
allow the center column to appear first in the source,
allow any column to be the tallest,
require only a single extra div of markup, and
require very simple CSS, with minimal patches.
Related
I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?
Screenshot attached
There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:
Making the table width match the page width
An external style library, like Bootstrap
Making the Table Width Match the Page Width
First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.
Using Bootstrap
So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:
containers
rows
columns
It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.
You can find full documentation and examples for using Bootstrap here: Bootstrap Docs
I am quite new to using HTML and CSS and need some help aligning 3 separate tables so the vertical columns align as you go down through the page.
Due to the different amount of content in each of the tables they don't at the moment. I have tried finding advice on other posts but have not had much luck. I have the width of the tables set all the same but the columns I need them to differ in size the first two being around the same and the last one being the longest having the most content inside it.
What's the proper way I can achieve this?
Align the Columns vertically.
It would be best if you fixed the width of each column, then everything should line up nicely. Just pick a width value that matches the max likely width you are going to need.
The CSS syntax is simple. If you declare the cell in the html with something like:
<th class="col1">
in the first column header, then you can define the width of the column in the CSS with:
.col1 {width:130px}
You can try adding the following to your CSS:
td { vertical-align: top; }
You can also change 'top' to 'middle' or 'bottom' depending on where you want the content aligned.
Hope this helps!
You can achieve that by doing the following:
table .centered {
margin-left : auto;
margin-right: auto;
}
This will work if your tables have the same width.
I develop a front-end for a site and run into a serious problem. I use bootstrap 3 to make the site responsive.
I use the grid feature to layout but I need to meet the following requirements:
- The columns must have the same height
- There should have space between columns
The first problem is sold via SO. I set the row to overflow: hidden; and the columns to margin-bottom: -99999px; padding-bottom: 99999px; This solve the column height problem but I can't put space the outer part of the columns because I use all of the 12 columns. (col-md-4, col-md-4, col-md-4 / col-md-8, col-md-4) If I set side margin to the columns the last column wrapped to the next line.
The other problem to use the column as container is margin-bottom and the padding-bottom values. I can't set border-radius because the bottom border is not visible.
It's obvious to use an inner container. I did that but the inner div didn't fill the available height. I made a Codepen example.
I tried the following:
- Set the inner div position to relative/absolute with bottom: 0 value
- Set height, min-height 100% with combination of
inline/block/inline-block
My first choice would be a CSS solution because of the mobile first approach but I will consider any other solution too. The jQuery is loaded (required by the JavaScript component of the bootstrap) and the knockout also loaded.
About the example. The purpose is that the aqua colored 'panels' have to be the same height (inside a row of course) even if its content is smaller than the available space. If you didn't use Codepen before, You could use the editor/full page menu to view the example in full screen.
Thanks for any advice.
Twitter bootstrap uses variable #grid-gutter-width which is used to set as padding for left and right of all columns if you want to increase or change space between columns then modify this variable value which you will find in variables.less
I want to do this without JavaScript. I already have a JS solution but want to know if this is possible with pure CSS.
Let's say you have a page showing products off. When the page resizes I want to have those product boxes flex with the page layout. Each one should have a max-width and min-width. A table won't work because I can't have a fixed number of columns. Depending on the browser width, there could be between 1 to 6 products on a single row. The following doesn't work, but it's the closest I've got.
#prducts > div {
float: left;
max-width: 200px;
width: auto;
min-width: 100px;
background-color: #3333FF;
height: 250px;
margin: 5px;
}
Here's the fiddle: http://jsfiddle.net/79CBq/2/
Is it possible to make a DIV do auto width and still adhere to the min/max values I set? Unfortunately width: auto only changes the width if there is content inside making it bigger.
This is just really dumb to me, because a DIV with "display: block" has the right kind of auto-width but I can't find an option to give that to an inline-block or float DIV.
What you want is a grid-system.
For your information: you can set the width of your divs in percentage (based on the width of the parent container).
If you want all <div> elements in #prducts to be 1/6 of the screen width, you should remove the width of prducts (set it to auto) and then do this:
#prducts > div {
width: 16.666%;
}
Beside the typo in #products you should know that you are using the id identifier. You can only have one html element width the id "products". If you plan to have more then one, you should change that to a class name.
I don't really unterstand what you want to do in your fiddle. You should not use tables for layout reasons. With my anweser and your fiddle, you will run into problems width the margin of the > div items, which you could easily avoid using a box based layout.
You can use bootstrap grid system, bootstrap takes care of the media queries. You need to give the div classes such as "col-md- " depending on the columnwidth and the screens you want to support. If you do not want to use the full library you could mimic bootstrap implementation for fluidic layouts.
http://getbootstrap.com/css/
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/