I want to create a table with 3 columns: On the left and right fixed-width columns (which are obscured by position:fixed - divs) and in the middle a variable width column.
This does NOT work:
<table>
<tr>
<td width=202px></td>
<td> [MYCONTENT] </td>
<td width=200px></td>
</tr>
</table>
The problem is, that for some reason the browsers (tested on Chrome and Firefox) think that I don't really mean it when the browser-window is not wide enough: The outer columns are cropped and width-setting ignored, therefore the real content is sliding under my divs and become completely inaccessible.
The only idea I have left is to use a 1990's-era transparent pixel resized to 200px width, but I shudder at the thought. There must surely be a better way?
(BTW, yes I have tried various pure-css layouts, and none was suitable, for example if you use overflow:auto for the middle column, the scrollbar at the bottom also scrolls(!!) that means if the page is both higher and wider than the window, you have to first scroll down to see the scrollbar, then scroll horizontally, then maybe scroll up again to see what you wanted to see in the first place. I also tried to use padding: to force the needed margins on the left and right, but this also was ignored when the browser-window was not wide enough.)
ok - here it is with tables.
http://jsfiddle.net/sheriffderek/wAGKp/2/
i guess the short answer would be - take the styles out of the html and use a selector. (class in this case" and then min-width --- and width... also - keep in mind that padding and margins will change the width of your stuff... so you could use the border-box method... (it's rad) and included in the second... makes it so that padding stays in the original div size --- hope this helps.
and here it is the way i would do it. (without tables...)
http://jsfiddle.net/sheriffderek/GBtdy/1/
Tables are for tabular data, if you want to layout content you should be using CSS.
I recommend using something like Twitter Boostrap if you struggling with the CSS.
If you really just want a specific solution have a look at the results for terms like "css 3 column layout fluid center - I am not fobbing you off with that, there really are great answers there that are exactly what you want, and lots of search results will take you to those pages (especially to the manisheriar.com and A List Apart articles).
You can use min-width (on the middle div) and max-width - as well as media queries - to help control what happens in smaller windows.
Related
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I am building a very simple page, powered by tumblr.
It has 3 columns of content in the main area. The content divs are all set to a width of 33% and floated left, most of the time this arranges itself as you would expect, but as you resize the window it seems to sometimes revert to 2 columns. Anyone know how to solve this?
The html is here: http://emilestest.tumblr.com
Try to set the .item css width to: 32%. The browser probably miscalculates width sometimes so you probably have a extra pixel or two, so the float overlaps to next line.
There is a Javascript action involved. Your article html elements gets the absolute position and some coordinates. Have a look over those scripts (or disable them, in order to use only CSS for positioning).
In your specific case, there are several solutions:
Place + size the divs with JavaScript and disable CSS layout
Use display: table
Use a table element
Disclaimer: For all those who cry out when they read table:
Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to control graphic and page layout.
Source: http://en.wikipedia.org/wiki/Tableless_web_design#The_use_of_tables
I'm having a slight problem. Whenever I hover over the "SEO" option on my navigation in IE, the navigation breaks & moves to the side. This doesn't happen in Firefox. Changing the navigation to position:absolute fixes it, but then the main content becomes merged with the navigation. It all validates. Any help would be much appreciated!
http://www.joemarketeer.com
http://jsfiddle.net/eoJ1/Ra4tR/
Thanks loads!
The navleft and navright divs are resizing independently, which is to be expected given your design structure. But it looks weird as it comes down on top of the content below:
One suggestion I can give you is not to set the navigation bar width in %, which you have done for these two divs. If you set a fixed width (in px) or remove the width specification completely (in which case it will take the width of its inner content), a horizontal scrollbar will appear below the page when the width is small, which I suppose is fine. Also, use as few floats as possible as they break the flow of content in the document and are more prone to breaking layouts. Both these divs have a float:left, which can be dumped for more stable solutions. I'm saying all this because I think the breaking of the layout on hover is occurring due to these reasons. If you can take care of this, your problem might disappear.
So my suggestion is to have a single nav div with width: 100%. Inside this put two divs: navleft and navright with display:inline and widths a.) specified in px or not at all, or b.) specified in % but with some min-width in px. If you don't specify any width for navright, it will expand to fill all of the space on the right.
This way these two divs will not reflow independently.
Basically, toy around more until you get better command over CSS; I think more experience will automatically help you sort out issues like this.
I have a reasonably complex layout problem:
I would like to have a main box that has 95% width and that has side margins all around (140px 2.5% 20px 2.5%).
Within that box I would like to have two columns:
The first should (left hand) should have a transparent background and will be mainly for links but also some other arbitrary block content (like poll results etc.). The menu in this bar is an unordered list and I would like it to highlight in such a way as to appear to join with the content when active (which means that the 2nd column must be at least as high as the menu is; thus equal height columns are an issue although, I don't mind using min-height and assuming that the menu will never be longer than, say, 400px). This column should be 180px (unless a percentage is absolutely vital; then just assume 30%)
The second column is the content column and should be padded in slightly from the main content holder but not from the left hand column (so that the links appear to join the content). I would like have rounded corners on this column which means that the standard faux column technique will not work because the rounding does not apply to it. (this column should take the rest of the available space inside the main div that is 95% wide)
I also like the idea of using rounded corners on the left hand side of the highlighting of the active menu item.
All this is going to have an absolutely positioned header above and if possible, I would prefer to use jquery's "corner" plugin to create rounded corners rather than images but I'm at a stage where it doesn't matter immensely.
The problem is that I've done each thing individually but not all together. IE generally mucks it up somehow. For example, the closest that I've come to doing it correctly, IE decided that although my menu bar was floated to the left, it shouldn't actually write any content horizontally in line with the menu and so although the box was there (I could see the background) the content was halfway down the page...
Sorry that this is so long and without code but it seems silly to give a pile of code to what seems like should be a trivial problem...
Here's what I managed to get working in standards compliant browsers:
alt text http://www.inselpix.com/img/24036931603.jpg
(I've never used this image host before, I hope it works...)
Check out the float tutorial.
This 2 column layout caters for IE deficiencies.
IE has problems with the float model (although apparently there's improvement in IE 8). You could try using just absolute positioning... even though that's probably not the ideal solution.
Thanks all, Katesmeow probably helped the most:
Turns out what I needed to do was absolutely position the main div and the left (menu) div (which I gave a minimum height) and then relatively position the content div. I made the left menu 18% wide with a 1% left margin and the content div I made 80% wide with a 1% right margin. I also had to add bottom padding to the main div according to the top offset that I gave to the content div (so I used "top: 30px" to give the main div padding from my content div and then used "padding-bottom: 60px" to compensate 30px for the top - because otherwise the div extends too far - and then add a further 30px of padding).
The problem is that IE still mucks it up; so while my main div is 95% wide, IE doesn't do the relative widths properly and my main content pane is too wide. So, I used conditional comments and set the content div to be 76% wide (95% x 80% = 76%) and it's working reasonably well. The rounded corners are doing something slightly odd in IE but it's fine... The biggest problem now is that I don't have a bottom margin on the main div but I can live with that if I can't figure it out.